在Angular版本4中如何使用ngModel與Formarray選擇對象

Question

我已經成功設置了一個Formarray，它有兩個控件。這些控件在HTML表單中設置爲選擇對象。我可以成功推送和顯示多個元素集，但是當我嘗試更改Formarray的第一個元素中的select對象的值時，其他Formarray元素選擇對象的值相同。我正在使用[（ngModel）]將值綁定到對象，我相信這就是爲什麼值總是相同的原因。我嘗試使用[（ngModel）] = stringArray [i]使用Fo​​rmarray索引的數組變量，但是當頁面加載時出現錯誤。

任何人都可以建議如何使用[（ngModel）]或其他機制來獲取選擇對象的值嗎？我正在使用ng-lightning選擇組件（版本1.3.0）和SLDS Lightning Design CSS。我正在使用Angular版本4.1.3。在我的應用程序的其他部分，我需要使用[（ngModel）]和一個字符串來獲取選擇對象的值。選擇值是一個對象數組，而不是像字符串這樣的基本變量。該組件沒有定義onSelect（）函數。

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> 

組件：

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

你爲什麼不這樣做呢？

組件類：

selectedDevice: Asset; 

HTML代碼：

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

Answer 2

謝謝@ AJT_82誰幫我弄朝着正確的方向發展。這個問題可能不是最好的答案，因爲你的答案是不要在formarray中使用ngModel。您需要通過表單控件設置和檢索值。當互聯網上的例子試圖解釋「模板驅動」與「模型驅動」或「反應性」形式之間的區別時，這使我感到困惑。他們似乎總是一樣的。

這就是HTML應該是怎樣的。

HTML：

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

在我的應用我使用數組值通過較大的集合搜索。當我想要得到的表單值我實現這個：

組件：

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); 
}); 

不在此例，但在另一種形式，我需要設置窗體控件的值。我使用form.setValue（{}），您需要設置所有表單控件的值。然後，如果您只需編輯一個值，則可以使用form.patchValue（{}）。另一種形式的一個例子是這樣的。

的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, 
});