Angular 8:未使用 Reactive Form 在组件中获取选定的下拉值 [英] Angular 8: Not getting selected dropdown values in component using Reactive Form

问题描述

我正在动态填充下拉列表及其值.单击提交按钮时选择所有值后，我无法在表单中设置它的值，我得到的是空白值.

HTML:

<div class="form-group"><label>选择{{ type.cat_name }}</label><select class="form-control custom-select"(change)="onChangeType($event.target.value)"[value]="type.key_name" ><option value="">-- 选择--</option><ng-container *ngFor="let subType of dynamicCategoryData"><option *ngIf="subType.key == type.key_name" [value]="subType.value">{{subType.value}}</option></ng-容器></选择>

component.ts

 ngOnInit() {this.uploadArtWorkForm = this.formBuilder.group({thumb_img: ['', [Validators.required]],categoryArray: this.formBuilder.array([]),});}addUploadArtWorkForm() {console.log("this.uploadArtWorkForm.value", this.uploadArtWorkForm.value)}

输出:

<代码>{类别数组":[{宝石":空，金属":空，类型":空}]}

仅仅是因为我没有使用 formControlName 吗?没有它我们能做到吗?

任何帮助将不胜感激.

解决方案

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

<div class="col-md-6" formArrayName="categoryArray" *ngIf="uploadArtWorkForm.get('categoryArray')['controls'].length > 0"><div *ngFor="let item of uploadArtWorkForm.get('categoryArray')['controls']; let k = index"><div [formGroup]="item"><div class="form-group"><label>选择{{ types[k].cat_name }}</label><select class="form-control custom-select" [class]="types[k].key_name" (change)="onChangeType($event.target.value)" formControlName="{{ types[k].key_name }}" *ngIf="types[k].cat_name == 'Type'"><option value="">-- 选择--</option><option *ngFor="let type of catTypeValue" [value]="type.cat_name">{{type.cat_name}}</选项></选择><select class="form-control custom-select" [class]="types[k].key_name" (change)="onChangeType($event.target.value)" formControlName="{{ types[k].key_name }}" *ngIf="types[k].cat_name == 'Metal'"><option value="">-- 选择--</option><option *ngFor="let type of catMetalValue" [value]="type.category_id">{{type.cat_name}}</选项></选择><select class="form-control custom-select" [class]="types[k].key_name" (change)="onChangeType($event.target.value)" formControlName="{{ types[k].key_name }}" *ngIf="types[k].cat_name == 'Gems'"><option value="">-- 选择--</option><option *ngFor="let type of catGemsValue" [value]="type.category_id">{{type.cat_name}}</选项></选择>