1

フォームにはラジオ ボタンとチェック ボックスがあります。タブで移動すると、フィールドが強調表示されます。angular 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
}

ページの読み込み時に「いいえ」オプションをデフォルトで選択したいのですが、そうはなっていません。どこが間違っているのか教えてもらえますか?

また、チェックボックスの場合、次回スペースバーを押すとチェックが外れ、スペースバーを押すとチェックが外れます。それは起こっていません。選択されるだけです。私の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;
      }
   }

}

アップデート：

起動時に選択したラジオボタンとして「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>
于 2016-10-12T15:16:06.393 に答える