如何使用Angular验证器让表单控件指定非空默认值失效？

要实现当下拉框选中"Please Select"（对应值not-allowed）时表单无效的需求，你需要自定义验证器来排除这个特定值——因为Validators.required仅校验值是否为空，而你的默认值是非空的，所以无法满足需求。

1. 编写可复用的自定义验证器 #

创建一个接收禁止值作为参数的验证器函数，判断控件值是否等于该禁止值，若是则返回验证错误：

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function forbiddenValueValidator(forbiddenValue: string): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const isForbidden = control.value === forbiddenValue;
    return isForbidden ? { forbiddenValue: { value: control.value } } : null;
  };
}

2. 在表单中应用验证器 #

修改你的表单组件代码，引入自定义验证器并替换目标控件的验证规则：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { forbiddenValueValidator } from './validators'; // 路径根据实际文件位置调整

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css'],
})
export class MyFormComponent {
  public myForm: FormGroup;
  // 把禁止值抽为常量，方便后续维护
  private readonly FORBIDDEN_OPTION = 'not-allowed';

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      username: this.formBuilder.control('', [Validators.required]),
      favouriteFood: this.formBuilder.control(this.FORBIDDEN_OPTION, [
        Validators.required, // 保留required确保值不会意外为空
        forbiddenValueValidator(this.FORBIDDEN_OPTION) // 添加自定义验证器
      ]),
      password: this.formBuilder.control('', [Validators.required]),
    });
  }

  public save(): void {
    if (this.myForm.valid) {
      console.log('submitted');
    } else {
      console.error('invalid');
    }
  }
}

3. 可选：在模板中添加错误提示 #

如果需要给用户直观的反馈，可以在下拉框下方添加错误信息：

<div>
  <label>Favorite food</label>
  <select name="cars" id="cars" formControlName="favouriteFood">
    <option value="not-allowed">Please Select</option>
    <option value="steak-0">Steak</option>
    <option value="pizza-1">Pizza</option>
    <option value="tacos-2">Tacos</option>
  </select>
  <!-- 显示自定义验证器的错误提示 -->
  <span *ngIf="myForm.get('favouriteFood')?.errors?.['forbiddenValue']" style="color: red;">
    请选择有效的食物选项
  </span>
</div>

完成以上修改后，当用户未修改下拉框（仍选中"Please Select"）时，favouriteFood控件会触发forbiddenValue错误，导致整个表单处于无效状态，提交时会进入invalid分支。

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