fetis / 30-seconds-of-angular

Curated collection of Angular snippets that you can understand in 30 seconds or less
https://30.codelab.fun
Creative Commons Zero v1.0 Universal
34 stars 2 forks source link

Property 'controls' does not exist on type 'AbstractControl'. #305

Open jayakumarim opened 3 years ago

jayakumarim commented 3 years ago

Hi, I created a reactive from with nested FormBuilder, While validate the form i got error like *Property 'controls' does not exist on type 'AbstractControl'. at line editPersonalInfoForm.controls.child.controls.id.hasError('required')".

This is my typescript code ` editPersonalInfoForm: FormGroup;

constructor(private formBuilder: FormBuilder) { this.editPersonalInfoForm = this.formBuilder.group({ id: ['', [Validators.required]], name: ['', [Validators.minLength(5), Validators.required]], child: this.formBuilder.group({ id: [ '', [Validators.required]], name: [''] }) }); } `

This my html ` <form [formGroup]="editPersonalInfoForm" >

<input type="text" name="name" formControlName="name">
<small class="error-text"
       *ngIf="editPersonalInfoForm.controls.name.hasError('maxlength')">
  Address Line 1 can't exceed 100 characters. <br>
</small>
<div formGroupName="child">
  <input type="text" name="id" formControlName="id">
  <small class="error-text"`

       `  *ngIf="editPersonalInfoForm.controls.child.controls.id.hasError('required')">
    Address Line 1 can't exceed 100 characters. <br>
  </small>
  <input type="text" name="name" formControlName="name">
</div>
<button class="btn btn-primary">send</button>

`

Please some one help me