反应式表单角度验证答案

【问题标题】：ReactiveForms Angular validation反应式表单角度验证
【发布时间】：2019-01-24 10:06:09
【问题描述】：

我有一些这样的反应形式：

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

即使我在渲染组件时有初始化表单，如何做到这一点？

【问题讨论】：

你能回答一下吗，我可以试试，谢谢
我在下面添加了一个完整的 stackblitz 和一个详细的答案，这个答案还使用updateValueAndValidity 来确保新的验证器在设置后运行。

标签： angular validation angular-reactive-forms

【解决方案1】：

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

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

【讨论】：

当您更改其验证器时，您仍然需要在您的控件上运行updateValueAndValidity，如下面我的回答中所述。

【解决方案2】：

这是一个带有ReactiveForms和动态验证的complete StackBlitz。

想法是在validation 属性上设置一个设置器，这样您就可以在每次使用myControl.setValidators(validate ? [Validators.required] : null) 设置属性时切换验证器，然后通过调用myControl.updateValueAndValidity() 更新其有效性状态

这里有两种方法对您的FormControl 很重要：

setValidators()
updateValueAndValidity()

import { Component } from '@angular/core';
import { FormBuilder, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  form: any;
  private _validation = true;

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
        filter: ['Hello'],
        filterReason: ['Test'],
        documentsRequired: ['Document'],
        urgencyReason: ['Nothing'],
        reportRequestedDate: [''],
        urgencyDate: ['Today'],
        urgencyRemarks: ['']
      });
      this.setValidators(this.validation);
  }

  set validation(validate: boolean) {
    this._validation = validate;
    this.setValidators(validate);
  }
  get validation(): boolean {
    return this._validation;
  }

  setValidators(validate: boolean): void {
    this.reportRequestedDate.setValidators(validate ? [Validators.required] : null);
    this.reportRequestedDate.updateValueAndValidity();

    this.urgencyDate.setValidators(validate ? [Validators.required] : null);
    this.reportRequestedDate.updateValueAndValidity();

    this.urgencyRemarks.setValidators(validate ? [Validators.required] : null);
    this.urgencyRemarks.updateValueAndValidity();
  }

  onSubmit(): void {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }

  get reportRequestedDate(): FormControl {
    return this.form.get('reportRequestedDate') as FormControl;
  }

  get urgencyDate(): FormControl {
    return this.form.get('urgencyDate') as FormControl;
  }

  get urgencyRemarks(): FormControl {
    return this.form.get('urgencyRemarks') as FormControl;
  }
}

希望有帮助！

【讨论】：

【解决方案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); });}

【讨论】：