如何实现单选按钮选Yes时下拉文本框设为必填项？

问题描述 #

我正在编写Angular程序，希望实现当单选按钮选择Yes时，下拉文本框设为必填项。目前单选按钮unemployed和下拉框state均为必填状态，询问是否可通过判断unemployed的值来实现该需求。当前两者均为必填。

相关代码 #

HTML模板 #

<div class="container tb-10">
<form [formGroup]="form" (submit)="route()">
    <div>
        <div class="row">
            <h4>Unemployment:</h4>
            <div class="form-group">
                <label>Are you an individual who is or was in a period of unemployment that is at least 27 consecutive weeks and for all or part of that period you received unemployment compensation?</label>
                <div>
                    <label>
                        <input type="radio" name="unemployed" value="Y" formControlName="unemployed" > Yes&nbsp;&nbsp;
                    </label><br>

                    <label>
                        <input type="radio" name="unemployed" value="N" formControlName="unemployed" > No&nbsp;&nbsp;
                    </label><br>
                    <label *ngIf="hasError('unemployed', 'required') && isSubmitted">Please click on one of the option buttons above before submitting form!</label>
                </div>
                <div>
                    <label for="state" class="form-label">State:</label>
                    <select class="form-select" aria-label="State" id="state" value=""  formControlName="state" (focus)="controlFocussed()">
                        <option selected value=" ">Select State...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                    <label *ngIf="hasError('state', 'required') && isSubmitted">State is required.</label>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <button id="exit" class="btn btn-danger pull-left" >Exit</button>
        <button id="submitform" type="submit" class="btn btn-primary" > Next</button>
    </footer>
</form>

Component代码 #

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { NgModel } from '@angular/forms';
import {
Validators,
FormGroup,
FormBuilder,
FormsModule,
ReactiveFormsModule,
FormGroupDirective,
} from '@angular/forms';

@Component({
selector: 'app-unemployed',
templateUrl: './unemployed.component.html',
styleUrls: ['./unemployed.component.css']
})
export class UnemployedComponent {

  // add the following class property (needed to show the error message)
  isSubmitted = false;
  form!: FormGroup;


  constructor(private builder: FormBuilder,private router: Router) {
     this.initializeForm();
  }

 initializeForm() {
   this.form = this.builder.group({
     unemployed:  ['', Validators.required],
     state: ['', Validators.required],
   });
 }

 controlFocussed() {
   this.isSubmitted = false;
 }

 public hasError = (controlName: string, errorName: string) => {
   return this.form.controls[controlName].hasError(errorName);
 };



 route() {
   this.isSubmitted = true;
   if (!this.form.invalid) {
     this.router.navigateByUrl("/felony");
   }
 }
}

解决方案 #

完全可以通过监听unemployed的值变化来动态控制state的必填规则，具体实现步骤如下：

1. 修改表单初始化逻辑 #

初始化时不给state设置必填校验，后续根据单选按钮状态动态添加/移除：

initializeForm() {
  this.form = this.builder.group({
    unemployed:  ['', Validators.required],
    state: [''], // 初始化时不设置必填规则
  });
}

2. 添加值变化监听 #

在组件初始化阶段，监听unemployed控件的值变化，动态调整state的校验规则：

import { Component, OnInit } from '@angular/core';
// ... 其他导入保持不变

export class UnemployedComponent implements OnInit {
  // ... 原有属性保持不变

  ngOnInit(): void {
    // 监听unemployed选项变化
    this.form.get('unemployed')?.valueChanges.subscribe(selectedValue => {
      const stateControl = this.form.get('state');
      if (selectedValue === 'Y') {
        // 选择Yes时，添加必填校验
        stateControl?.setValidators(Validators.required);
      } else {
        // 选择No或未选择时，移除必填校验
        stateControl?.clearValidators();
      }
      // 更新控件状态，确保新的校验规则生效
      stateControl?.updateValueAndValidity();
    });
  }

  // ... 原有方法保持不变
}

3. 优化错误提示（可选） #

如果需要更精准的错误提示逻辑，可以调整state的错误显示条件，仅当选择Yes时才展示必填提示：

<label *ngIf="form.get('unemployed')?.value === 'Y' && hasError('state', 'required') && isSubmitted">State is required.</label>

这样就实现了需求：当单选按钮选择Yes时，下拉框变为必填项；选择No时，下拉框无需填写即可提交表单。

内容的提问来源于stack exchange，提问作者QuisDaCoder