Angular 自定义表单验证器使用其他控制器答案

【问题标题】：Angular custom Form Validator use other ControlersAngular 自定义表单验证器使用其他控制器
【发布时间】：2020-04-17 23:19:15
【问题描述】：

我尝试为我的 Angular 9 表单实现自定义验证器。验证有点困难。

因为几个字段取决于选择输入的选择。

例如，如果我选择我选择的选项之一，则需要 Formfield 3。

但如果我选择选项二，Formfield 5 是必需的。

这就是我编写自定义验证器的原因：

export class FormComponent {
  public form: FormGroup = new FormGroup({
    ...
    selectField: new FormControl(null, [Validators.required]),
    ...
    formField3: new FormControl(null, [this.validatorArtAende]),
    formField4: new FormControl(),
    formField5: new FormControl(null, [this.validatorArtAender])
  });

  validator (control: AbstractControl) => {
    if (this.form.value.selectField === 'option1' && control.value.length === 0) {
      return { required: true };
    }
    return null;
  }
}

问题在于 this.form 是未知的（无法读取未定义的属性“表单”）。那么是否有任何选项可以将不同控件的表单或值传递给自定义验证器？

【问题讨论】：

标签： angular

【解决方案1】：

根据文档，AbstractControl 有一个 Parent 属性。您应该能够使用它来遍历您的父级 FormGroup，然后遍历您的验证器中的 selectField。

validator (control: AbstractControl) => {
  if (control.parent && control.parent.controls['selectField'] === 'option1' && control.value.length === 0) {
    return { required: true };
  }
  return null;
}

【讨论】：

我仍然遇到同样的错误。但是我在你的 if 周围添加了一个 if，通过它我验证 control.parent 是否已经存在（if (control.parent) {...} return null）。谢谢您的支持。当您调整代码时，我愿意接受您的回答
已更新以确保验证器在尝试访问父级之前对其进行检查。