Блог

Я создаю динамическую реактивную форму с помощью Angular 10, она имеет вложенную структуру, когда я пытаюсь привязать форму к шаблону, у меня возникают следующие ошибки

     **The main form has below structure 
                             main form --> formArray--> formGroup --> controls/FormGroup
    How do I bind this nested structure in HTML form?**

    >its a dynamic form

    ```buildForms() {
                const incomeList: FormArray = this.fb.array([]);
                this.declaredFinancialInfo.Income.forEach((item: Income2, index: number) => {
                    incomeList.push(this.createIncomeForm(item, 
                this.verifiedFinancialInfo.Income[index]));
                });
        
                this.applicantForm = this.fb.group({
                  
                    DeclaredAnnualIncome: new 
                    FormControl(this.verifiedFinancialInfo?.DeclaredAnnualIncome || null, []),
                    IncomeList: incomeList,
        
                });
        
        
 createIncomeForm(declared: Income2, verified: Income2): FormGroup {
                const incomeForm = this.fb.group({});
                const verifiedIncomeForm = this.fb.group({});
                for (let key in verified) {
                    if (key === 'Source') {
                        verifiedIncomeForm.addControl(key, new FormControl(verified[key] || '', 
                  [Validators.required]));
                    } else if (key === 'OfficialMnthIncome') {
                        verifiedIncomeForm.addControl(key, new FormControl(verified[key] || null, 
                    [Validators.required]));
                    } else if (key === 'GreyMnthIncome') {
                        verifiedIncomeForm.addControl(key, new FormControl(verified[key] || null, 
                     []));
                    } else if (key === 'MaternityEndDate') {
                        verifiedIncomeForm.addControl(key, new FormControl(verified[key] || new 
                     Date(), []));
                    } else if (key === 'BusinessIncome') {
                
                    } else {
                        verifiedIncomeForm.addControl(key, new FormControl(verified[key]));
                    }
                }
        
                incomeForm.addControl('verified', verifiedIncomeForm);
        
                return incomeForm;
        
            }

```    
    <form [formGroup]="applicantForm">
     <div *ngFor="let alias of incomeLIstArray.controls; let i=index">
                        <div formArrayName="IncomeList">
                     
                      <div class="form-group" *ngFor="let _verified of alias?.controls?.verified?.controls | keyvalue; let i = index;">
                        <div formGroupName="verified"> 
                        {{ _verified.key }}
                        <select class="form-control"
                                    [ngClass]="{'submitted': isSubmit}" formControlName="{{_verified.key}}" name="{{_verified.key}}">
                                    <option value="">-{{'lbl_SelectOption' | translate}}</option>
                                    <option *ngFor="let item of dropdowns?.CB_IncomeSource?.Item;"
                                        [value]="item.Value">{{item.Description}}</option>
                                </select>
                      </div>
                    </div>
                    </div>
                  </div>
    </form>```
 

Приведенный выше код выдает следующую ошибку
core.js:ОШИБКА 4442 Ошибка: Не удается найти элемент управления с помощью пути: «Список доходов -> проверено»
core.js:ОШИБКА 4442 Ошибка: Не удается найти элемент управления с помощью пути: «Список доходов ->> проверено ->>> Валюта»