如何在以 Angular 4 反应形式进行控件初始化后添加自定义验证？答案

【问题标题】：How to add custom validation after control initialization in angular 4 reactive form?如何在以 Angular 4 反应形式进行控件初始化后添加自定义验证？
【发布时间】：2017-11-28 12:19:54
【问题描述】：

我正在开发 Angular 4 应用程序并使用响应式表单。

在我的一个表单中，我需要在复选框检查初始化后添加自定义验证来控制，并在复选框取消选中时将其删除。

代码

form.component.ts

   form : FormGroup;
    constructor( private formGroup : FormBuilder){}
    ngOnInit() {
       this.form = this.formGroup.group({ 
          name : ["", [Validators.required, this.textValidation]]
       });
    }

    public textValidation(control:FormControl)  
    {    
      if(control.value && (control.value).replace(/\s/g, "").length < 1)    
      {      
         return {'stringCheck': true};    
      }    
      return '';  
    }

    addValidation(isChecked)
    {
       if(isChecked){  this.form.controls['name'].setValidators([Validators.required,this.textValidation]);
       }else{
         this.form.controls['name'].clearValidators();
       } 
        this.form.controls['name'].updateValueAndValidity();
    }

form.component.html

<form [formGroup]="form" (ngSubmit)="submitForm()">
   <input type="checkbox" (change)="addValidation($event.target.checked)">
   <div>
      <label>Name</label>
      <imput type="text formControlName="name">
      <small *ngIf="(form.controls['name'].hasError('required') || form.controls['name'].hasError('stringCheck')>Error</small>
   </div>

</form>

收到此错误。

/home/iron/Desktop/BK-admin/bookingkoala_admin/src/app/Industries/AddFrequency/AddFrequency.component.ts (242,79): 类型参数 '(((control: AbstractControl) => 验证错误）| ((control: FormControl) => "" | { 'stringCheck...' 不能分配给“ValidatorFn |”类型的参数验证器Fn[]'。类型 '(((control: AbstractControl) => ValidationErrors) | ((control: 窗体控件) => "" | { 'stringCheck...' 不可分配给类型 '验证器Fn []'。类型 '((control: AbstractControl) => ValidationErrors) | ((control: FormControl) => "" | { 'stringCheck...' 不可赋值键入“ValidatorFn”。键入'（控件：FormControl）=>“”| {'stringCheck'：布尔值； }' 不可分配给类型 'ValidatorFn'。输入'"" | {'stringCheck'：布尔值； }' 不可分配给类型 'ValidationErrors'。类型 '""' 不可分配给类型 'ValidationErrors'。

如果有人知道如何解决它，请告诉我。

【问题讨论】：

标签： javascript forms angular angular-reactive-forms angular4-forms

【解决方案1】：

基本上就是直接告诉你问题：

  addValidation(isChecked)
    {
       if(isChecked){  this.form.controls['name'].setValidators([Validators.required,this.textValidation]);
       }else{
         this.form.controls['name'].clearValidators();
       } 
        this.form.controls['name'].updateValueAndValidity();
    }

您的方法中的字符串：

 public textValidation(control:FormControl)  
    {    
      if(control.value && (control.value).replace(/\s/g, "").length < 1)    
      {      
         return {'stringCheck': true};    
      }    
      return '';  
    }

不能分配给validationError类型。

表示此行无效：

 if(isChecked){  this.form.controls['name'].setValidators([Validators.required,this.textValidation]);

看看这个Post，了解正在发生的事情以及如何处理验证错误。

【讨论】：