Angular 角反应形式的动态验证

Angular 角反应形式的动态验证,angular,validation,angular-reactive-forms,Angular,Validation,Angular Reactive Forms,我有一个反应式的角度。仅当已填充openDate和closeDate时,如何对tax执行所需的验证 this.employerBasicsForm = this.fb.group({ tax: ['', [Validators.required], openDate: [''], closeDate: [''], }); 编写自己的验证器fn。您可以在窗体组中使用它并访问窗体控件以检查其状态,也可以在窗体控件本身上使用它并通过窗体控件父属性访问同级控件 以下是答案,在这种情况下不需

我有一个反应式的角度。仅当已填充
openDate
closeDate
时,如何对
tax
执行所需的验证

this.employerBasicsForm = this.fb.group({
  tax: ['', [Validators.required],
  openDate: [''],
  closeDate: [''],
});

编写自己的验证器fn。您可以在窗体组中使用它并访问窗体控件以检查其状态,也可以在窗体控件本身上使用它并通过窗体控件父属性访问同级控件


以下是答案,在这种情况下不需要自定义验证器:

在没有验证器的情况下正常创建表单:

this.employerBasicsForm = this.fb.group({
  tax: [''],
  openDate: [''],
  closeDate: [''],
});
您的
openDate
closeDate
字段都需要更改方法:

<div><input type="text" formControlName="openDate" (change)="checkFields()" /></div>
<div><input type="text" formControlName="closeDate" (change)="checkFields()" /></div>
安德鲁有些像

  employerBasicsForm = new FormGroup(
    {
      tax: new FormControl(),
      openDate: new FormControl(),
      closeDate: new FormControl()
    },
    this.validationTax()
  );

  validationTax() {
    return (group: FormGroup) => {
      return group.value.openDate && group.value.closeDate && !group.value.tax
        ? { required: true }
        : null;
    };
  }

它们不是很复杂。对我来说,这是最好的解决办法,但我也尊重你的意见。在这种情况下,我在自己的组件中使用了一个函数,因为这个验证器不在组件之外使用。一般来说,使用自定义验证器比使用添加/删除验证器更“健壮”。否则,如果从表单的值开始填充或not@Eliseo我恭敬地表示不同意。在这种情况下使用自定义验证器会很麻烦。如果您希望在应用程序的多个表单中出现相同的验证问题,并且所有这些表单都是以您无法保证的相同方式构造的,那么定制验证器是非常好的。如果表单已填充或未填充,上述解决方案仍然有效。我也尊重您的意见,但如果您看到我的答案,我认为创建自定义验证器并不困难。如果没有openDate和closeDate,您可以“禁用”formControl“tax”,如果有值,则启用
  employerBasicsForm = new FormGroup(
    {
      tax: new FormControl(),
      openDate: new FormControl(),
      closeDate: new FormControl()
    },
    this.validationTax()
  );

  validationTax() {
    return (group: FormGroup) => {
      return group.value.openDate && group.value.closeDate && !group.value.tax
        ? { required: true }
        : null;
    };
  }