Angular 2 - 在控件初始化后添加验证器答案

【问题标题】：Angular 2 - Add validator after control initializationAngular 2 - 在控件初始化后添加验证器
【发布时间】：2017-03-17 05:08:01
【问题描述】：

我想知道如何将验证器添加到已创建的 formControl（使用它自己的验证器创建）。但是，让我们想象一下，经过一段时间的延迟后，我想添加另一个（或者我有一个包含一些验证器的自定义控件）并且我想创建外部响应式表单并将内部验证器添加到外部。

有可能吗？我没有找到任何信息（仅关于重新设置所有验证器）感谢您的帮助！

  this.testForm = this.fb.group({
      testField: [{value: '', disabled: false}, [<any>Validators.required]]
    })

<form [formGroup]="testForm" novalidate>
  <custom_input>
    formControlName="testField"
    [outerFormControl]="testForm.controls.testField"
    </custom_input>


</form>

然后我想在我的自定义控件中添加其他验证器。我该怎么做？

custom_coontrol.ts

this.outerFormControl.push(Validators.maxLength(10));

【问题讨论】：

标签： forms validation angular

【解决方案1】：

@Component({
  selector: 'my-app',
  template: `
   <form [formGroup]="testForm" novalidate>
    <input type="text" formControlName="age">
   </form>
   <button (click)="addValidation()">Add validation</button>

   {{ testForm.valid | json }}
  `,
})
export class App {

  constructor(private fb: FormBuilder) {
     this.testForm = this.fb.group({
      age: [null, Validators.required]
    })
  }

  addValidation() {
    this.testForm.get('age').setValidators(Validators.maxLength(2));
  }
}

Plunker

【讨论】：

酷。有用。谢谢帕特里克！但怎么可能？我读到使用 SetValidators 将覆盖以前的验证器。 NG2 API：设置在此控件上处于活动状态的同步验证器。调用它会覆盖任何现有的同步验证器。
我猜他们改变了那个什么的
好的，我检查了源代码，这个方法将向现有的验证器添加新的验证器，以防传递的验证器在数组中。在其他情况下，它将覆盖以前的验证器。这是源代码： function coerceToValidator(validator: ValidatorFn | ValidatorFn[]): ValidatorFn { return Array.isArray(validator) ? composeValidators(validator) : 验证器； }
如果这对其他人有帮助：仅此一项在 Angular 6 中不起作用。我需要在设置验证器后添加 this.testForm.get('age').updateValueAndValidity({onlySelf: true, emitEvent: false});。
如果需要动态分配验证函数（不仅是在表单控件初始化时），使用内置的 Angular Form 方法 setValidators() 是个好主意。