Question

我有一个角度为2的表单。表单有单选按钮和复选框。在标签上，字段突出显示。对于单选按钮，我希望它们一旦我按空格键就被选中。复选框的名称。我正在使用角度2材料设计的片段。

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

我想要＆＃34;否＆＃34;选项在页面加载时默认选择，但没有发生。任何人都可以告诉我哪里出错了？

另外，在复选框的情况下，onc下次点击空格键时我应该取消选中，我会点击空格键。但是没有发生。它只是被选中了。通过我的component.ts中的空格键选择复选框的代码 -

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

双向数据绑定没有发生。感谢帮助。谢谢！

Answer 1

您可以尝试在(keyup)="handleKeyup($event)"和<md-radio-button>方法中设置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;
      }
   }

}

更新

设置“否”＆＃39;作为启动时选择的单选按钮，您需要在模板中执行此操作：

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

如何通过空格键为角色2

1 个答案: