如何启用提交按钮 onchange 单选按钮答案

【问题标题】：how to enable submit button onchange radio button如何启用提交按钮 onchange 单选按钮
【发布时间】：2018-07-15 03:23:36
【问题描述】：

下面是我的编辑表单的代码

<form [formGroup]="editForm" (ngSubmit)="saveUser()" novalidate>
  <div class="form-group">
    <label class="block">Gender</label>
    <div class="clip-radio radio-primary">
      <input type="radio" id="wz-female" [(ngModel)]="item.profile.gender" formControlName="gender" value="female">
      <label for="wz-female">Female</label>
      <input type="radio" id="wz-male" [(ngModel)]="item.profile.gender" formControlName="gender" value="male">
      <label for="wz-male">Male</label>
    </div>
  </div>
  <button type="submit" [disabled]="checkForm(editForm)" class="btn btn-primary btn-o next-step btn-wide pull-right" (click)="saveUser()">Save</button>
</form>

如何验证此单选按钮，以便在我将单选按钮从男性更改为女性时启用提交按钮，反之亦然，因为它是我的编辑表单。

【问题讨论】：

是的，我已经对所有其他输入字段进行了验证，但在此单选按钮验证中遇到了问题，因此寻求帮助

标签： html angular forms typescript

【解决方案1】：

只需将默认值存储在变量中并放入

[禁用]="defaultValue == currentModelValue"

按钮条件

【讨论】：

【解决方案2】：

HTML 代码。

<form [formGroup]="radioTest">
  <input type="radio" name="gender" value='Male' formControlName="gender" [(ngModel)]='gender'>Male
  <input type="radio" name='gender' value='Female' formControlName="gender" [(ngModel)]='gender'>Female
  <button type="button" [disabled]="radioTest.controls['gender'].invalid">Gender Button</button>
</form>

组件

radioTest: FormGroup;
gender;
constructor(fb: FormBuilder) {
  this.name = 'Angular2'
  this.radioTest = fb.group({
    gender: ['', Validators.required]
  });
}

检查这个plunker

http://plnkr.co/edit/mWhYtc2nf8hSHFbLWlEx?p=preview

更多参考here

【讨论】：

它非常接近但问题是，我已经选中了男性单选按钮，所以现在当我将单选按钮从男性更改为女性时，它应该启用提交按钮。（考虑一个编辑表单，我想在编辑表单中编辑信息）
那么你现在想要什么？应该检查默认男性？
当我导航到编辑表单时，我的单选按钮选中了男性，提交按钮最初将被禁用，但是当我将男性按钮更改为女性时，应该启用提交按钮
它会做同样的事情只是检查你的男性单选按钮，它会像现在一样工作。