angular - 如何在模板驱动的表单中为 ngModelGroup 添加自定义验证
问题描述
我正在使用模板驱动的表单方法。我想在ngModelGroup
. 即,如果填写了一个字段,则所有字段也必须填写。
<form #f="ngForm">
<div ngModelGroup="address">
<input type="email" name="house_number" class="form-control" ngModel>
<input type="email" name="street_number" class="form-control" ngModel>
</div>
</form>
我在网上搜索,只发现这样的文章只在输入级别而不是在级别讨论自定义验证ngModelGroup
。其他文章谈论我无法实现的反应式表单。
任何帮助将不胜感激。
解决方案
由于您处理模板驱动的表单,因此最好创建将验证器添加到您的地址组的指令:
@Directive({
selector: '[ngModelGroup][requiredIfOneFilledValidator]',
providers: [{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => AddressValidator),
multi: true
}]
})
export class RequiredIfOneFilledValidator implements Validator {
validate(group: AbstractControl): ValidationErrors | null {
const controls = (group as FormGroup).controls; // we expect FormGroup here
const controlNames = Object.keys(controls);
const filledCount = controlNames.filter(name => !!controls[name].value).length;
return filledCount > 0 && filledCount < controlNames.length ? { required: true } : null;
}
}
现在您可以轻松地在模板中使用此验证器:
<div ngModelGroup="address" requiredIfOneFilledValidator>
如果您想检查组是否有效,只需使用模板引用变量:
<div ngModelGroup="address" requiredIfOneFilledValidator #addressGroup="ngModelGroup">
...
</div>
<p>Group valid? {{addressGroup.valid}}</p>
或者只是检查整个表单的状态:
Form valid? {{ f.valid }}
推荐阅读
- java - Liquibase 差异:运行 Liquibase 时出现意外错误:无法加载类 [com.company.product.model.persist.Address]
- r - 合并发生在下一行的时间点
- python - 在pyparsing中使用特定长度的字段标记字符串
- c# - 使用 WeakEventManager 时发生 WeakReference 泄漏
- javascript - 运行动画后如何应用无显示?
- javascript - 下载文件时显示进度条?
- android - GooglePlay 撤销了测试订阅
- python - 在numpy数组中第一次对高于阈值的值分组后如何设置等于nan?
- mysql - 复制远程数据库时遇到问题
- javascript - Javascript使用用户给出的行和列制作表格,并在点击时更改每个单元格的颜色