如何解决如何要求至少有一个反应式角输入
我正在尝试至少要求输入中的一个,因此如果用户填写一个输入,请从两个输入中删除错误。这是我的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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。