我正在处理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>
我想在表单字段中存储已检查的城市和zip_codes,当我在表单字段中有默认值时,将自动检查数组中的值 .
2 回答
我非常喜欢@yurzui的答案但是有一个问题就是重新获得 Value ..所以...
我的解决方案 - 使用Material View为Angular 5解决了这个问题
连接是通过
这样,它可以在一个表单中用于多个复选框数组 . 只需设置每次连接的控件数组的名称 .
最后,您将使用原始记录ID的数组保存表单以进行保存/更新 .
这是Gist
一种方式是这样的:
1)使用
false
默认值设置FormArray
字段2)模板看起来像这样:
3)提交表格
4)默认值
Plunker Example