Question

我有类似这样的反应形式：

this.form = this.formBuilder.group({
      filter: [''],
      filterReason: [''],
      documentsRequired: [''],
      urgencyReason: [''],
      reportRequestedDate: [''],
      urgencyDate: [''],
      urgencyRemarks: ['']
    });

还有一些像这样的值：

validation = false;

我遇到的问题是，我需要在html中切换该 validation 的值，并且基于此，如果 validation = true ，我需要向某些字段添加验证看起来像这样：

this.form = this.formBuilder.group({
      filter: [''],
      filterReason: [''],
      documentsRequired: [''],
      urgencyReason: [''],
      reportRequestedDate: ['', Validation.required],
      urgencyDate: ['', Validation.required],
      urgencyRemarks: ['', Validation.required]
    });

即使我在呈现组件时具有初始化形式，该怎么办？

Answer 1

Angular在AbstractControl上公开了我们的setValidators方法，因此您可以根据自己的条件更改验证器集：

onValidationChanged(validation: boolean) {
  ['reportRequestedDate', 'urgencyDate', 'urgencyRemarks'].forEach(name => {
    this.form.get(name).setValidators(validation ? Validators.required : null);
  });
}

Answer 2

这是一个complete StackBlitz，具有 ReactiveForms 和动态验证。

想法是在explicit属性上有一个setter，这样，您每次使用validation设置属性时就可以切换验证器，然后通过调用myControl.setValidators(validate ? [Validators.required] : null) < / p>

在您的myControl.updateValueAndValidity()上，有两种方法很重要：

setValidators（）
updateValueAndValidity（）

FormControl

希望有帮助！

Answer 3

在您的html中：

<button  (click)="toggleValidation();">toggle validation

</button>

在您的ts中：

    toggleValidation(validation : boolean)
Object.keys(this.form).forEach(key=> {
this.form.get(key).setValidators(validation && key.*your condition* ? Validators.required : null); });}

ReactiveForms角度验证

3 个答案: