在Angular版本4中，如何将ngModel与Formarray选择对象一起使用

Question

I have successfully set up a Formarray that has two controls. The controls are set in the HTML form as select objects. I can successfully push and display multiple element sets but when I try to change the value of the select object in the first element of the Formarray the other Formarray element select objects take on the same value. I am using [(ngModel)] to bind a value to the object and I believe that is why the vales are always the same. I tried using an array variable with [(ngModel)]=stringArray[i] using the Formarray index, but I get errors when the page is loaded.

Can anyone suggest how to get the value of the select object using [(ngModel)] or other mechanism? I am using an ng-lightning select component (version 1.3.0) and SLDS Lightning Design CSS. I am using Angular version 4.1.3. In other parts of my app, I need to use [(ngModel)] with a string in order to get the value of a select object. The select values are an array of objects and not a primitive variable like a string. The component does not have an onSelect() function defined.

HTML:

<form [formGroup]="callFlowForm">
  <div formArrayName="callDevices">
    <!-- Check the correct way to iterate your form array -->
    <div *ngFor="let callDevice of callFlowForm.controls.callDevices.controls; let i=index"  [formGroupName]="i">
      <div class="form-group">
        <div class="slds-form-element slds-size--8-of-8">
          <ngl-form-element label="Device #: {{ i + 1 }}" class="slds-m-top--small">
            <select nglFormControl class="slds-select"
                    formControlName="callAsset"
                    [(ngModel)]="selectedDevice"
                    ngDefaultControl >
                <option *ngFor="let device of devices"
                    [value]="device.id">{{device.assetName}}
                </option>
            </select>
          </ngl-form-element>
        </div>
      </div>
      <div class="form-group">
        <div class="slds-form-element slds-size--8-of-8">
          <ngl-form-element label="Protocol:" class="slds-m-top--small">
            <select nglFormControl class="slds-select"
                    formControlName="assetTransport"
                    [(ngModel)]="selectedTransport"
                    ngDefaultControl >
                <option *ngFor="let protocol of transports"
                    [value]="protocol.id">{{protocol.type}}
                </option>
            </select>
          </ngl-form-element>
        </div>
      </div>
      <button *ngIf="callFlowForm.controls.callDevices.controls.length > 1" (click)="deleteDevice(i)" class="btn btn-danger">Delete Button</button>
    </div>
  </div>
  <button type="button" (click)="addDevice()" class="btn btn-primary">Add Device</button>
</form>

Component:

selectedTransport: string;
selectedDevice: string;
public callFlowForm: FormGroup;

transports: SipTransport[] = [{'id': 1, 'type': 'UDP'},
                              {'id': 2, 'type': 'TCP'},
                              {'id': 3, 'type': 'TLS'}
                             ];
devices: Asset[] = [{'id': 1, 'assetName': 'VCS', 'type': 'SIP Registrar'},
                    {'id': 1, 'assetName': 'CUCM', 'type': 'Call Control'},
                    {'id': 1, 'assetName': 'SBC', 'type': 'Call Control'},
                    {'id': 1, 'assetName': 'EX60', 'type': 'Endpoint'}
                   ];

constructor(private dialService: DialService,
    private formBuilder: FormBuilder
) { }

ngOnInit() {
    this.selectedDevice = '1';
    this.selectedTransport = '1';
    this.callFlowForm = this.formBuilder.group({
      callDevices: this.formBuilder.array([this.addDevices()]) // here
    });

}

addDevices() {
      return this.formBuilder.group({
          callAsset: [''],
          assetTransport: ['']
      });
}

addDevice() { 
  const control = <FormArray>this.callFlowForm.controls['callDevices'];
  control.push(this.addDevices());
}

deleteDevice(index: number) {
  const control = <FormArray>this.callFlowForm.controls['callDevices'];
  control.removeAt(index);
}

Answer 1

Why don't you do this?

Component class:

selectedDevice: Asset;

HTML code:

           <select nglFormControl class="slds-select"
                formControlName="callAsset"
                [(ngModel)]="selectedDevice"
                ngDefaultControl >
            <option *ngFor="let device of devices"
                [value]="device">{{device.assetName}}
            </option>
        </select>`

Answer 2

Thank you to @AJT_82 who helped get me going in the right direction. The question may not have been worded the best as the answer is you DON'T use ngModel in a formarray. You need to set and retrieve the values via the form controls. This has confused me when the examples on the Internet try to explain the difference between "template driven" versus "model driven" or "reactive" forms. They always seemed to be just the same.

This is how the HTML should be.

HTML:

<select nglFormControl class="slds-select"
        formControlName="callAsset"
        ngDefaultControl >
        <option *ngFor="let device of devices"
           [value]="device.id">{{device.assetName}}
        </option>
</select>

In my app I am using the array values to search through a larger collection. When I want to get the values of the form I implement this:

Component:

const formValue1 = this.callFlowForm.value;

// this allows me to iterate through all devices in the formarray
// and push those values into a list for sorting and further processing
formValue1.callDevices.forEach((element: any) => {
    allDevices.push(element.callDevice);
});

Not in this example, but in another form I needed to set the values of the form controls. I used form.setValue({}) where you need to set the value of all the form controls. Then if you need to just edit a single value then you use form.patchValue({}). An example of a set in that other form is this.

setValue:

this.dialForm.setValue({
   id: this.editDialplan.id,
   number: this.editDialplan.number,
   domainid: this.editDialplan.domainid.id
});

patchValue:

this.dialForm.patchValue({
   number: this.editDialplan.number,
});