title: Angular 4 reactive forms custom validator form error c: undefined
body: <p>I have a custom validator to evaluate 2 controller values; totalDisch should be more than damaNumb</p>
  
  <p><strong>Component file:</strong></p>
  
  <pre><code>   form = new FormGroup({
      hospital: new FormControl({ value: '', disabled: true }, Validators.required),
      department: new FormControl('', Validators.required),
      damaDt: new FormControl('', Validators.required),
      damaNumb: new FormControl('', Validators.required),
      totalDisch: new FormControl('', Validators.required),
      notes: new FormControl('', Validators.maxLength(125))
  }, invalidDama);
  </code></pre>
  
  <p><strong>The custom validator within the same file</strong> </p>
  
  <pre><code>export function invalidDama(c: AbstractControl) {
    //safety check
  
    if (!c.get('damaNumb').value || !c.get('totalDisch').value) {
      return {c: c.get('totalDisch').setErrors(null)};
    }
  
    if (c.get('damaNumb').value &lt; c.get('totalDisch').value) {
      return {c: c.get('totalDisch').setErrors(null)};
    }
    return {c: c.get('totalDisch').setErrors({invalidDama: true})};
  }
  </code></pre>
  
  <p><strong>The html template</strong></p>
  
  <pre><code>        &lt;div class="form-group"&gt;
              &lt;label for="damaNumb"&gt;DAMA Number:&lt;/label&gt;
              &lt;input type="number" formControlName="damaNumb" id="damaNumb" class="form-control" placeholder="Enter DAMA Number (1-100)" [(ngModel)]="damaNumb" [min]="1" [max]="100" /&gt;
              &lt;div *ngIf="form.get('damaNumb').touched &amp;&amp; form.get('damaNumb').invalid" class="alert alert-danger"&gt;
                  &lt;div *ngIf="form.get('damaNumb').errors.required"&gt;DAMA Number is required....&lt;/div&gt;
                  &lt;div *ngIf="form.get('damaNumb').errors.min"&gt;Minimum "1"....&lt;/div&gt;
                  &lt;div *ngIf="form.get('damaNumb').errors.max"&gt;Maximum "100"....&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label for="totalDisch"&gt;Total Discharges:&lt;/label&gt;
              &lt;input type="number" formControlName="totalDisch" id="totalDisch" class="form-control" placeholder="Enter Total Discharges (1-100)" [(ngModel)]="totalDisch" [min]="1" [max]="100" /&gt;
              &lt;div *ngIf="form.get('totalDisch').touched &amp;&amp; form.get('totalDisch').invalid" class="alert alert-danger"&gt;
                  &lt;div *ngIf="form.get('totalDisch').errors.required"&gt;Total Discharges is required....&lt;/div&gt;
                  &lt;div *ngIf="form.get('totalDisch').errors.min"&gt;Minimum "1"....&lt;/div&gt;
                  &lt;div *ngIf="form.get('totalDisch').errors.max"&gt;Maximum "100"....&lt;/div&gt;
                  &lt;div *ngIf="form.get('totalDisch').errors.invalidDama"&gt;Discharges can not be less than DAMA....&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The validator works as expected but 
  The page submits but in the console form is always invalid and errors</p>
  
  <p><strong>Console error</strong></p>
  
  <blockquote>
    <p>_errors : c : undefined</p>
  </blockquote>
  
  <p>Any help?
  Thank you in advance............</p>