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

这里是我的组件类，我尝试将表单单选按钮值设置为1：如何使用Reactive形式设置单选按钮值？

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>

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

来源

2017-10-12 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>

编辑

如果你想使用默认值作为字符串类型，在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> 
...

来源

2017-10-12 23:56:59 Andresson

是的，但我该怎么办从基于FormControl的组件类设置它： 'gndr'：new FormC ontrol（1）...我认为它应该设置检查参数。有没有sence使用FormControl和硬编码在HTML –

啊抱歉误解，这应该工作''gndr'：新的FormControl（'1'）' – Andresson

不知道如果你想要的值是类型的字符串，就像你建议在你的HTML视图中..但是这并没有任何意义的字符串类型为1和0.所以，如果你喜欢，你可以在输入中将'value = 1'和'value = 0'的模板语法改为'[value] = 1'和'[value] = 0'。确保这些值是类型编号。然后它应该与你原来的''gndr'一起工作：新的FormControl（1）' – Andresson

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

回答

相关问题