我正在开发 angular2 应用程序并在表单字段中存储多个复选框的值时遇到问题。
输入脚本
form : FormGroup;
cities = ["Mohali", "Chandigarh", "Ludhiana", "Amritsar"];
zip_codes = ["282001", "456123", "123456", "140412"];
constructor(private formBuilder : FormBuilder)
{
this.form = this.formBuilder.group({
cities : this.formBuilder.array(["Mohali", "Amritsar"]),
zip_codes : this.formBuilder.array(["456123"])
});
}
HTML
<div *ngFor="let city of cities">
<input type="checkbox" formControlName="cities" value="city">
<span>{{city}}</span>
</div>
<div *ngFor="let zipCode of zip_codes">
<inbput type="checkbox" formControlName="zip_codes" value="zipCode">
<span>{{zipCode}}</span>
</div>
我想在表单字段中存储选中的城市和邮政编码,当我在表单字段中有默认值时,数组中的值将被自动检查。
最佳答案
一种方式是这样的:
1) 使用false
默认值设置FormArray
字段
this.form = this.formBuilder.group({
cities : this.formBuilder.array(this.cities.map(x => !1)),
zip_codes : this.formBuilder.array(this.zip_codes.map(x => !1))
});
2) 模板将如下所示:
<div *ngFor="let city of cities; let i = index" formArrayName="cities">
<input type="checkbox" [formControlName]="i">
<span>{{city}}</span>
</div>
<div *ngFor="let zipCode of zip_codes; let i = index" formArrayName="zip_codes">
<input type="checkbox" [formControlName]="i">
<span>{{zipCode}}</span>
</div>
3) 提交表单
convertToValue(key: string) {
return this.form.value[key].map((x, i) => x && this[key][i]).filter(x => !!x);
}
onSubmit() {
const valueToStore = Object.assign({}, this.form.value, {
cities: this.convertToValue('cities'),
zip_codes: this.convertToValue('zip_codes')
});
console.log(valueToStore);
}
4)默认值
const defaultCities = ["Mohali", "Amritsar"];
const defaultZipCodes = ["456123"];
this.form = this.formBuilder.group({
cities: this.formBuilder.array(this.cities.map(x => defaultCities.indexOf(x) > -1)),
zip_codes: this.formBuilder.array(this.zip_codes.map(x => defaultZipCodes.indexOf(x) > -1))
});
关于angular - 如何在angular2中以 react 形式存储多个复选框值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45272272/