Angular中当选值为0时标记表单控件无效的实现问题

Hey, let's tackle this requirement step by step. When the select dropdown's value is 0, we need to mark the corresponding form control as invalid and show the validation message. Here are two straightforward approaches to implement this in your Angular project:

方式一：使用自定义表单校验器（推荐） #

This approach aligns with Angular's built-in form validation pattern, making it more maintainable and scalable.

1. 编写自定义校验器函数 #

First, add this function to your component class (don't forget to import the required form modules):

import { FormGroup, FormControl, Validators, AbstractControl, ValidationErrors } from '@angular/forms';

// ...

// 自定义校验器：判断选中值是否为无效的"0"
private tenureValidator(control: AbstractControl): ValidationErrors | null {
  const selectedValue = control.value;
  // 如果值是"0"、null或undefined，返回错误对象
  if (selectedValue === '0' || selectedValue == null) {
    return { invalidTenure: true };
  }
  // 校验通过则返回null
  return null;
}

2. 初始化表单时绑定校验器 #

Update your form initialization code to attach the custom validator to the tenure control:

ngOnInit(): void {
  this.planmodeForm = new FormGroup({
    tenure: new FormControl(null, [
      Validators.required, // 可选：保留必填校验逻辑
      this.tenureValidator // 添加自定义校验器
    ]),
    // 其他表单控件...
  });
}

3. 调整模板中的校验提示 #

Modify your template to check for the custom invalidTenure error:

<select name="tenure" formControlName="tenure" class="form-control" (change)="TenureChange($event.target.value)">
  <option value="0">--select--</option>
  <option *ngFor="let tenur of ddltenure">{{tenur}}</option>
</select>
<span class="validation-block" *ngIf="planmodeForm.get('tenure')?.hasError('invalidTenure') && planmodeForm.get('tenure')?.touched">
  Please select tenure
</span>

4. 优化change事件（可选） #

Add logic to the TenureChange method to ensure validation triggers immediately when the user selects an option:

TenureChange(value: string): void {
  const tenureControl = this.planmodeForm.get('tenure');
  if (tenureControl) {
    tenureControl.markAsTouched(); // 标记控件为已触摸，确保提示显示
    tenureControl.updateValueAndValidity(); // 手动更新校验状态
  }
}

方式二：通过Change事件手动控制错误状态 #

If you prefer a more direct, imperative approach, you can manually set or clear the control's error state in the change event handler:

1. 完善TenureChange方法 #

Update the method in your component class:

TenureChange(value: string): void {
  const tenureControl = this.planmodeForm.get('tenure');
  if (tenureControl) {
    if (value === '0') {
      // 当选中"0"时，设置错误状态
      tenureControl.setErrors({ invalidTenure: true });
    } else {
      // 选中有效选项时，清除错误
      tenureControl.setErrors(null);
    }
    tenureControl.markAsTouched(); // 确保校验提示显示
  }
}

2. 模板调整 #

Use the same template as in the first approach—your validation span will show when the invalidTenure error exists and the control is touched.

注意事项 #

• 类型匹配: If your ddltenure options use numeric values instead of strings, convert the value parameter in TenureChange to a number (e.g., +value === 0) to avoid type mismatch issues.
• 表单提交: Ensure your form submission logic checks planmodeForm.valid to prevent invalid submissions.

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