angular - 如何将焦点设置在角度 6 中的复选框上

Question

我正在处理一个表格，该表格显示一个表格，第一列作为复选框。用户应该至少选择一个复选框。我想在提交表单时突出显示复选框，因为它们需要被选中。下面是我的复选框代码 -

<td mat-cell *matCellDef="let account">
    <mat-checkbox (click)="$event.stopPropagation()"
    (change)="$event ? datalist.toggle(account) : null"  
   [checked]="datalist.isSelected(account)"                                                  
    formControlName="checkbox" required>
     </mat-checkbox>
</td>

我尝试搜索焦点属性，但没有得到任何合适的例子。

标签： angulartypescriptangular6

Answer 1

如果要将焦点添加到复选框，则必须使用 ViewChild 装饰器来获取复选框的引用

@ViewChild('ref') ref:ElementRef;

然后添加 Focus 方法将元素聚焦在 Click 上

 onClick(){
  this.ref.focus();
  }

示例：https ://stackblitz.com/edit/angular-checkbox-focus