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

Question

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

in the .ts component i embedded 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 they come to display validations in frontEnd

I used this as

  <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 works, but throws an error in the console as shown below

ERROR TypeError: Cannot read property 'hasError' from undefined

Please help me in sorting.

Thanks.

Answer 1

You should use it as follows:

 <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

I ran into this problem in angular 5 try below, 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> 

Answer 3

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

If you are working with reactive forms, you should probably use a TypeScript getter to solve this problem, it is much cleaner:

In reactive form, you can always access any form control through the get method in its parent group, but it is sometimes useful to define recipients as abbreviations for the template.

The recipient will allow you to directly access the form field, avoiding the excessive use of myForm.controls['fieldNameGoesHere']. using ngIf in the above examples.

For example, for company_address2 add the following after your ngOnInit() :

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

This will give your HTML component direct access to company_address2 , 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 will define each get method individually, although TypeScript does not allow variables to receive variables, so you will have one get method for each control in your form.

For more information, see the Angular docs in the section “ Form validation: built-in validators” .