Angular(4.x.x)Material CheckBox组件(mat-checkbox):[checked]无效

时间:2017-11-07 09:58:20

标签: javascript forms angular checkbox material

这怎么可能????

见:

<div class="col-lg-1 check-field">
    <mat-checkbox color="primary"
                  [checked]="true"
                  formControlName="flagRimb">Rimb.
    </mat-checkbox>
</div>

我已经选中了真正的值,并且在加载组件时仍未检查mat-checkbox!难以置信!!!

唯一能够扰乱行为的是formControl,它有:

     return this._formBuilder.group({
        [...],
        flagAdd : ['',Validators.required],
        [...]
    });

formControlName就在那里,因为我需要设置相对于http rest调用给出的model.value的复选框值,但即使默认值设置为true也不能正常工作!!

从控制台看来,生成的爆炸材料html不会从&lt; _&lt;。

继承checked属性

有什么想法吗?在此先感谢!!

编辑1:已使用已选中INSTEAD [已选中]

enter image description here

3 个答案:

答案 0 :(得分:7)

我相信您需要使用ngModel才能使其正常工作

<mat-checkbox [(ngModel)]="someValue">
</mat-checkbox>

someValue将为true(已选中)或false(未选中)

答案 1 :(得分:2)

FormControl的替代答案:

  1. formControlName="flagRimb"此名称必须与formBuilder.group
  2. 中定义的名称匹配
  3. true必须在FormControl flagRimb的参数列表中传递
  4. Validators.requiredTrue和普通.required相比,复选框的验证应完成

Component.html

<div class="col-lg-1 check-field">
    <mat-checkbox color="primary"
                  [checked]="true"
                  formControlName="flagRimb">Rimb.
    </mat-checkbox>
</div>

Component.ts

return this._formBuilder.group({
  [...],
  flagRimb : [true, Validators.requiredTrue],
  [...]
});

答案 2 :(得分:1)

替换此

[checked]="true"

[checked]="true"checked="true"