如何使用 Reactive 表单设置单选按钮值？

Question

这是我的组件 class，我尝试将表单单选按钮值设置为 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>

那么如何从我的组件加载单选按钮值 class？

Answer 1

如果您希望默认手动检查其中任何一个，您可以添加 "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>

编辑

如果您想使用自 开始的默认值，请键入字符串 ，在 FormControl 中设置：

component.ts

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

component.html

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

如果您想使用从 开始的默认值，请键入数字 ，在 FormControl 中设置：

component.ts

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

component.html

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

如何使用 Reactive 表单设置单选按钮值？

How to set radio button value using Reactive form?

typescript

angular2-forms

angular