我正在尝试将此数据绑定到DropDown或Select选项。该值未绑定到表单控制器。这个问题是:
Component.html
<div class="col-md-6">
<label class="col-md-6 col-form-label padding-bottom-Mini">Rule Type</label>
<div class="col-md-12">
<select class="form-control" formControlName="ruleTypeName">
<option [ngValue]="null" disabled>Choose your Rule Types</option>
option *ngFor="let rule of ruleTypes" [value]="rule"> {{ rule.ruleTypeName }}</option>
</select>
</div>
</div>
Component.ts
public ngOnInit(): void {
if(this.data.isNew === true) {
this.editForm = this.formBuilder.group({
id : new FormControl(),
name : new FormControl('', Validators.required),
description : new FormControl(''),
libraryFile : new FormControl(''),
className : new FormControl(''),
ruleTypeName : new FormControl(''),
groupTypeName : new FormControl('')
});
} else {
this.editForm = this.formBuilder.group({
name : new FormControl(this.data.editDataItem.name, Validators.required),
description : new FormControl(this.data.editDataItem.description),
libraryFile : new FormControl(this.data.editDataItem.libraryFile),
className : new FormControl(this.data.editDataItem.className),
ruleTypeName : new FormControl(this.data.editDataItem.ruleTypeName),
groupTypeName : new FormControl(this.data.editDataItem.groupTypeName)
});
}
this.ruleTypeName=this.getRuleTypes(this.data);
}
public getRuleTypes(data:any): any{
this.ruleService.readRuleTypes().subscribe((res:any)=>{
this.ruleTypes=res;
console.log(this.ruleTypes);
if(data.isNew === true){
this.ruleTypeName = null;
} else {
if (this.ruleTypes[this.ruleTypes.findIndex(s => s.ruleTypeName === data.editDataItem.ruleType)] !== undefined) {
this.ruleTypeName = this.ruleTypes[this.ruleTypes.findIndex(s => s.ruleTypeName === data.editDataItem.ruleType)];
// this.editForm.controls["ruleTypeName"].setValue(this.ruleTypeName.ruleTypeName);
}
}
this.editForm.controls["ruleTypeName"].setValue(this.ruleTypeName.ruleTypeName);
});
}
不知道我在这里缺少什么...请提供相关数据。
您需要在模板中更改您的value属性。
<div class="col-md-6">
<label class="col-md-6 col-form-label padding-bottom-Mini">Rule Type</label>
<div class="col-md-12">
<select class="form-control" formControlName="ruleTypeName">
<option [ngValue]="null" disabled>Choose your Rule Types</option>
<option *ngFor="let rule of ruleTypes" [value]="rule.ruleTypeName"> {{ rule.ruleTypeName }}</option>
</select>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句