如何要求至少有一个反应式角输入

问题描述

我正在尝试至少要求输入中的一个，因此如果用户填写一个输入，请从两个输入中删除错误。这是我的HTML

for (let res of responses) {
    yield put(addResponseToConversation(res));
    yield call(sleep,0.2);
}

这是我的Angular代码

<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不会帮助您，因为它会删除您表单的现有验证器。

您需要测试整个表单的验证，而不是每个单独的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进行测试，您需要检查两个控件是否为空：

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

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

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

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