如何将焦点设置在角度 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>

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

Answer 1

.focus() 方式

在你的 component.html 中使用引用来设置焦点：

<mat-checkbox #checkboxRef></mat-checkbox>

在你的 component.ts 中使用 @ViewChild 如下：

@ViewChild('checkboxRef', {static: false}) checkTerms: { focus: () => any; };

然后你可以设置焦点：

setTimeout(() => this.checkboxRef.focus());

这是您可以在构思焦点时设置焦点的方式。

---

ng 级方式

要创建一个类以突出显示空或某些复选框并使用 ng-Class 更改类，您可以在每个 mat-checkbox 上使用：

ng-class="{active : isChecked}

然后，在 css 中，更改相应的类。在这种情况下，活动：

.active { box-shadow: 5px 10px #888888; }

这是考虑到您有一个突出显示复选框的默认阴影。

Answer 2

如果你想为复选框添加焦点，你必须使用 ViewChild 装饰器来获取复选框的引用

@ViewChild('ref') ref:ElementRef;

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

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

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