angular - Angular Reactive Form:如何预设值?(FormArray 包含对象)
问题描述
我正在尝试实现经典的“更新对象”功能。
我有一张列出我所有产品的表格,每一行都有一个编辑按钮,打开一个我想显示产品属性值的模式。
我们在这里关注的属性是“角色”,它的值是一个对象数组,每个对象都从下拉列表中选择。
我设法显示了正确数量的对象(该示例中为 3 个),但没有设置值,并且在每种情况下都选择了默认选项。
我试图在该属性上使用 angular 'patchValue()' 函数但没有成功。
这是我的打字稿:
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 项目与上面的代码片段略有不同。因为我将我的项目状态移回了它的功能状态。
堆栈闪电战: https ://angular-ivy-cnmqhx.stackblitz.io
解决方案
在底部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)
);
}
工作堆栈闪电战
推荐阅读
- java - 在扫描仪验证中将输入键视为无效
- git - git reset --soft 是否只更改哈希值?
- elasticsearch - 字段的弹性搜索连接
- mysql - 无法使用ansible创建mysql数据库
- php - 进行另一个选择时如何清除所选文本?
- sql-server - 在同一个查询中从两个表中加载数据
- active-directory - 如何在笔记目录中使用 LDAP 通过可分辨名称获取 Exchange 服务器的用户
- jdbc - Kafka Connect JDBC Sink - 一个接收器配置中每个主题(表)的 pk.fields
- html - 监视 Web 应用程序 - 路径属性中的通配符不起作用
- javascript - 在 wordpress 中加载 html 和 js 文件