Angular 8:基于组件在html中动态设置formControlName [英] Angular 8: Dynamically set formControlName in html based on component

问题描述

在 db 表中，我有key_name"，它在 API 中成功返回并且运行良好.

我想要做的是在 html 和组件中将这些字段值设置为 formControlName 我使用的是反应式表单，所以我尝试了 formArrayName.

基于更改事件，我在 categoryArray 中推送新的 formControl 并将其键分配为 db 字段的值.

这是我的HTML:

<div formArrayName="categoryArray" *ngFor="let type of types; let k = index"><div [formGroupName]="k"><div class="form-group"><label>选择{{ type.cat_name }}</label><select class="form-control custom-select"(change)="onChangeType($event.target.value)"formControlName="{{ type.key_name }}" ><option value="">-- 选择--</option><option *ngFor="let type of types" [value]="type.category_id">{{type.cat_name}}</选项></选择>

component.ts:

onChangeCategory(id) {如果(ID){this.artistService.fetchTypeAndSubTypes(id).subscribe(res => {如果(res.status == 200){this.types = res.datathis.addInNewCategory(this.types)}})} 别的 {this.types = nullthis.subTypes = null}}获取类别():FormArray {return this.uploadArtWorkForm.controls.categoryArray;}addInNewCategory(类型){让 obj = {}types.forEach(元素 => {obj[element['key_name']] = [null, [Validators.required]]});console.log("obj", obj)this.category.push(this.formBuilder.group(obj));}

我想要存档的是，基于第 1 个类别选择，所有第 2 个级别的类别将显示为动态 HTML 下拉列表，其子类别列表在下拉列表中.

我遇到的错误:

ERROR 错误:找不到带有路径的控件:'categoryArray ->1'ERROR 错误:找不到路径控制:'categoryArray ->1 ->金属'

设置表单控件名称后，如何设置每个新创建的下拉列表的值?我需要从数据库中获取它.

这里是 Stackblitz:https://stackblitz.com/edit/dyncamic-populating-dropdown

提前致谢

解决方案

尝试自己修改代码，至少修复了以下错误:

错误错误:找不到路径控制:'categoryArray -> 1'

错误错误:找不到路径控制:'categoryArray -> 1 -> metal'

但是您仍然需要使用我的解决方案进行改进.

<块引用>

修改你的 app.component.html 如下:

<form [formGroup]="uploadArtWorkForm" (ngSubmit)="addUploadArtWorkForm();"><div class="col-md-6"><div class="form-group"><label>选择类别:</label><select class="form-control custom-select" formControlName="cat_id" [ngClass]="{'is-invalid': uploadArtWorkForm.controls['cat_id'].invalid && (uploadArtWorkForm.controls['cat_id'].dirty || uploadArtWorkForm.controls['cat_id'].touched || isFormSubmitted) }" (change)="onChangeCategory($event, $event.target.value)"><option value="">-- 选择--</option><option *ngFor="let category of parentCategories" [value] ="category.category_id">{{category.cat_name}}</选项></选择><div class="invalid-feedback" *ngIf="uploadArtWorkForm.controls['cat_id'].errors"><div *ngIf="uploadArtWorkForm.controls['cat_id'].errors.required">类别是</div>