- 首页
- 其他开发
- Angular 8:未使用 Reactive Form 在组件中获取选定的下拉值
Angular 8:未使用 Reactive Form 在组件中获取选定的下拉值
[英] Angular 8: Not getting selected dropdown values in component using Reactive Form
本文介绍了Angular 8:未使用 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}}</选项></选择>
<块引用>
和 app.component.ts 如下:
//下面的值将显示在选择类型下拉列表中catTypeValue = [{"parent_id":2,"cat_name":"Anklets","category_id":3,"key_name":"anklets"}, {"parent_id":2, "cat_name":"Body", "category_id"":4, "key_name":"body"}, {"parent_id":2, "cat_name":"Bracelets","category_id":5, "key_name":""}, {"parent_id":2, "cat_name":"Charms","category_id":6, "key_name":""}, {"parent_id":2,"cat_name":"项链","category_id":7, "key_name":""},{"parent_id":2,"cat_name":"Ornamental","category_id":8, "key_name":""}, {"parent_id":2, "cat_name":"Rings & Studs","category_id":9, "key_name":""}, {"parent_id":2, "cat_name":"Jewelry Metal","category_id":10,"key_name":""}, {"parent_id":2, "cat_name":"Yellow Gold","category_id":11, "key_name":""}, {"parent_id":2, "cat_name":"White Gold","category_id":12,"key_name":"whitegold"}, {"parent_id":2, "cat_name":"Silver","category_id":13,"key_name":"silver"}]//下面的值将显示在 Select Metal dd 中猫金属值 = [{"parent_id":14,"cat_name":"Whitegold","category_id":24,"key_name":"whitegold"},{"parent_id":14,"cat_name":"Yellow Gold","category_id":24,"key_name":"whitegold"},]//下面的值将显示在 Select Gems dd 中catGemsValue = [{"parent_id":15,"cat_name":"Blue Gems","category_id":25,"key_name":"bluegems"}]构造函数(私有表单构建器:FormBuilder){this.uploadArtWorkForm = this.formBuilder.group({cat_id: new FormControl('', Validators.required),categoryArray: this.formBuilder.array([]),});onChangeType(值,ID){控制台日志(值);}onChangeCategory(事件,ID){如果(ID){this.types = [{"parent_id":1, "cat_name":"Type", "category_id":2, "key_name":"type"}, {"parent_id":1, "cat_name":"Metal", "category_id":14, "key_name":"metal"}, {"parent_id":1, "cat_name":"Gems", "category_id":15, "key_name":"gems"}];if(this.uploadArtWorkForm.controls['categoryArray'].length > 0){this.uploadArtWorkForm.controls['categoryArray'].controls.length = 0}this.addInNewCategory(this.types);} 别的 {this.types = null;this.subTypes = null;}}获取类别():FormArray {return this.uploadArtWorkForm.controls['categoryArray'];}addInNewCategory(types) {['categoryArray'];types.forEach((element, i) => {this.category.push(this.formBuilder.group({[element["key_name"]]: new FormControl(element["key_name"])}));});}}
I am dynamically populating drop downs and it's values. After selecting all the value when I click on the submit button I am not able to set it's value in form, I am getting blank values.
HTML:
<div class="col-md-6" *ngFor="let type of types">
<div class="form-group">
<label>Select {{ type.cat_name }}</label>
<select class="form-control custom-select"
(change)="onChangeType($event.target.value)"
[value]="type.key_name" >
<option value="">-- Select --</option>
<ng-container *ngFor="let subType of dynamicCategoryData">
<option *ngIf="subType.key == type.key_name" [value]="subType.value">{{subType.value}}</option>
</ng-container>
</select>
</div>
</div>
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)
}
OUTPUT:
{
"categoryArray": [
{
"gems": null,
"metal": null,
"type": null
}
]
}
Is it just because I am not using formControlName
? Can we do it without it?
Any help would be appreciated.
解决方案
Modify your app.component.html as below:
<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>Select {{ 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="">-- Select --</option>
<option *ngFor="let type of catTypeValue" [value]="type.cat_name">
{{type.cat_name}}
</option>
</select>
<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="">-- Select --</option>
<option *ngFor="let type of catMetalValue" [value]="type.category_id">
{{type.cat_name}}
</option>
</select>
<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="">-- Select --</option>
<option *ngFor="let type of catGemsValue" [value]="type.category_id">
{{type.cat_name}}
</option>
</select>
</div>
</div>
</div>
</div>
and app.component.ts as below:
//below value will be displayed in Select Type dropdown
catTypeValue = [{"parent_id":2,"cat_name":"Anklets","category_id":3,"key_name":"anklets"}, {"parent_id":2, "cat_name":"Body", "category_id":4, "key_name":"body"}, {"parent_id":2, "cat_name":"Bracelets","category_id":5, "key_name":""}, {"parent_id":2, "cat_name":"Charms","category_id":6, "key_name":""}, {"parent_id":2,"cat_name":"Necklaces","category_id":7, "key_name":""}, {"parent_id":2,"cat_name":"Ornamental","category_id":8, "key_name":""}, {"parent_id":2, "cat_name":"Rings & Studs","category_id":9, "key_name":""}, {"parent_id":2, "cat_name":"Jewelry Metal","category_id":10,"key_name":""}, {"parent_id":2, "cat_name":"Yellow Gold","category_id":11, "key_name":""}, {"parent_id":2, "cat_name":"White Gold","category_id":12,"key_name":"whitegold"}, {"parent_id":2, "cat_name":"Silver","category_id":13,"key_name":"silver"}
]
// below values will be displayed in Select Metal dd
catMetalValue = [
{"parent_id":14,"cat_name":"White Gold","category_id":24,"key_name":"whitegold"},
{"parent_id":14,"cat_name":"Yellow Gold","category_id":24,"key_name":"whitegold"},
]
// below values will be displayed in Select Gems dd
catGemsValue = [
{"parent_id":15,"cat_name":"Blue Gems","category_id":25,"key_name":"bluegems"}
]
constructor(private formBuilder: FormBuilder) {
this.uploadArtWorkForm = this.formBuilder.group({
cat_id: new FormControl('', Validators.required),
categoryArray: this.formBuilder.array([]),
});
onChangeType(value, id){
console.log(value);
}
onChangeCategory(event, id) {
if (id) {
this.types = [
{"parent_id":1, "cat_name":"Type", "category_id":2, "key_name":"type"}, {"parent_id":1, "cat_name":"Metal", "category_id":14, "key_name":"metal"}, {"parent_id":1, "cat_name":"Gems", "category_id":15, "key_name":"gems"}];
if(this.uploadArtWorkForm.controls['categoryArray'].length > 0){
this.uploadArtWorkForm.controls['categoryArray'].controls.length = 0
}
this.addInNewCategory(this.types);
} else {
this.types = null;
this.subTypes = null;
}
}
get category(): FormArray {
return <FormArray>this.uploadArtWorkForm.controls['categoryArray'];
}
addInNewCategory(types) {['categoryArray'];
types.forEach((element, i) => {
this.category.push(this.formBuilder.group({[element["key_name"]]: new FormControl(element["key_name"])
}));
});
}
}
这篇关于Angular 8:未使用 Reactive Form 在组件中获取选定的下拉值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!