Question

希望使用if语句确定在最新版本的angular中是否选中了一个复选框。

我的代码：

<mat-menu #wj="matMenu">
   <section><mat-checkbox (id)='1' (click)="$event.stopPropagation()">Cool Kids</mat-checkbox></section>
</mat-menu>

<div class="float-right">
 <mat-action-row>                           
  <button mat-button color="primary" (click) = "generateLink()" >Generate Link</button>
</mat-action-row>

并添加component.ts：

generateLink() {
    <HTMLInputElement>document.getElementById('1')
    if(<HTMLInputElement>document.getElementById('1')){
        console.log('y');
    }      
}

这个想法是，一旦按下“提交”按钮，generateLink()方法将进行评估以查看ID选中的所有复选框。如果有更好的方法可以做到这一点，请分享。本质上，有15个复选框，当按下提交按钮时，我需要在数组的最后收集所有它们的值。

Answer 1

首先，您应该知道mat-checkbox会为 MatCheckbox 对象生成一个内部ID。

第二，我同意您应该通过表单来管理元素状态。

但是，如果您仍要跟踪是否选中了某些复选框，则可以对其进行跟踪。

链接：stackblitz.com

简而言之，我正在使用一项服务来将每个选中的复选框作为MatCheckbox对象发出。

然后，当单击Button时，我将遍历MatCheckbox数组，并且每次迭代 checked 对象都会进行评估，并将其ID打印到控制台中只是出于演示目的。

希望有帮助。

Answer 2

我的建议是改用反应形式。这样，您将可以更好地控制表单。

// In your typescript
  myForm: FormGroup;
  mycheckboxControl: FormControl;

  constructor(private _fb: FormBuilder) {
    this.mycheckboxControl = new FormControl();
    this.mycheckboxControl
      .valueChanges.subscribe((res) => console.log(res));

    this.myForm = this._fb.group({
     checkobx: this.mycheckboxControl
    });
  }
// In your HTML
<form [formGroup]="myForm">
<input type="checkbox" [formControl]="mycheckboxControl">

You can play more with form here

确定是否已选中复选框

2 个答案: