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.

score 18 · Accepted Answer · edited Dec 12 '17 at 19:40

18

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>

edited Dec 12 '17 at 19:40

isherwood

46,000
15
100
132

answered Jul 26 '17 at 13:39

monica

1,446
12
25

The optional value is what helped me. My approach was a little different, I use control?.hasError("someError"). Thank you! – kbpontius Sep 28 '17 at 18:17

score 4 · Answer 2 · answered Jan 07 '19 at 21:49

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.

score 0 · Answer 3 · answered May 07 '18 at 09:29

I faced this problem in angular 5 try the below one you will get output

<mat-error>
<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>
</mat-error>

score 0 · Answer 4 · answered Sep 25 '18 at 08:03

0

I solved this 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>

answered Sep 25 '18 at 08:03

Jobaer Khan

66
6

score 0 · Answer 5 · answered Nov 29 '19 at 19:24

0

For required error messages this one line should work

 <mat-error>Title is required</mat-error>

answered Nov 29 '19 at 19:24

MJ X

6,186
8
45
77

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

5 Answers5

Linked