Angular 条件验证的问题

Question

我在 Angular 9 中有一个表单，我想根据下拉框的条件进行验证。 在我的例子中，表单有一个字段 massEmailType 并且可以有 2 个值，Farm 或 Contact。 我想要的是，如果用户选择 FarmtractList 是必填字段。

  createForm(): FormGroup {
    return this.fb.group(
        {
            emailCampaign: [{value: '', disabled: false}, Validators.required],
            massEmailType: [{value: '', disabled: false}, Validators.required],
            tractList: ['', RxwebValidators.required({conditionalExpression: 'x => x.massEmailType === "Farm"' })],
            massEmailSender: [{value: '', disabled: false}, Validators.required],
       

        })
}

初始验证有效，因此如果用户选择 Contact，它将在没有tractList 中的值的情况下进行验证。 但是，如果用户改变主意并返回 Farm，它仍会显示表单有效。 在初始验证后我需要做些什么来确保任何更改都可能再次使表单无效？

Answer 1

使用 rxjs 订阅 massEmailType 控件的更改并验证该值并根据该值设置验证器。

  ngOnInit(): void {

    const form = this.createForm()

    form.controls.massEmailType.valueChanges.subscribe((data) => {
      if (data === 'Farm') {
        form.controls.tractList.setValidators([Validators.required]);
      } else {
        form.controls.tractList.setValidators([]);
      }
    });
  }


  createForm(): FormGroup {
    return this.fb.group(
      {
        emailCampaign: [{ value: '', disabled: false }, Validators.required],
        massEmailType: [{ value: '', disabled: false }, Validators.required],
        tractList: [''],
        massEmailSender: [{ value: '', disabled: false }, Validators.required],
      });
  }