无法使用具有 select 值的 patchValue 绑定到对象
Unable to use patchValue with select value bind to object
我正在使用 angular 表单生成器添加数据,其中表单有一个 select 元素,其值是绑定到对象,但是当我尝试使用补丁值方法编辑表单时或除 select 之外的设置值方法字段正在使用正确的数据归档,请有人纠正我。
html
<form [formGroup]="addCountryForm">
<div class="form-group">
<label for="countryControl">Name</label>
<select class="form-control" formControlName="countryControl" (change)="resetwarning()">
<option [ngValue]="country" *ngFor="let country of countries">
{{country.name}}
</option>
</select>
</div>
<div class="form-group">
<label for="note">Note</label>
<textarea rows="4" class="form-control" placeholder="Enter any Note (If Any)" formControlName="note"></textarea>
</div>
</form>
ts
export class AddCountryComponent implements OnInit {
addCountryForm: FormGroup;
data: any;
heading: string;
countries = [];
customeError: boolean;
customeErrorMsg: string;
constructor(
public activeModal: NgbActiveModal,
private fb: FormBuilder,
private countryService: CountriesService
) { }
ngOnInit() {
this.countries = this.countryService.allCountryList();
this.createForms();
if (this.data) {
console.log(this.data.details);
this.addCountryForm.setValue({
countryControl: this.data.details,
note: this.data.note
}
);
this.heading = 'Edit Country';
} else {
this.heading = 'Add Country';
}
}
createForms() {
this.addCountryForm = this.fb.group({
countryControl: [''],
note: ['', [Validators.required]]
});
}
}
{{国家|json}}
示例输出
[
{
"id": "1",
"sortname": "AF",
"name": "Afghanistan",
"phonecode": "93"
},
{
"id": "2",
"sortname": "AL",
"name": "Albania",
"phonecode": "355"
},
{
"id": "3",
"sortname": "DZ",
"name": "Algeria",
"phonecode": "213"
}
]
和
console.log(this.data.details);
输出
{id: "1", sortname: "AF", name: "Afghanistan", phonecode: "93"}
我想出了一个适合我的解决方案,
问题是什么:
我正在尝试为 json 对象数组中具有值的下拉列表设置补丁值和设置值,因此它正在与对象进行比较以设置选定值我做了以下操作:
ngOnInit() {
this.countries = this.countryService.allCountryList();
this.createForms();
if (this.data) {
const selectedCountry = this.countries.find(item => JSON.stringify(item) === JSON.stringify(this.data.details));
this.addCountryForm.patchValue({
countryControl: selectedCountry,
note: this.data.note
}
);
this.heading = 'Edit Country';
} else {
this.heading = 'Add Country';
}
}
我正在使用 angular 表单生成器添加数据,其中表单有一个 select 元素,其值是绑定到对象,但是当我尝试使用补丁值方法编辑表单时或除 select 之外的设置值方法字段正在使用正确的数据归档,请有人纠正我。
html
<form [formGroup]="addCountryForm">
<div class="form-group">
<label for="countryControl">Name</label>
<select class="form-control" formControlName="countryControl" (change)="resetwarning()">
<option [ngValue]="country" *ngFor="let country of countries">
{{country.name}}
</option>
</select>
</div>
<div class="form-group">
<label for="note">Note</label>
<textarea rows="4" class="form-control" placeholder="Enter any Note (If Any)" formControlName="note"></textarea>
</div>
</form>
ts
export class AddCountryComponent implements OnInit {
addCountryForm: FormGroup;
data: any;
heading: string;
countries = [];
customeError: boolean;
customeErrorMsg: string;
constructor(
public activeModal: NgbActiveModal,
private fb: FormBuilder,
private countryService: CountriesService
) { }
ngOnInit() {
this.countries = this.countryService.allCountryList();
this.createForms();
if (this.data) {
console.log(this.data.details);
this.addCountryForm.setValue({
countryControl: this.data.details,
note: this.data.note
}
);
this.heading = 'Edit Country';
} else {
this.heading = 'Add Country';
}
}
createForms() {
this.addCountryForm = this.fb.group({
countryControl: [''],
note: ['', [Validators.required]]
});
}
}
{{国家|json}}
示例输出
[
{
"id": "1",
"sortname": "AF",
"name": "Afghanistan",
"phonecode": "93"
},
{
"id": "2",
"sortname": "AL",
"name": "Albania",
"phonecode": "355"
},
{
"id": "3",
"sortname": "DZ",
"name": "Algeria",
"phonecode": "213"
}
]
和
console.log(this.data.details);
输出
{id: "1", sortname: "AF", name: "Afghanistan", phonecode: "93"}
我想出了一个适合我的解决方案, 问题是什么: 我正在尝试为 json 对象数组中具有值的下拉列表设置补丁值和设置值,因此它正在与对象进行比较以设置选定值我做了以下操作:
ngOnInit() {
this.countries = this.countryService.allCountryList();
this.createForms();
if (this.data) {
const selectedCountry = this.countries.find(item => JSON.stringify(item) === JSON.stringify(this.data.details));
this.addCountryForm.patchValue({
countryControl: selectedCountry,
note: this.data.note
}
);
this.heading = 'Edit Country';
} else {
this.heading = 'Add Country';
}
}