1

我有一个角度为 2 的表单。表单有单选按钮和复选框。在选项卡上，这些字段被突出显示。对于单选按钮，我希望它们在我点击空格键后被选中。复选框也是如此。我正在使用 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
}

我希望在页面加载时默认选择“否”选项，但这没有发生。谁能让我知道我哪里出错了？

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

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

两种方式的数据绑定没有发生。感谢帮助。谢谢！

4

1 回答 1

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

}

更新：

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

<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>
于 2016-10-12T15:16:06.393 回答