title: How to Sync formControlName in ngFor inside ngFor (nested formArray)?
body: <p>How to Syncs formControlName in ngFor inside ngFor (nested formArray)?
  I am trying to create a dynamic form, facing issue while getting updated form array. but I am not able to access value in formControlName, tried below code but it did not work.</p>
  
  <p>could someone please help me where I am doing wrong in the below code</p>
  
  <p><strong>HTML Code:</strong> </p>
  
  <pre><code>&lt;form [formGroup]="ratioFormSrray"  (ngSubmit)="saveRecord(ratioFormSrray.value)"&gt;
  &lt;div class="container" *ngFor="let col of ratios; let i = index;" [formGroupName]="i" &gt;
  &lt;div&gt;&lt;h3&gt;{{col.name}}&lt;/h3&gt;&lt;/div&gt;
  &lt;div  *ngFor="let data of col.formulas" class="row" formGroupName="formulas"&gt;
  &lt;div class="col-lg-2"&gt;
      &lt;input type="checkbox" name="data.name" value="data.checked" formControlName="checked"&gt;
  &lt;/div&gt;
  
  &lt;div class="col-lg-4"&gt;
          &lt;p&gt;{{data.name}}&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="col-lg-2" formGroupName="operators"&gt;
      &lt;select formControlName="display"&gt;
          &lt;option *ngFor="let operator of data.operators;let j = index;" [formGroupName]="j" value="operator.value" &gt;{{operator.display}}&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class="col-lg-4"&gt;
  &lt;input type="text" formControlName="benchMarkValue" name="{{data.benchMarkValue}}" value="{{data.benchMarkValue}}" &gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;button class="btn btn-primary"&gt;
      save
  &lt;/button&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p><strong>TS code:</strong></p>
  
  <pre><code>     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": "&gt;",
                              "value": "&gt;",
                              "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)
    }
  }
  </code></pre>