angular - 如何为 FormGroup 创建自定义验证器

Question

我有一个带有 6 个字段的 formGroup 对象。6 个字段中有 5 个是强制性的，这意味着它们中的任何一个都必须具有值才能成为有效的表单。5 个字段中的哪一个具有值并不重要，只要其中一个具有值即可。如何为表单添加自定义验证器？

Answer 1

假设您使用模板驱动表单的 2 方式绑定。

@Component({
  selector: 'my-component',
  template: `
      ...
      <input name="input1" [(ngModel)]="input1" [required]="!checkIfValueExists()"/>          
      <input name="input2" [(ngModel)]="input2" [required]="!checkIfValueExists()"/>     
      <input name="input3" [(ngModel)]="input3" [required]="!checkIfValueExists()"/>     

  `
})
export class MyComponent {
    input1: string;
    input2: string;
    input3: string;

    constructor() {}

    checkIfValueExists(): boolean {
        return input1 || input2 || input3;
    }
}

Answer 2

从我的角度来看，有两种方法：

1. @Directive将实现Validator并在其中包含完整逻辑的自定义。然后，您可以将其用作表单元素（和按钮）的验证指令。

在那里可以找到很好的例子：LINK

2. 或者，不是那么治愈的解决方案，但如果您只在一个组件上需要它（没有可重用性），只需在组件内部实现方法，检查输入值并根据结果执行逻辑以显示错误消息或您需要的任何内容你的项目。