Angular Reactive Forms: 找不到带有路径的控件:

Question

我有组件：cabinet-clinic-form.component.ts 在这里，我在诊所 FormArray 中遇到 FormGroup 验证问题。当我呈现页面时出现错误 prntscr with error 我试图找到如何动态推送 formGroups 但仍然有错误。单击按钮开始 onAddClinic() 事件，我添加了新诊所。

这是我的代码：

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);
      }
    }

和内阁诊所-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>

Answer 1

将 [formGroupName]="clinicIndex + 1" 更改为 [formGroupName]="clinicIndex" 在索引 1 处没有控件

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

Answer 2

[formGroupName]="clinicIndex" 应该在下一个选择器层次结构中，比如下面。

<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>

Angular Reactive Forms: 找不到带有路径的控件:

Angular Reactive Forms: Cannot find control with path:

angular

angular-reactive-forms