在嵌套的 Angular formGroups 中动态分配 formControlName

Question

我想使用formGroup 和formArray 在angular6 中动态创建input 表单上设置formControlName 和placeholder。

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"
            }
          ]
        }
      ]
}

组件.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(),
          ]),
        });
    }
}

我在 json 中的 transactionVintage 键是 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"