![](/img/trans.png)
[英]why NgModel does not work for mat-checkbox, radio buttons in angular?
[英]angular mat-checkbox dynamically with ngModel
我有一个 class 报价,其中有一个属性“单位”作为对象数组。
export class Offer {
public propertyA: string;
public propertyB: string;
public units: Unit[];
}
export class Unit {
public code: string,
public name: string,
public checked: boolean
}
我使用的是Angular2,这些单位必须是复选框用户可以select。 我也在使用 angular 材料。
html 代码如下所示:
<div *ngFor="let unit of model.units; let i=index">
<mat-checkbox [(ngModel)]="model.units[i].checked"
id="units[{{i}}]" name="units[{{i}}]">
{{ unit.name }}
</mat-checkbox>
</div>
使用以下方式加载单位属性:
this.model.units.push(new Unit("code1","name1", false));
this.model.units.push(new Unit("code2","name2", false));
this.model.units.push(new Unit("code3","name3", false));
当我发送表单时,选中的属性不包含选中的值。
我究竟做错了什么??
添加[checked]="unit.checked"
并从mat-checkbox
删除ngModel
、 id
和name
。 当您加载页面时,这会进行一种方式绑定,但要使两种方式绑定工作,您需要执行类似我在项目中所做的类似操作:
在更改时传递$event
并手动设置组件文件中的值:
将您的 HTML 更改为:
<div *ngFor="let unit of model.units">
<mat-checkbox [checked]="unit.checked"
(change)="valueChange(model.units,unit,$event)">
{{ unit.name }}
</mat-checkbox>
</div>
将此添加到组件文件中:
valueChange(model.units, unit, $event) {
//set the two-way binding here for the specific unit with the event
model.units[unit].checked = $event.checked;
}
编辑/更新:最近找到了一个没有明确处理的双向绑定解决方案
确保model.units
有一个属性为checked
。 这是添加它的最简单方法:
组件.ts:
this.model.units.forEach(item => {
item.checked = false; //change as per your requirement
});
html:
<div *ngFor="let unit of model.units;let i=index">
<mat-checkbox [(ngModel)]="unit.checked" [checked]="unit.checked"
name="{{i}}-name"> //make sure name is unique for every item
</mat-checkbox>
</div>
如果您还想控制启用/禁用选项,请尝试添加以下内容:
组件.ts:
this.model.units.forEach(item => {
item.checked = false;//change as per your requirement
item.disabled = true;//change as per your requirement
});
html:
<div *ngFor="let unit of model.units;leti=index">
<mat-checkbox [(ngModel)]="unit.checked" [checked]="unit.checked"
[disabled]="unit.disabled"
name="{{i}}-name">//make sure name is unique for every item
</mat-checkbox>
</div>
这项工作对我来说在 Angular 7 中进行了测试。
只是为了确保每个复选框的名称都是唯一的
<mat-grid-list cols="4" rowHeight="100px">
<mat-grid-tile *ngFor="let item of aspNetRolesClaims" [colspan]="1" [rowspan]="1">
<span>{{item.claimValue}}</span>
<mat-checkbox [(ngModel)]="item.claimValue" name="{{item.claimType}}">{{item.claimType}}</mat-checkbox>
</mat-grid-tile>
</mat-grid-list>
我在Angular 7 中进行了测试,根据您的问题我找不到任何错误,您可以在此StackBlitz 示例中看到一个有效的演示,但这是我的答案。
为了工作,你必须给你的 ngModel 绑定输入一个唯一的name
。
以您的代码为例:
<div *ngFor="let unit of model.units; let i=index">
<mat-checkbox
[(ngModel)]="model.units[i].checked"
id="units-{{i}}"
name="units-{{i}}" // using plain slug-case instead of array notation
>
{{ unit.name }}
</mat-checkbox>
</div>
我不喜欢在这些情况下使用数组符号( units[{{i}}]
),因为这意味着所有字段都连接在同一事物中,但是由于您的代码似乎可以工作,这只是一种偏好,而不是错误的原因。
如果你不能使用[(ngModel)]
当您使用的是像FormGroup
,你可以做到以下几点。 该代码假定 obj 是自定义对象并具有 IsSeleted 属性。
<mat-checkbox [checked]="obj.IsSelected"
(change)="onSelectionChanged($event, obj)">{{obj.Name}}
</mat-checkbox>
在 onSelectionChanged 中,手动更新 obj.IsSelected
public onSelectionChanged(arg: MatCheckboxChange, obj:any) {
obj.IsSelected = arg.checked;
}
另一种可能更简单的方法。 这种方法在表单组中运行良好
<form [formGroup]='formGroup'>
<mat-checkbox [(ngModel)]="obj.IsSelected" [ngModelOptions]="{standalone:> true}">
{{obj.Name}}
</mat-checkbox>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.