Angular 如何在反应式窗体上要求至少一个输入

我试图要求至少一个输入，所以如果用户填写了一个输入，则从两个输入中删除错误。这是我的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>

---

我尝试了clearValidators，但由于某些原因无法工作

clearValidators

无法帮助您，因为它会删除表单中的现有验证器

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

在这里，您需要测试是否至少有一个formcontrols具有值。 由于没有现有的内置验证器，您需要创建一个：

功能要求控制（）{
返回formGroup=>{
if（formGroup.get（'firstname'）。值==''&&formGroup.get（'lastname'）。值==''）{
return{required:'至少需要一项'}
}
返回null；
} 
}

并在您的formGroup上使用它：

form:FormGroup=newformgroup({
名字：新表单控件（“”），
姓氏：新表单控件（“”）
}，requireOneControl（））；

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

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

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

{{form.errors.required}

以下是一个工作示例：

  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');
  }