Angular 2+ 自定义验证器 "required if" 另一个字段已填写

Question

我正在尝试为模板驱动的表单创建一个自定义验证器，如果一个字段被填充到另一个字段中，另一个字段将成为必填项，但如果第一个字段为空，则第二个字段也不需要。

按照文档中的 (typescript) 示例构建自定义验证器指令，我可以在字段上获取运行，并将另一个字段的名称传递给它。现在这是我的问题...

如果在字段 1 中输入了一个值，而我检查字段 2 是否为空，我该如何在字段 2 上设置 "invalid"？（我意识到我可以访问它的 AbstractControl）。

如果我自己在字段 2 上设置了 "invalid"，我是否需要在字段 2 上设置一个单独的验证器以在填写时删除其无效状态？

或者当字段 1 的验证器被触发时，我是否应该在字段 2 上添加内置的 "required" 验证器（如果是的话如何）？

非常感谢任何指点！

Answer 1

我认为你可以在没有自定义验证器的情况下实现你想要的。

下面的代码来自模板驱动的表单 - 将第二个字段上的 required 验证程序指令绑定到第一个字段的 ngModel 值。所以在这里，当第一个字段有值时，您已经对第二个字段应用了条件验证。

First: <input type="text" name="first" [(ngModel)]="theFirst" #first="ngModel" >

Second: <input type="text" ngModel [required]="theFirst ? true : null " #second="ngModel" name="second"/>

<div *ngIf="second.errors">
  <span [hidden]="!second.errors.required">Second is required</span>
</div>

关于条件验证绑定的进一步讨论是 here。

Angular 2+ 自定义验证器 "required if" 另一个字段已填写

Angular 2+ custom validator "required if" another field is filled in

validation

typescript

angular2-forms

angular