我有组件:cabinet-clinic-form.component.ts这里我在诊所FormArray中有FormGroup验证的问题 . 当我渲染页面时,我得到错误prntscr with error我试图找到如何动态推送formGroups但仍然有错误 . 在按钮上单击开始在AddClinic()事件上,我添加新的诊所 .
这是我的代码:
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);
}
}
和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>
1 回答
将
[formGroupName]="clinicIndex + 1"
更改为[formGroupName]="clinicIndex"
在索引1处没有控制权