时间戳

首页 > 解决方案 > Angular中的条件验证问题

angular - Angular中的条件验证问题

问题描述

我在 Angular 9 中有一个表单，我想根据下拉框的条件对其进行验证。在我的情况下，表单有一个字段 massEmailType 并且可以有 2 个值，农场或联系人。我想要的是，如果用户选择 Farm tractList 是必填字段。

  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],
       

        })
}

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

标签： angular

解决方案

使用 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],
      });
  }

推荐阅读