Присвоение formControlName динамически во вложенных Angular formGroups

Question

Я хочу установить formControlName и placeholder для динамически создаваемой формы input в angular6, используя formGroup и formArray.

component.html:

 <form [formGroup]="ecosystemFormG" novalidate>  
        <div  formArrayName="transactions">
            <div  [formGroupName]="i" *ngFor="let transaction of getTransactions(ecosystemFormG); let i = 'index'">
                <div>
                    <!-- Dropdownselect for transactionVintage  Calling methd (transactionVintageMethod)-->
                </div>
                <div formArrayName="transactionVintageValues">
                    <div   [formGroupName]="j" *ngFor="let value of getTransactionVintage(transaction); let j = 'index'">
                        [[ value.placeholder ]] -->not printing anything
                                        [[ value.ctrlname ]]-->not printing
                                        [[ j ]] [[value]]
                                        <mat-form-field color="accent">
                                            <input matInput [placeholder]="value.placeholder" [formControlName]="value.ctrlname">  
                                        </mat-form-field>  <--throwing error  -->

                    </div> 
                </div>
            </div>
        </div>  
</form>


 [[ecosystemFormG.value | json]]

Это создаваемый Json : [[ecosystemFormG.value | json]]

{"transactions": [
        { 
          "transactionVintage": 3, 
          "transactionVintageValues": [
            {
              "ctrlName": "ctrlname_1",
              "placeholder": "plcaholder1"
            },
            {
              "ctrlName": "ctrlname_2",
              "placeholder": "plcaholder2"
            },
            {
              "ctrlName": "ctrlname_3",
              "placeholder": "plcaholder3"
            }
          ]
        }
      ]
}

component.ts

    export class EcosystemComponent implements OnInit {

    ecosystemFormG: FormGroup;

    getTransactions(form) { 
      return form.controls.transactions.controls;
    } 

    getTransactionVintage(form) { 
      return form.controls.transactionVintageValues.controls;
    }

    transactionVintageMethod(_event, _transactionForm, i){ 
        let _ctrls = this.getTransactionVintage(_transactionForm); 
        this.remove(i);
        for(var l=1; l<=_event.value; l++) { 
            this.add(i,l);
        }
    }

    remove(i){
         // remove all input fields 
    }

    add(i,l) { 
      const control = <FormArray>this.ecosystemFormG.get('transactions')['controls'][i].get('transactionVintageValues');
      //some unknown logic to put formConetrolName and placeholder
      control.push(this.initTransactionVintageValues(l));
    }

    initTransactions() {
        return new FormGroup({ 
          transactionVintage: new FormControl(''), 
          transactionVintageValues: new FormArray([])
        });
    }

    initTransactionVintageValues(l) { 
        let ctrlname = "ctrlname_" + l;
        let plcaholder =  "plcaholder" + l

       return new FormGroup({
         ctrlName: new FormControl(ctrlname), 
         placeholder : new FormControl(plcaholder)
       });
    }

    ngOnInit() { 
        this.ecosystemFormG = new FormGroup({ 
          transactions: new FormArray([
            this.initTransactions(),
          ]),
        });
    }
}

Мой transactionVintage ключ в jsonявляется выпадающим селектором в html чисел, которые сообщают количество полей ввода, которые будут созданы.

Здесь я могу создавать динамические поля ввода.

Итак, вопрос в том, как мы можем назначить formControlName и plcaholder для динамически создаваемых полей ввода.

Answer 1

Почему бы просто не использовать обычные привязки?

<div   [formGroupName]="j" *ngFor="let value of getTransactionVintage(transaction); let j = index">
    <mat-form-field color="accent">
        <input matInput [placeholder]="value.placeholder" [formControlName]="value.ctrlname"> 
    </mat-form-field> 
</div> 

Кроме того, почему у вас одинарные кавычки для 'index' внутри *ngFor?Там вам не понадобятся одинарные кавычки.

*ngFor="let item of items; let i = index"

или

*ngFor="let user of users; index as i"