切换单选按钮不以反应形式工作 - 角度 8

Question

我在 Angular 8 中使用反应形式，并有一个性别切换单选按钮。 切换单选按钮不返回 selected 的值。

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);
  }

gender 的值总是'male'，这是默认值。

Answer 1

这是因为data-toggle="buttons"，删除它你会看到它工作并通过编写自定义函数将活动类添加到标签。

Answer 2

像这样试试 在 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]
    });
  }