title: How to add custom validation after control initialization in angular 4 reactive form?
body: <p>I am working on angular 4 application and using reactive forms.</p>
  
  <p>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.</p>
  
  <p>CODE</p>
  
  <p>form.component.ts</p>
  
  <pre><code>   form : FormGroup;
      constructor( private formGroup : FormBuilder){}
      ngOnInit() {
         this.form = this.formGroup.group({ 
            name : ["", [Validators.required, this.textValidation]]
         });
      }
  
      public textValidation(control:FormControl)  
      {    
        if(control.value &amp;&amp; (control.value).replace(/\s/g, "").length &lt; 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();
      }
  </code></pre>
  
  <p>form.component.html</p>
  
  <pre><code>&lt;form [formGroup]="form" (ngSubmit)="submitForm()"&gt;
     &lt;input type="checkbox" (change)="addValidation($event.target.checked)"&gt;
     &lt;div&gt;
        &lt;label&gt;Name&lt;/label&gt;
        &lt;imput type="text formControlName="name"&gt;
        &lt;small *ngIf="(form.controls['name'].hasError('required') || form.controls['name'].hasError('stringCheck')&gt;Error&lt;/small&gt;
     &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Getting this error.</p>
  
  <blockquote>
    <p>/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'.</p>
  </blockquote>
  
  <p>If any one know how to fix it please tell me.</p>