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

Question

我有一个带有6个字段的formGroup对象。 6个字段中的5个字段是强制性的，这意味着它们之一必须具有值才能成为有效表格。只要5个字段之一具有值，就没有关系。如何为表单添加自定义验证器？

Answer 1

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

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

可以在此处找到很好的例子：LINK

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

Answer 2

假设您正在使用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;
    }
}