如何在 Reactive Form Angular 上要求至少一个输入

Question

我试图要求至少一个输入，所以如果用户填写一个输入，则从两个输入中删除错误。这是我的 HTML

<form [formGroup]=form>

<input formControlName="firstName" matInput required>
<mat-error *ngIf="firstNameControl.hasError('required')"> 
    Name can't be empty
</mat-error>

<input formControlName="lastName" matInput required>
<mat-error *ngIf="lastNameControl.hasError('required')"> 
    Last Name can't be empty
</mat-error>

</form>

这是我的Angular代码

  private buildForm(): void {
    this.form = this.formBuilder.group({
        firstName: [null, Validators.required],
        lastName: [null, Validators.required]
      }
    );
  }


  get firstNameControl(): AbstractControl {
    return this.form.get('firstName');
  }

  get lastNameControl(): AbstractControl {
    return this.form.get('lastName');
  }

我尝试了 clearValidators 但由于某些原因行不通

Answer 1

clearValidators 不会帮助您，因为它会删除您表单的现有验证器。

您需要测试整个表单的验证，而不是每个单独的 formControl 的验证（如果只需要一个，则为两者显示一条消息可能会产生误导）。

在这里您需要测试至少一个表单控件是否有值。由于不存在现有的 built-in 验证器，您需要创建一个：

function requireOneControl() {
  return formGroup => {
    if (formGroup.get('firstname').value === '' && formGroup.get('lastname').value === '') {
      return {required: 'at least one of the items is required'}
    }
    return null;
  } 
}

并在您的 formGroup 上使用它：

form: FormGroup = new FormGroup({
    firstname: new FormControl(''),
    lastname: new FormControl('')
  }, requireOneControl());

使用您的 formGroup 进行测试，您需要检查两个控件是否为空：

如果为真，则出现错误，您 return 自定义对象以显示消息
如果为 false，至少有一个控件有一个值，你 return null 表示验证成功

然后您可以使用它在模板中显示错误消息：

<p *ngIf="form.errors">{{form.errors.required}}</p>

这是一个工作示例：https://stackblitz.com/edit/angular-ivy-yramox?file=src%2Fapp%2Fapp.component.ts

如何在 Reactive Form Angular 上要求至少一个输入

How to require at least one input on Reactive Form Angular

angular

angular-reactive-forms

angular-forms