我已经成功建立了一个有两个控件的 Formarray。控件在 HTML 表单中设置为选择对象。我可以成功地推送和显示多个元素集,但是当我尝试在 Formarray 的第一个元素中更改 select 对象的值时,其他 Formarray 元素选择对象具有相同的值。我正在使用[1]将值绑定到对象,我相信这就是为什么 vales 总是相同的。我尝试使用 Formarray 索引使用[2] =stringArray [3]的数组变量,但是在加载页面时出现错误。
任何人都可以建议如何使用[4]或其他机制获取选择对象的值?我正在使用 ng-lightning 选择组件(版本 1.3.0)和 SLDS Lightning Design CSS。我正在使用 Angular 版本 4.1.3. 在我的应用程序的其他部分,我需要使用[5]字符串,以获取选择对象的值。选择值是一个对象数组,而不是像字符串一样的基本变量。该组件没有定义 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);
}
2 回答
你为什么不这样做?
组件类:
HTML 代码:
感谢@AJT_82 谁让我朝着正确的方向前进。这个问题可能没有措辞得最好,因为你的答案是****不要在 formarray 中使用 ngModel。您需要通过表单控件设置和检索值。当互联网上的例子试图解释“模板驱动”与“模型驱动”或“反应”形式之间的区别时,这让我很困惑。他们似乎总是一样的。
这就是 HTML 应该如何。
HTML:
在我的应用程序中,我使用数组值来搜索更大的集合。当我想获取表单的值时,我实现了这个:
零件:
不在此示例中,但在另一种形式中,我需要设置表单控件的值。我使用了 form.setValue({}),你需要设置所有表单控件的值。然后,如果您只需编辑单个值,则使用 form.patchValue({})。其他形式的集合的示例是这样的。
设定值:
patchValue: