title: Custom validator in Angular 5 dynamic forms
body: <p>I am creating a dynamic form from a configurable json in Angular 5. Everything is working fine,but i am not able to add a custom validator for a particular field.I am getting an error like </p>
  
  <pre><code>TypeError: v is not a function
  </code></pre>
  
  <p><strong><em>Json</em></strong></p>
  
  <pre><code>{
        "key": "age",
        "label": "Age",
        "required": false,
        "order": 4,
        "controlType": "textbox",
        "validations": ['required', 'minlength'],
        "custom":['rangeValidator'],//custom validator function name
        "type": "email"
      }
  </code></pre>
  
  <p><strong><em>Component to make dynamic form controls:</em></strong></p>
  
  <pre><code>toFormGroup(questions) {
      let group: any = {};
      questions.forEach(question =&gt; {
        group[question.key] = new FormControl(question.value || '', this.getValidators(question)
        );
      });
      return new FormGroup(group);
    }
  
    getValidators(question) {
      let vals = [];
      question.validations.forEach((v) =&gt; {
        if (v == 'required') {
          vals.push(Validators.required);
        }
        if (v == 'minlength') {
          vals.push(Validators.minLength(4))
        }
      });
      if (question.custom || question.custom.length &gt; 0) {
        question.custom.forEach((va) =&gt; {
          vals.push(va);
        });
      }
  
  return vals;
  </code></pre>
  
  <p>}</p>
  
  <p><strong><em>Main Component file:</em></strong></p>
  
  <pre><code>    import { Component, OnInit, Input } from '@angular/core';
     import { FormGroup, AbstractControl ,FormControl} from '@angular/forms';
  function rangeValidator(c: FormControl) {
      if (c.value !== undefined &amp;&amp; (isNaN(c.value) || c.value &gt; 1 || c.value &lt; 10)) {
        return { range: true };
      }
      return null;
    }
  @Component({
    selector: 'app-question',
    templateUrl: './dynamic-form-question.component.html',
    styleUrls: ['./dynamic-form-question.component.css']
  })
  export class DynamicFormQuestionComponent implements OnInit {
    @Input() question;
    @Input() form: FormGroup;
    get isValid() { return this.form.controls[this.question.key].valid; }
  
    constructor() { }
  
    ngOnInit() {
      console.log("My form", this.form.value)
  
    }
  
  
  }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-gcwmn4" rel="nofollow noreferrer">Stackblitz Url</a></p>
  
  <p>Any ideas,Please help</p>