javascript - 如何在 Angular 4 react 形式的控件初始化后添加自定义验证？

Question

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

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

代码

form.组件.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): Argument of type '(((control: AbstractControl) => ValidationErrors) | ((control: FormControl) => "" | { 'stringChec...' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[]'. Type '(((control: AbstractControl) => ValidationErrors) | ((control: FormControl) => "" | { 'stringChec...' is not assignable to type 'ValidatorFn[]'. Type '((control: AbstractControl) => ValidationErrors) | ((control: FormControl) => "" | { 'stringCheck...' is not assignable to type 'ValidatorFn'. Type '(control: FormControl) => "" | { 'stringCheck': boolean; }' is not assignable to type 'ValidatorFn'. Type '"" | { 'stringCheck': boolean; }' is not assignable to type 'ValidationErrors'. Type '""' is not assignable to type 'ValidationErrors'.

如果有人知道如何修复它，请告诉我。

Answer 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了解正在发生的事情以及如何处理验证错误。