angular - 如何在 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 的验证(如果只需要一个，则为两者显示一条消息可能会产生误导)。

这里您需要测试至少一个表单控件是否有值。由于没有现有的内置验证器，您需要创建一个:

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 来测试它，您需要检查两个控件是否为空:

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

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

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

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