如何给 RadioButton 赋值

Question

这里我有数据生成器 1 或 2 当我点击 Link 按钮时它在文本框中完美显示 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

Answer 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

Answer 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。

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

如何给 RadioButton 赋值

How to assign value to RadioButton

html

jquery

angular2-forms

angular

模板驱动的方法

反应性方法