nested forms and .control vs .value - help needed

Question

I thought I was having a mat-select issue within my nested forms but it turns out I'm having an issue with .value .control on my forms and not sure how to fix it

so basically I have values for items stored in array and i want to show them on the page

Item: item1 Amount: $1.45 Reason: 1

Item: item2 Amount: $1.50 Reason: 2

when clicking on the edit button I do a hide/show of the input fields to edit instead just view.

the problem I'm having has to do with the for loop

*ngFor="let type of widgetForm.get('types').value;

the values show just fine but if I hit my edit button the browser hangs and eventually my input fields show up but I cannot edit the values within their respected fields

If I change my for loop to this

*ngFor="let type of widgetForm.get('types').controls;

I don't get any values to display but I can click edit and edit all the information. So I'm not sure how I get to have my cake and eat it to...basically looping through my array to display it, then edit it

here is my form builder within the ts

this.widgetService.getWidgetTypes(this.widget.type).subscribe(types => {
  this.widgetTypes = types   

  let elements: FormGroup[]
  for (let index = 0; index < this.widgetTypes .length; index++) {
    const element = this.widgetTypes [index];
    const controls = <FormArray>this.widgetForm.controls['types']
    controls.push(
      this.formBuilder.group({
        item: [element.item, Validators.required],
        amount: element.amount,
        reason: element.reason
      })
    )
  }
})

my html looks like

    <div [formGroup]="widgetForm">
       <div formArrayName="types" *ngFor="let type of widgetForm.get('types').value; let i = index;">
         <div [formGroupName]="i" >
         <ng-container *ngIf="readOnly[i]">
           <div>
             <dl>
                <dt>Item:<dd>
                <dd>{{ type.item }}<dd>
             <dl>
              <dl>
                <dt>Amount:<dd>
                <dd>{{ type.amount }}<dd>
             <dl>
              <dl>
                <dt>Reason:<dd>
                <dd>{{ type.reason }}<dd>
             <dl>
           <div>
           <div><i class="icon-edit" (click)="editItem(i)"></i></div>
           </ng-container>
           <ng-container *ngIf="!readOnly[i]">
           <div class="col">
             <mat-form-field >
              <input matInput placeholder="Item" formControlName="item"/>
             </mat-form-field>
           </div>
           <div class="col">
            <mat-form-field >
             <input matInput placeholder="Amount" formControlName="amount"/>
            </mat-form-field>
           </div>
           <div class="col">
            <mat-form-field>
             <mat-select placeholder="Reason" formControlName="reason">
              <mat-option>{{ type.reason }}</mat-option>
              <mat-option value="1">Duplicate Payment</mat-option>
              <mat-option value="2">Incorrect Amount</mat-option>
              <mat-option value="3">Lost/Stolen</mat-option>
              <mat-option value="4">Expired</mat-option>
            </mat-select>
           </mat-form-field>
         </div>
       </ng-container>
       </div>
      </div>
     </div>

Do I need to do something special when a mat-select is within a nested group or something with the form builder?

saucerman saucerman · Accepted Answer · 2019-03-04T15:16:58

I found the solution to anyway who is curious...

I changed my

*ngFor="let type of widgetForm.get('types').value

to

*ngFor="let type of widgetForm.get('types').controls {{ item.value.reason }} etc...instead of {{ type.reason }}

then when I reference the readOnly values, they are referenced by

nested forms and .control vs .value - help needed

1 Answers