Question

当mat-checkbox属性设置为true时，未默认检查

checked：

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

Answer 1

未使用已选中。如果您使用了反应式表单，则只需在字段中设置一个值

//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>

Answer 2

使用双向绑定。

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

Answer 3

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

使用[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]
  })
}

在此处查看示例：https://stackblitz.com/edit/angular-hba5pt?file=src%2Fapp%2Fapp.component.ts

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

Answer 4

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

component.html：

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

component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'material-component-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})

export class AppComponent {
  myModel = true;
}

Answer 5

我前一段时间有这个问题，有几种选择：

您可以使用属性[[ngModel）] = varboolean
您可以设置属性[checked] = varboolean
您可以通过formcontrol在创建值时将其默认设置：

varboolean是声明为boolean类型的变量，默认情况下标记为“ 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]), 
  });
}

物料复选框选中的属性不起作用

5 个答案: