Angular 选中“材质”复选框“属性不工作”

当checked属性设置为true时，mat复选框未默认选中：

<mat-checkbox value="true" formControlName="updates" checked="true">Get Updates</mat-checkbox>

使用双向绑定

<mat-checkbox value="true" formControlName="updates" [checked]="true">Get Updates</mat-checkbox>

---

就被动表单而言，我还没有找到一种动态检查复选框并更新表单控件值的方法

使用[checked]只检查HTML复选框元素，但不影响控件

如果必须根据变量的值动态处理复选框，则可以使用这种方法

为决定选中状态的变量设置setter和getter，更新setter中的表单控件

比如：

private _checkBoxChecked = false

set checkBoxChecked(val) {
  this._checkBoxChecked = val
  this.form.get('con').setValue(this.checkBoxChecked); // update your checbox control here
}

get checkBoxChecked() {
  return this._checkBoxChecked
}

ngOnInit() {
  this.form = this._fb.group({
    con: [this.checkBoxChecked]
  })
}

请参见此处的示例：

---

在添加的示例中，它是普通输入复选框而不是mat输入复选框，但理想情况下，这种方法也适用于该复选框。

不使用复选框。如果您使用了被动形式，那么只需为字段设置一个值

//When you create the form
this.form=new FormGroup({
   updates:new FormControl(true)
}
//Or in a function
this.form.get('updates').setValue(true)

<!--no value, no checked, just formControlName-->
<form [formGroup]="form">
   <mat-checkbox formControlName="updates" >Get Updates</mat-checkbox>
</form>

---

您可以使用具有[checked]属性的ngModel进行设置。ngModel绑定属性应设置为“true”：

component.html：

<mat-checkbox class = "example" [(ngModel)] = "myModel"> 
    <label>Hello example true </label> 
</mat-checkbox>

---

我刚才遇到过这个问题，有几种选择：

您可以使用属性[ngModel]=varboolean

您可以将属性[checked]=varboolean设置为

您可以通过formcontrol在其创建中默认值：

varboolean是一个声明的布尔类型变量，默认情况下标记为值true：

public varboolean:boolean=true

<mat-checkbox value="true" formControlName="updates" [(ngModel)] = varboolean >Get Updates</mat-checkbox>

<mat-checkbox value="true" formControlName="updates" [checked] = varboolean >Get Updates</mat-checkbox>


createForm() 
{
  this.form = this.formBuilder.group({           
      updates: new FormControl(true, [Validators.nullValidator]), 
  });
}

---

您必须动态地将复选框标记为选中吗？这里可能重复的是我创建并选中的stackblitz。@HameedSyed，如果您使用ReactiveForm，则不使用[checked]。注意：在堆栈Blitz中，更改[checked]=true by[checked]=isChecked，但这只是因为您在堆栈中未使用ReactiveForm或[ngModel]Blitz将[checked]更改为[ngModel]修复了此问题。。。我不知道why@dcp3450不要将模板驱动样式与反应式表单样式混合使用，当您使用反应式表单时，不要使用任何与ngModel相关的内容。它会给您带来很难解决的bug。@xyz，不要使用辅助变量，只需使用这个.form.get'con即可。value@Eliseo我不明白，我应该在哪里使用这个.form.get'con.value？在您的checkBoxChecked函数中，您可以简单地返回这个.form.get'con.value-如果需要，您可以使用它返回这个.form？这个.form.get'con.value:false以避免在未定义这个.form时出错

<mat-checkbox value="true" formControlName="updates" [(ngModel)] = varboolean >Get Updates</mat-checkbox>

<mat-checkbox value="true" formControlName="updates" [checked] = varboolean >Get Updates</mat-checkbox>


createForm() 
{
  this.form = this.formBuilder.group({           
      updates: new FormControl(true, [Validators.nullValidator]), 
  });
}