如何通过空格键为单选按钮和复选框启用键盘辅助功能 angular 2

Question

我在 angular 中有一个表单 2.The 表单有单选按钮并检查 boxes.On 制表符，字段有 highlighted.For 单选按钮我希望它们被选中一旦我点击 spacebar.Same 复选框。我正在使用 angular 2 material design.

中的片段

<md-radio-group>
<md-radio-button value="" name="">Yes</md-radio-button>
<md-radio-button value="" [checked]="true" name="">No</md-radio-button>
</md-radio-group>

在我的component.ts文件中-

import {component, OnInit} from '@angular/core';
export class Components implements OnInit {

// The logic below
}

我希望在页面加载时默认选择 "No" 选项，但这不是 happening.Can 谁能告诉我哪里出错了？

此外，如果是复选框，一旦它在下次点击空格键时被选中，我点击 spacebar.That 时应该取消选中，而不是 happening.It 才被选中。在我的 component.ts-

中通过空格键选择复选框的代码

handleKeyUp($event,checkBox: MdCheckBox){
    if ($event.code===32){
    checkBox.checked=true;
    }
}

双向数据绑定不是happening.Appreciate help.Thanks!

Answer 1

您可以尝试在 <md-radio-button> 上放置一个 (keyup)="handleKeyup($event)" 处理程序，并在 handleKeyup 方法中检查是否按下了空格键。您还需要将当前聚焦的单选按钮作为模板变量传递，以便可以在您的控制器中选择它。

例如在您的模板中：

<md-radio-group>
   <md-radio-button #rdo1 value="" name="" (keyup)="handleKeyup($event, rdo1)">Yes</md-radio-button>
   <md-radio-button #rdo2 value="" name="" (keyup)="handleKeyup($event, rdo2)>No</md-radio-button>
</md-radio-group>

在你的controller.ts中：

import { MdRadioButton } from '@angular/material/radio';

export class Component implements OnInit {

   constructor() { }

   handleKeyup($event, radio: MdRadioButton) {
      if($event.code === 32) { // spacebar
         radio.checked = true;
      }
   }

}

更新：

要将 'NO' 设置为启动时选定的单选按钮，您需要在模板中执行此操作：

<md-radio-group selected=rdo2>
   <md-radio-button #rdo1 value="" name="" (keyup)="handleKeyup($event, rdo1)">Yes</md-radio-button>
   <md-radio-button #rdo2 value="" name="" (keyup)="handleKeyup($event, rdo2)>No</md-radio-button>
</md-radio-group>

如何通过空格键为单选按钮和复选框启用键盘辅助功能 angular 2

How to enable keyboard accessibility via spacebar for radio buttons and check boxes in angular 2

accessibility

angular-material2

angular