我创建了一个ReactiveForm,它在创建新记录时非常有效 . 但是当我尝试编辑它时,我对数组有一些问题,主要是在选择版本中 .
HTML:
<div formArrayName="racNaturezas">
<div *ngFor="let itemrow of formulario.controls.racNaturezas.controls; let i=index" [formGroupName]="i">
<div formGroupName="natureza">
<div class="input-field col s10 m10 l10">
<select materialize="material_select" [materializeSelectOptions]="naturezas" formControlName="idNatureza">
<option value="" disabled selected>Escolha a Natureza</option>
<option *ngFor="let nat of naturezas" value={{nat.idNatureza}}>{{nat.descricao}}</option>
</select>
<label>Natureza</label>
</div>
</div>
<div class="input-field col s1 m1 l1">
<a *ngIf="formulario.controls.racNaturezas.controls.length > 1" class="btn-floating btn-medium waves-effect waves-light red" (click)="deleteRow(i)"><i class="material-icons">remove</i></a>
</div>
</div>
<div class="input-field col s1 m1 l1">
<a class="btn-floating btn-medium waves-effect waves-light blue" (click)="addNewRow()"><i class="material-icons">add</i></a>
</div>
</div>
TS文件
this.formulario = this.formBuilder.group({
racNaturezas: this.formBuilder.array([this.iniciaArrayNaturezas()])
});
iniciaArrayNaturezas() {
return this.formBuilder.group({
natureza: this.formBuilder.group({
idNatureza:[null]
}),
principal:[false]
})
}
addNewRow() {
const control = <FormArray>this.formulario.controls['racNaturezas'];
control.push(this.iniciaArrayNaturezas());
}
deleteRow(index: number) {
const control = <FormArray>this.formulario.controls['racNaturezas'];
control.removeAt(index);
}
好吧,使用上面这些代码,我可以选择并添加多个itens并保存,但是当我尝试编辑一个时,select不显示值 . 我正在尝试使用相同的HTML和TS文件 . 为此,当用户尝试编辑它时,我创建了一个不同的方法:
carregaRac() {
this.racService.buscarPorCodigo(this.idRac)
.then(rac => {
this.rac = rac;
this.formulario.patchValue({this.formulario.setControl('racNaturezas', this.formBuilder.array(this.rac.racNaturezas || []));
})
.catch(erro => this.errorHandler.handle(erro)); }
在这种情况下,我在我的视图中使用调试,我看到数组正在表单控件中正确加载,但没有出现在我的视图中:
查看调试,数组“racNaturezas”已正确加载,但我不知道为什么,在select选项中没有绑定:
"racNaturezas": [
{
"natureza": {
"idNatureza": "2"
},
"principal": true
},
{
"natureza": {
"idNatureza": "3"
},
"principal": false
}
]