web-dev-qa-db-ja.com

リアクティブフォームを使用してラジオボタンの値を設定する方法は？

フォームラジオボタンの値を1に設定しようとするコンポーネントクラスを次に示します。

import { FormGroup, FormControl } from '@angular/forms';

export class myComponent implements OnInit{
    pageForm: FormGroup;

    ngOnInit() {
        this.pageForm = new FormGroup({
            'gndr': new FormControl(1)
        });
    }
}

しかし、ページが読み込まれたとき、ラジオボタンは男性に設定されておらず、両方のオプションは空白です。

<div class="form-group">
    <label for="gender">Gender</label>
    <div class="radio">
        <label>
            <input type="radio" name="gndr" formControlName="gndr" value=1>Male
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="gndr" formControlName="gndr" value=0>Female
        </label>
    </div>
</div>

コンポーネントクラスからラジオボタンの値を読み込むにはどうすればよいですか？

angulartypescriptangular2-forms
8
John Glabb

それらのいずれかをデフォルトで手動でチェックする場合は、「checked」タグを追加できます。

<div class="radio">
    <label>
        <input type="radio" name="gndr" formControlName="gndr" value=1 checked>Male
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="gndr" formControlName="gndr" value=0>Female
    </label>
</div>

編集

type stringのデフォルト値を使用する場合、FormControlで設定します。

component.ts

this.pageForm = new FormGroup({
      'gndr': new FormControl('1')
    });

component.html

...
<input type="radio" formControlName="gndr" value=1>
...

type numberのデフォルト値を使用する場合は、FormControlで設定します。

component.ts

this.pageForm = new FormGroup({
      'gndr': new FormControl(1)
    });

component.html

...
<input type="radio" formControlName="gndr" [value]=1>
...
14
Andresson