CODEWITHSUNDEEP
angularvalidationangular-reactive-formsangular-validation
Ankit Raonka
Ankit Raonka

Reputation: 6857

How to identify which custom validation function is causing error in Reactive Forms

I have number of validators assigned to a formControl with formControlName as firstName. How to know which validation is giving error so that I can give appropriate message

Following is my custom made validation function for required

export function required() {
  return function(control:FormControl)
  {
    var value: string = control.value;
    value = value.trim();
    if(value.length == 0)
      return {required:true};    
    return null;
  } 
 }

and using is like this

<md-error [hidden]="!firstName.errors.required || (!firstName.touched && !submitted)">
   Name is required
</md-error>

I get the following error

ERROR TypeError: Cannot read property 'required' of null

Upvotes: 1

Views: 1079

Answers (4)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658007

You can add additional information to the error object returned by the validator:

export function required(String info) {
  return function(control:FormControl)
  {
    var value: string = control.value;
    value = value.trim();
    if(value.length == 0)
      return {required:true, info: info};    
    return null;
  } 
 }

his.userForm = this.fb.group({
  name:[[],[<any>required('firstName')]],
})

<md-error [hidden]="!firstName.errors.required || (!firstName.touched && !submitted)">
   <div *ngFor="let err of firstName.errors">
     {{error?.info}}
   </div>
</md-error>

Upvotes: 0

Ankit Raonka
Ankit Raonka

Reputation: 6857

<md-error *ngIf="firstName.hasError('required') && (firstName.touched || submitted)">
   Please enter the required field
</md-error>

this worked for me.

firstName.errors.required doesnt work

thank you for all the help.

if there are multiple validation fails and multiple messages then u can show only the first error message by adding in css

md-error:not(:first-of-type) { display: none; }

Upvotes: 0

0mpurdy
0mpurdy

Reputation: 3353

It is possible that your errors may be null so you should use an elvis or safe navigation operator: ?. like this:

<md-error [hidden]="!firstName.errors?.required || (!firstName.touched && !submitted)">
   Name is required
</md-error>

You mentioned in the comments:

i dont want to use libraby validators , i want to use custom validators, required is just an example

If you are not going to use the Reactive Forms approach mentioned in Jverma's answer you will need to create a Directive as described in this blog post (Relevant code pasted below)

import { AbstractControl, ValidatorFn } from '@angular/forms';

// validation function
function validateJuriNameFactory() : ValidatorFn {
  return (c: AbstractControl) => {

    let isValid = c.value === 'Juri';

    if(isValid) {
        return null;
    } else {
        return {
            juriName: {
                valid: false
            }
        };
  }
}

@Directive({
  selector: '[juriName][ngModel]'
})
export class JuriNameValidator implements Validator {
  validator: ValidatorFn;

  constructor() {
    this.validator = validateJuriNameFactory();
  }

  validate(c: FormControl) {
    return this.validator(c);
  }
}

Upvotes: 0

jesusverma
jesusverma

Reputation: 1745

If you are using Template Driven Form Approach mentioned required inside your input tag.

  <input type="text" class="form-control" #nameRef="ngModel" ngModel required name="name" placeholder="Enter Name">

Or In case of Reactive Form approach 

this.userForm = this.fb.group({
      name:[[],[<any>Validators.required]],
   })

Upvotes: 1

Related Questions