Question

这里我有数据Gener Like 1或2当我点击链接按钮时它在文本框中显示1或2完美但当我将其更改为单选按钮时为什么它不显示..

TextBox代码

 <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

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

TEMPLATE-DRIVEN APPRAOCH

<强> 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赋值

3 个答案:

TEMPLATE-DRIVEN APPRAOCH

反应方法