Form Builder with hasError() for validation throws an error of ERROR TypeError: Cannot read property 'hasError' of undefined

Question

Hi I am implementing a form in angular 2 using Form Builder

in component.ts i have implemented my form using formGroup

Below is My code

public myForm: FormGroup;

constructor(private authenticateservice: AuthenticateService,
              private _fb: FormBuilder
             ) {


}

ngOnInit() {

this.myForm = this._fb.group({
      address: [this.userDetails.address, [<any>Validators.required]],
      address2: ['', [<any>Validators.required]],
      city: ['', [<any>Validators.required]],
      company_address: ['', [<any>Validators.required]],
      company_address2: ['', [<any>Validators.required]],
      company_city: ['', [<any>Validators.required]],
      company_country: ['', [<any>Validators.required]],
      company: ['', [<any>Validators.required , Validators.minLength(3)] ],
      company_tax_number: ['', [<any>Validators.required]],
      company_zip: ['', [<any>Validators.required,  Validators.minLength(5) , Validators.maxLength(7)]],
      country: ['', [<any>Validators.required]],
      email: ['', [<any>Validators.required, Validators.email]],
      first_name: [this.userDetails.first_name, [<any>Validators.required]],
      id: ['', [<any>Validators.required]],
      last_name: ['', [<any>Validators.required]],
      phone: ['', [<any>Validators.required, Validators.minLength(10)]],
      zip: ['', [<any>Validators.required , Validators.minLength(5) , Validators.maxLength(7)]],
      user_type: ['2', [<any>Validators.required]],
      terms: [0, [<any>Validators.required]],
      hash_tag: [''],

    });

}

It is working fine. But when coming to display validations in frontEnd

I used like this

  <div class="form-group row">
    <div class="col-lg-8">
      <label>Address 2</label>
      <textarea class="form-control" placeholder="Address" rows="2" [readonly]="disabled" id="companyaddress2" formControlName="company_address2"></textarea>
      <span class="help-block form-error text-danger small" *ngIf="myForm.controls['company_address2'].hasError('required')">Company Address 2 is Required.</span>
    </div>
  </div>

it is working but throwing the error in console like Below

ERROR TypeError: Cannot read property 'hasError' of undefined

Please Help me how to sort this.

Thank You.

Answer 1

You should use it like this:

<span class="help-block form-error text-danger small" 
  *ngIf="myForm.controls['company_address2'].errors?.required &&
  myForm.controls['company_address2'].touched">Company Address 2 is Required </span>

Answer 2

If you're working with reactive forms you should probably use TypeScript getter's to solve this, it's a lot cleaner:

In a reactive form, you can always access any form control through the get method on its parent group, but sometimes it's useful to define getters as shorthands for the template.

A getter will allow you to access a form field directly, avoiding the redundant use of myForm.controls['fieldNameGoesHere']. with ngIf in the examples above.

As an example, For company_address2 add the following after your ngOnInit() method:

get company_address2() { return this.myForm.get( 'company_address2' ); }

This will give your component HTML direct access to the company_address2 , give this a try instead:

<textarea class="form-control" placeholder="Address" rows="2" [readonly]="disabled" id="companyaddress2" 
    formControlName="company_address2">
</textarea>

<span class="help-block form-error text-danger small"
    *ngIf="company_address2.hasError('required')">
    Company Address 2 is Required.
</span>

You'll have the define each getter method individually though, TypeScript doesn't allow variables to be provided to getter's so you'll end up having one get method for each control in your form.

More info can be found in the Angular docs under Form Validation: Built-in Validators.