[英]Angular Reactive Form : How to preset values ? (FormArray containing objects)
我正在尝试实现经典的“更新对象”功能。
我有一张列出我所有产品的表格,每一行都有一个编辑按钮,打开一个我想显示产品属性值的模式。
我们在这里关注的属性是“角色”,它的值是一个对象数组,每个对象都从下拉列表中选择。
我设法显示了正确数量的对象(该示例中为 3 个),但没有设置值,并且在每种情况下都选择了默认选项。
我尝试在该属性上使用 angular 'patchValue()' function 但没有成功。
这是我所拥有的 Typescript:
public personas = new FormArray([], [], []);
constructor(private fb: FormBuilder, public productService: ProductService) {
this.productForm = this.fb.group({
personas: this.personas,
});
}
public onEdit(product: Product): void {
if (product.personas.length > 0) {
this.personaService.personas$.pipe(takeUntil(this._destroyed$)).subscribe((personas: Persona[]) => {
const array = product.personas.filter(p => personas.some(p2 => p.id === p2.id));
this.personas = this.fb.array(array.map(persona => new FormControl({
id: persona.id,
persona: persona.persona,
})));
});
}
}
这就是我的模板中的内容:
<div class="form-group">
<label for="personas">Personas</label>
<div id="personas" formArrayName="personas">
<div *ngFor="let persona of personas.controls; let i = index;" class="d-flex m-1">
<select
*ngIf="!(personaService.isFetchingPersonas$ |async) && (personaService.personas$ |async) as options"
class="form-control">
<option *ngFor="let option of options" [ngValue]="option">{{ option.persona }}</option>
</select>
</div>
</div>
谢谢您的帮助
!!! 编辑 !!!
我意识到,当我试图实现我的目标时,我打破了创建新产品的过程,因为 Persona 属性不再正确设置。
所以 Stackblitz 项目与上面的代码片段略有不同。 因为我将我的项目 state 移回了它的功能。
在hello.component.html
的底部,我添加了这个小助手,以查看表单中的内容。
<pre>
{{ productForm.value | json }}
</pre>
然后我将ngOnInit
更改为如下所示:
public ngOnInit(): void {
this.product.personas.forEach((persona: Persona) => {
const option = this.options.find(x => x.id === persona.id);
if (option) {
this.addField(option);
}
});
}
这里的想法是查找每个“选项”并将该选项放入 formArray,而不是“角色”。
还有一点简化的addField
方法
public addField(persona = {}): void {
(this.productForm.get("personas") as FormArray).push(
new FormControl(persona)
);
}
工作堆栈闪电战
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.