title: How to Add a Validator dynamically to a FormControl in Angular 2
body: <p>I am using ReactiveFormsModule and have defined all my form controls including simple validators such as <code>Validators.required</code> within a const configuration.</p>
  
  <p>I wanted to add a custom validator to one of those FormControls.</p>
  
  <p>I have currently added the custom validator as a function within this configuration, and it is working fine, but it does not belong here, it really needs to live within my component, but I'm not sure how I can just attach a custom validator manually after the <code>FormBuilder</code> has configured all my controls.</p>
  
  <p><strong>See Code Comment below that looks like this</strong></p>
  
  <blockquote>
    <p>How do I Attach Here</p>
    
    <p><strong>* ??? *</strong></p>
    
    <p>this.form.get('site_id').add custom valiator </p>
  </blockquote>
  
  <p><strong>This is my current configuration code.</strong></p>
  
  <pre><code>import {FormControl, Validators, FormBuilder} from '@angular/forms';
  
  var fb = new FormBuilder();
  
  function exampleValidator(control: FormControl): { [s: string]: boolean} {
      if (control.value === 'Example'){
          return { example: true };
      }
  
      return null;
  }
  
  export const formConfig = fb.group({
    'extract_batch_id': ['bbbbbbbbbbbbb',
      [
         Validators.required
      ]], 
    'site_id': ['blah',
      [
         Validators.required,
          exampleValidator
      ]]
  });
  </code></pre>
  
  <p>I have a directive that really should be storing the custom validator</p>
  
  <p><strong>Job Search Component</strong></p>
  
  <pre><code>import {Component, Input, OnInit, OnDestroy} from '@angular/core';
  import {FormGroup, FormControl} from '@angular/forms';
  import {ActivatedRoute} from '@angular/router';
  import {Subscription} from 'rxjs';
  
  import {Job} from '../../../models/job';
  import {JobService} from '../../../services/api/job.service';
  import {DebugService} from '../../../common/debug/debug.service';
  import {formConfig} from './edit.form-config';
  
  @Component({
      selector: 'wk-job-search-edit',
      template: require('./edit.html')
  })
  export class JobSearchEditComponent {
      form: FormGroup;
  
      job: Job;
  
      @Input() jobId: number;
      private subscription: Subscription;
  
      constructor(
          private route: ActivatedRoute,
          private jobService: JobService,
          private debug: DebugService){
  
          // Configure form FormGroup via exported formConfig
          this.form = formConfig;
  
          // How do I Attach Here
          // *** ??? ***
          // this.form.get('site_id').add custom valiator 
      }
  
      /*
      exampleValidator(control: FormControl): { [s: string]: boolean} {
          if (control.value === 'Example'){
              return { example: true };
          }
  
          return null;
      }
      */
  }
  </code></pre>
  
  <p><strong>JobSearch Edit.html</strong></p>
  
  <pre><code>&lt;form [formGroup]="form" (ngSubmit)="onSubmit()"&gt;
  
      &lt;button type="submit" class="btn btn-success" [disabled]="!form.valid"&gt;Save&lt;/button&gt;
      &lt;div class="form-group" [ngClass]="{'has-danger':!form.get('extract_batch_id').valid}"&gt;
          &lt;label for="extract_batch_id" class="form-control-label"&gt;Extract Batch&lt;/label&gt;
          &lt;input id="extract_batch_id" formControlName="extract_batch_id" type="text" placeholder="Extract Batch" class="form-control input-sm"&gt;
          &lt;div *ngIf="!form.get('extract_batch_id').valid"&gt;
              &lt;div class="form-control-feedback"&gt;Extract Batch is required?&lt;/div&gt;
              &lt;small class="form-text text-muted"&gt;Please enter a Extract Batch, eg. xyz.&lt;/small&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group" [ngClass]="{'has-danger':!form.get('site_id').valid}"&gt;
          &lt;label for="site_id" class="form-control-label"&gt;Site&lt;/label&gt;
          &lt;input id="site_id" formControlName="site_id" type="text" placeholder="Site" class="form-control input-sm"&gt;
          &lt;div *ngIf="!form.get('site_id').valid"&gt;
              &lt;div class="form-control-feedback"&gt;Site is required?&lt;/div&gt;
              &lt;small class="form-text text-muted"&gt;Please enter a Site, eg. xyz.&lt;/small&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/form&gt;
  </code></pre>