Angular Reactive Forms: Cannot find control with path:

Question

I have component: cabinet-clinic-form.component.ts And here I have problem with FormGroup validation in clinics FormArray. When I render page I get error prntscr with error I tried to find how to dynamically push formGroups but still have error. On button click begins onAddClinic() event and I add new clinic.

Here is my code:

export class CabinetClinicFormComponent implements OnInit {
      doctorForm: FormGroup;
      ngOnInit() {
        this.doctorForm = new FormGroup({
          'clinics': new FormArray([]),
        });
      }
      onAddClinic() {
        const newClinic = new FormGroup({
            'city' : new FormControl(null),
            'clinicname' : new FormControl(null),
        });
        (<FormArray>this.doctorForm.get('clinics')).push(newClinic);
      }
      onSubmit() {
        console.log(this.doctorForm);
      }
    }

and cabinet-clinic-form.component.html

<div
      class="clinic-group"
      formArrayName="clinics"
    >
      <div
        *ngFor="let clinicControl of doctorForm.get('clinics').controls; let clinicIndex = index;"
        [formGroupName]="clinicIndex"
      >
        <div class="clinic-group__title">Клиника #{{clinicIndex + 1}}</div>
        <div class="form-group">
          <label
            [attr.for]="'city' + clinicIndex + 1"
            class="control--label"
          >
            <span class="control--label-text">Город</span>
          </label>
          <input
            type="text"
            [attr.id]="'city' + clinicIndex + 1"
            [formControlName]="city"
            class="form-control"
          >
        </div>
        <div class="form-group">
          <label
            [attr.for]="'clinicname' + (clinicIndex + 1)"
            class="control--label"
          >
            <span class="control--label-text">Название клиники</span>
          </label>
          <input
            type="text"
            [attr.id]="'clinicname' + (clinicIndex + 1)"
            [formControlName]="clinicname"
            class="form-control"
          >
        </div>
      </div>
    </div>

    <button type="button" (click)="onAddClinic()">Добавить клинику</button>

Finally I found my mistake. 8 hours searching and the problem was [formControlName]="clinicname" but need to use formControlName="clinicname". That's it. — sanchahous
– sanchahous, Commented Feb 5, 2018 at 15:51

Arun Kumaresh · Accepted Answer · 2018-02-05 15:38:54Z

3

change the [formGroupName]="clinicIndex + 1" to [formGroupName]="clinicIndex" there is no control at index 1

  <div
        *ngFor="let clinicControl of doctorForm.get('clinics').controls; let clinicIndex = index;"
        [formGroupName]="clinicIndex"
      >

answered Feb 5, 2018 at 15:38

Arun Kumaresh

6,2966 gold badges36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sanchahous Over a year ago

I changed to [formGroupName]="clinicIndex" but still have error: joxi.ru/l2ZKM0BT8qvPVA

sanchahous Over a year ago

I found mistake but your answer is also help. It was another one mistake. Thx you.

Munkhdelger Tumenbayar · Accepted Answer · 2018-12-27 11:41:03Z

0

[formGroupName]="clinicIndex" should be in next selector hierarchy wise, like below.

<div *ngFor="let clinicControl of doctorForm.get('clinics').controls; let clinicIndex = index;">
    <div [formGroupName]="clinicIndex">
    <div class="clinic-group__title">Клиника #{{clinicIndex + 1}}</div>
...
</div>
<div>

edited Dec 27, 2018 at 11:41

Munkhdelger Tumenbayar

1,90421 silver badges31 bronze badges

answered Dec 27, 2018 at 9:08

Manoharan Angamuthu

1

Collectives™ on Stack Overflow

Angular Reactive Forms: Cannot find control with path:

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related