How to add custom validation after control initialization in angular 4 reactive form?

Question

I am working on angular 4 application and using reactive forms.

In one of my forms I need to add custom validation to control after its initialization on checkbox check and remove it on checkbox uncheck.

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>

Getting this error.

/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'.

If any one know how to fix it please tell me.

Barr J Barr J · Accepted Answer · 2017-11-28T12:56:50

It's basically telling you the problem directly:

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

your string from the method:

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

Cannot be assigned to validationError type.

meaning this line is invalid:

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

Take a look at this Post to get a little sense about what is happening and how to work with validation errors.

How to add custom validation after control initialization in angular 4 reactive form?

1 Answers