我在8号角使用反应式,并且有一个性别切换单选按钮。 切换单选按钮不返回所选值。
html代码
<form id="sb-signup-form" method="post" novalidate="" [formGroup]="registerForm" (ngSubmit)="register($event)">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="male" type="radio" class="custom-control-input" value="male" name="gender" formControlName="gender"> Male
</label>
<label class="btn btn-primary">
<input id="female" type="radio" class="custom-control-input" value="female" name="gender" formControlName="gender"> Female
</label>
</div>
</form>
.ts代码
registerForm: FormGroup;
ngOnInit() {
this.registerForm = this.formBuilder.group({
gender: ['male']
});
}
register(e) {
console.log(this.registerForm.value);
}
性别的值始终为“男性”,这是默认值。
答案 0 :(得分:3)
这是由于data-toggle="buttons"
造成的,将其删除将使它生效并通过编写自定义函数将活动类添加到标签。
答案 1 :(得分:0)
尝试这样 在HTML文件中:
<form [formGroup]="form">
<label>
<input type="radio" value="Male" formControlName="gender">
<span>male</span>
</label>
<label>
<input type="radio" value="Female" formControlName="gender">
<span>female</span>
</label>
</form>
在TS文件中:
form: FormGroup;
constructor(fb: FormBuilder) {
this.name = 'Angular2'
this.form = fb.group({
gender: ['', Validators.required]
});
}