gpt4 book ai didi

angular - 如何在模板驱动的表单中为 ngModelGroup 添加自定义验证

转载 作者:行者123 更新时间:2023-12-02 20:16:34 26 4
gpt4 key购买 nike

我正在使用模板驱动的表单方法。我想在 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>

我在网上搜索,只找到类似 this 的文章其中仅在输入级别而不是 ngModelGroup 级别讨论自定义验证。其他文章讨论了我无法实现的 Reactive 表单。

我们将不胜感激任何帮助。

最佳答案

由于您处理模板驱动的表单,因此最好创建将验证器添加到您的地址组的指令:

@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 }}

Ng-run Example

关于angular - 如何在模板驱动的表单中为 ngModelGroup 添加自定义验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52261323/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com