如何为 RadioButton 赋值答案

【问题标题】：How to assign value to RadioButton如何为 RadioButton 赋值
【发布时间】：2018-01-18 06:51:17
【问题描述】：

这里我有像 1 或 2 一样的数据生成器，当我点击链接按钮时，它在文本框中完美显示 1 或 2，但是当我将其更改为单选按钮时，为什么它不显示..

文本框代码

 <input type="text" [(ngModel)]="Gen" formControlName="Gen" value="1" name="Gen" />

单选按钮

 <form class="form-horizontal" novalidate [formGroup]="EmployeeForm">

 <div class="form-group" [ngClass]="{'has-error':(EmployeeForm.get('Gen').touched||
                 EmployeeForm.get('Gen').dirty)&&
                 !EmployeeForm.get('Gen').valid}">
     <input  type="radio" [(ngModel)]="Gen" formControlName="Gen" value="1" name="Gen" />Male
                    <input type="radio" [(ngModel)]="Gen" formControlName="Gen" value="2" name="Gen" />FE-Mal

【问题讨论】：

ngModel 用于模板驱动的表单。 formControlName 用于反应形式。您不应该将两者合二为一。
Hai Deborahk 我从你的 Angulr2 tutoriall 复制了这段代码来自复数网站 Coud u plz give any hint
我在下面添加了一个答案，因为我无法格式化评论中的文本。
@DEborahk 能否请您参考我的更新问题

标签： jquery html angular angular2-forms

【解决方案1】：

尝试不使用 formControlName：

 <input  type="radio" [(ngModel)]="Gen" value="1" name="Gen" />Male
 <input type="radio" [(ngModel)]="Gen" value="2" name="Gen" />FE-Mal

 {{Gen}}

检查此以了解原因：https://github.com/angular/angular/pull/10314#issuecomment-242218563

【讨论】：

我遇到此错误无法绑定到“ngModel”，因为它不是“输入”的已知属性。 ("ontrolName="Gen" value="1" name="Gen" />男-->
确保在 app.module.ts 文件中导入 FormsModule，并确保将其添加到 imports[] 数组中。

【解决方案2】：

我的“Angular Reactive Forms”课程中的代码显示了两种方式：

使用响应式表单：

  <div class="form-group" >
      <label class="col-md-2 control-label">Send Notifications</label>
      <div class="col-md-8">
              <label class="radio-inline">
                  <input type="radio" 
                         value="email" 
                         formControlName = "notification">Email
              </label>
              <label class="radio-inline">
                  <input type="radio" 
                         value="text" 
                         formControlName = "notification">Text
              </label>
      </div>
  </div>

注意这里没有ngModel 双向绑定。

使用模板驱动的表单：

<div class="form-group" >
    <label class="col-md-2 control-label">Address Type</label>
    <div class="col-md-8">
            <label class="radio-inline">
                <input type="radio" id="addressType1Id" value="home"
                        [(ngModel)]="customer.addressType"
                        name="addressType">Home
            </label>
            <label class="radio-inline">
                <input type="radio" id="addressType1Id" value="work"
                        [(ngModel)]="customer.addressType"
                        name="addressType">Work
            </label>
            <label class="radio-inline">
                <input type="radio" id="addressType1Id" value="other"
                        [(ngModel)]="customer.addressType"
                        name="addressType">Other
            </label>
    </div>
</div>

注意这里没有使用formControlName。

【讨论】：

非常感谢您的 Greate Ans

【解决方案3】：

这里有两种方法可以解决这个问题。

模板驱动的方法

app.component.html

<form [formGroup]="signupForm" (ngSubmit)="onSubmitForm()">


  <div class="radio" *ngFor="let gender of genders">
    <label>
        <input 
            type="radio" 
            name="gender" 
            id="{{gender}}" 
            [value]="gender" 
            ngModel 
            required>
        {{ gender }} 
    </label>
  </div>

app.component.ts

export class AppComponent {
    genders = ['male', 'female']; 
}

反应式方法

app.component.html

  <form [formGroup]="signupForm" (ngSubmit)="onSubmitForm()">
    <div class="radio" *ngFor="let gender of genders">
      <label>
        <input
          type="radio"
          formControlName="gender"
          [value]="gender">{{ gender }}
      </label>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
  </form>

app.component.ts

export class AppComponent implements OnInit {
  genders = ['male', 'female'];
  signupForm: FormGroup;

 ngOnInit() {
    this.signupForm = new FormGroup({
      'username': new FormControl(null, Validators.required),
    });
  }

  onSubmitForm() {
    console.log(this.signupForm)
  }
}

【讨论】：

太棒了，真的很不错