Question

我正在构建具有反应形式的表单，但是我在组内有一些嵌套组，对于该嵌套组，我只需要输入验证即可。我的问题是，在该嵌套组中，我必须进行验证，以确保如果用户在某项输入中输入了某些内容，则不再需要该组中的其他输入。

这就是我现在所拥有的，我尝试添加 Validators.required RequiredValidatonOnlyOne（）。是否可以添加一些自定义验证，以验证用户是否仅在一个输入中输入了内容

 this.formGroup = this.formBuilder.group({
      lastName: [{ value: '', disabled: false }, [Validators.maxLength(50), Validators.required]],
      phones: this.formBuilder.group({
        phone: [{ value: '', disabled: false }],
        phone2: [{ value: '', disabled: false }],
        mobile: [{ value: '', disabled: false }],
      }, this.RequiredValidatonOnlyOne())
    });


  private RequiredValidatonOnlyOne(){
    return (controlGroup) => {
      const controls = controlGroup.controls;
      if (controls) {
        const theOne = Object.keys(controls).find(key => controls[key].valid);
        if (!theOne) {
          return {
            atLeastOneRequired: {
              text: 'At least one should be selected'
            }
          };
        }
      }
      return null;
    };
  }

Answer 1

RequiredValidatonOnlyOne()
  {
    return (controlGroup:FormGroup)=>{
      const controls = controlGroup.controls;
      let valid:boolean=false;
      return Object.keys(controls).find(key => controlGroup.get(key).value)?null
             :{requiredOne:"required one"}
    }
  }

抱歉，并已更新：在Angular 8 formBuilder中，使用{validator:this.RequiredValidatonOnlyOne()}将验证器添加到formGroup，请参见stackblitz

this.formGroup = this.formBuilder.group({
      lastName: [{ value: '', disabled: false }, [Validators.maxLength(50), Validators.required]],
      phones: this.formBuilder.group({
        phone: [{ value: '', disabled: false }],
        phone2: [{ value: '', disabled: false }],
        mobile: [{ value: 'aaa', disabled: false }],
      }, {validator:this.RequiredValidatonOnlyOne()})
    });
  }

您需要使用值搜索控件，而不是是否有效（始终有效，因为控件内部没有验证器-并且它们不得包含任何值）

Answer 2

我看到的方法是clearValidators()。在所有控件上设置(change)事件监听器。在更改时调用一个函数，将formcontrol本身作为参数传递，并将除此以外的其他控件的clearvalidator传递给它。如果输入为空，则在所有控件上再次setvalidators()。

反应形式Angular formGroup

2 个答案: