Как синхронизировать formControlName в ngFor внутри ngFor (вложенный formArray)? - PullRequest
0 голосов
/ 28 мая 2018

Как синхронизировать formControlName в ngFor внутри ngFor (вложенный formArray)?Я пытаюсь создать динамическую форму, столкнувшись с проблемой при получении обновленного массива форм.но я не могу получить доступ к значению в formControlName, пробовал приведенный ниже код, но он не работал.

Может кто-нибудь, пожалуйста, помогите мне, где я делаю неправильно в приведенном ниже коде

HTMLКод:

<form [formGroup]="ratioFormSrray"  (ngSubmit)="saveRecord(ratioFormSrray.value)">
<div class="container" *ngFor="let col of ratios; let i = index;" [formGroupName]="i" >
<div><h3>{{col.name}}</h3></div>
<div  *ngFor="let data of col.formulas" class="row" formGroupName="formulas">
<div class="col-lg-2">
    <input type="checkbox" name="data.name" value="data.checked" formControlName="checked">
</div>

<div class="col-lg-4">
        <p>{{data.name}}</p>
</div>

<div class="col-lg-2" formGroupName="operators">
    <select formControlName="display">
        <option *ngFor="let operator of data.operators;let j = index;" [formGroupName]="j" value="operator.value" >{{operator.display}}</option>
    </select>
</div>

<div class="col-lg-4">
<input type="text" formControlName="benchMarkValue" name="{{data.benchMarkValue}}" value="{{data.benchMarkValue}}" >
</div>
</div>
</div>
<button class="btn btn-primary">
    save
</button>
</form> 

Код TS:

     export class ratiosComponent implements OnInit {
       ratioFormSrray: FormGroup;
      formulas:string;
      operators:string;
      ratios= [
        {
            "name": "Leverage Ratios",
            "id": 3,
            "formulas": [
                {
                    "name": "Debt to Equity",
                    "active": true,
                    "expression": "Total Debt / Total Equity",
                    "checked": false,
                    "operators": [
                        {
                            "display": "=",
                            "value": "=",
                            "active": true,
                            "selected": false
                        },
                        {
                            "display": ">",
                            "value": ">",
                            "active": true,
                            "selected": false
                        }
                    ],
                    "benchMarkValue": 0
                },
                {
                    "name": "Debt to Assets",
                    "active": true,
                    "expression": "Total Debt / Total Assets",
                    "checked": false,
                    "operators": [
                        {
                            "display": "=",
                            "value": "=",
                            "active": true,
                            "selected": false
                        }
                    ],
                    "benchMarkValue": 0
                },
            ],
            "checked": false
        }
    ];
    constructor( private formBuilder: FormBuilder) { }
    ngOnInit(){
    this.ratioFormSrray = this.formBuilder.group({
          formulas: this.formBuilder.array([
                 this.formBuilder.group({
                   name:new formControl(),
                     active:new formControl(),
                       expression:new formControl(),
                         checked:new formControl(),
                        operators: this.formBuilder.array([
                            this.formBuilder.group({
                                  display: new FormControl(),
                                  value: new FormControl(),
                                  active: new FormControl(),
                                  selected: new FormControl()
                            })
                        ]),
                        benchMarkValue:new formControl()
                    }),
                    checked:new formControl(),
                ])
             });
             }

saveRecord(model: any){
  console.log("model",model)
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...