在动态表单结构中找不到表单控件

Question

经过几个小时的研究，我无法解决我在控制台上的错误:

Error: Cannot find control with path: 'profileForm -> forms -> typeDePret' ERROR Error: Cannot find control with path: 'profileForm -> forms -> amountDuLoan'

然而，在我看来，我已经正确地组织了我的代码。我也无法读取在表单控件中输入的元素。我附上我的打字代码:

constructor(private db:AngularFireDatabase, private fb: FormBuilder ) { 
this.Formuser = fb.group({


profileForm: fb.group({
forms: this.fb.array([
this.fb.group({
typeDePret: ['' ],
montantDuPret: [''],
tauxDuPret: [''],
dureeDuPret: [''],
dureeDuPretMois: [''],
dontDiffere: ['']
})
])
}),
form: fb.group({
firstName: '',
lastName: '',
dateDeNaissance: '',
ville: '',
tel: '',
mail: '',
})
});
}
ngOnInit(): void {
this.profileForm = this.fb.group({
forms: this.fb.array([this.createForm()])
});


}
createForm(): FormGroup {
return this.fb.group({
typeDePret: new FormControl(''),
montantDuPret: new FormControl(''),
tauxDuPret: new FormControl(''),
dureeDuPret: new FormControl(''),
dureeDuPretMois: new FormControl(''),
dontDiffere: new FormControl('')
});
}
get forms(): FormArray {
return this.profileForm.get('forms') as FormArray;
}

这是我的html:

<ng-template #effacer4>
<div *ngIf="Next3; else effacer5" [@slideInOut]>
<div formGroupName="profileForm" (ngSubmit)="submitForm()">
<div formArrayName="forms">
<div *ngFor="let formControl of formControls; let i = index" [formControlName]="i" class="form">
<p class='pretn'>Pret n° {{i+1}}</p>
<label class="titredu">Type de prêt:</label><br>
<select type="select" formControlName="typeDePret" class='form-select'>
<option value="Prêt classique (amortissable)" class="select">Prêt classique (amortissable)</option>
<option value="In fine" class="select">In fine</option>
<option value="Prêt à taux Zéro" class="select">Prêt à taux Zéro</option>
<option value="Prêt relais" class="select">Prêt relais</option>
</select>
<div class="group">
<input type="text" formControlName="montantDuPret" id="montantDuPret" class="linput" required>
<label for="montantDuPret" class="lelabel">Montant du prêt</label>
<div class="bar"></div>
</div>

Answer 1

你在表单数组中迭代表单组，所以你需要引用formgroup，而不是formcontrol。

因此，您需要将[formControlName]="i"替换为[formGroupName]="i":

<div formArrayName="forms">
<div *ngFor="let formControl of formControls; let i = index"  [formGroupName]="i" class="form">
<p class='pretn'>Pret n° {{i+1}}</p>