如何使用 Angular 验证器使表单控件中的给定值无效？

Question

我有一个角度反应形式，其中一个选择字段是预先选择的。
预选值不为null，也不能为null，因为这个值在其他组件中的使用方式。在某些情况下，如果仍选择默认值，我希望表单无效。 我想一定有一种方法可以通过验证器以与

nonNullable

验证器类似的方式实现这一点，除了在这种情况下是给定值（

"not-allowed"

）而不是

null

.

这是我的表格.ts：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css'],
})
export class MyFormComponent {
  public myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      username: this.formBuilder.control('', [Validators.required]),
      favouriteFood: this.formBuilder.control('not-allowed', [
        Validators.required,
      ]),
      password: this.formBuilder.control('', [Validators.required]),
    });
  }

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

和 html:

<form [formGroup]="myForm" (ngSubmit)="save()">
  <label>Username:</label>
  <input type="text" formControlName="username" />

  <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>
  </div>
  <label>Password:</label>
  <input type="password" formControlName="password" />

  <button type="submit">Submit</button>
</form>

小提琴的链接：
https://stackblitz.com/edit/angular-elements-fiddle-dwhmc8?file=src%2Fapp%2Fapp.component.ts

我希望表格在“请选择”选项仍处于选中状态时无效。

Answer 1

您可以创建一个自定义

ValidatorFn

来检查您的控件的值：

favouriteFood: this.formBuilder.control('not-allowed', [
  Validators.required,
  (control: AbstractControl) => {
    return control.value === 'not-allowed'
      ? { favoriteFood: true }
      : null;
    },
]),

形状是

(AbstractControl): ValidationErrors | null

所以，如果你发现错误，你必须返回一个

ValidationErrors

对象，其中包含要标记为无效的字段的键。