Question

我正在进行角度4应用并使用反应形式。

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

CODE

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）=＆gt; 验证错误）| （（control：FormControl）=＆gt;“”| {'stringChec ...' 不能分配给'ValidatorFn |类型的参数ValidatorFn []”。输入'（（（control：AbstractControl）=＆gt; ValidationErrors）|（（控制： FormControl）=＆gt; “”| {'stringChec ...'不能分配给类型 'ValidatorFn []'。输入'（（control：AbstractControl）=＆gt; ValidationErrors）| （（control：FormControl）=＆gt;“”| {'stringCheck ...'不可分配输入'ValidatorFn'。输入'（control：FormControl）=＆gt; “”| {'stringCheck'：布尔值; }'不能赋值为'ValidatorFn'。输入“”“| {'stringCheck'：布尔值; }'不能赋值为'ValidationErrors'。类型'“”'不能指定为'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，了解正在发生的事情以及如何处理验证错误。

如何在角度4反应形式的控件初始化后添加自定义验证？

1 个答案: