Angular 2、Material 2 Radio、Formgroups

Question

我正在尝试让 Angular 2 和 Material 2 与 FormGroup 和 <md-radio> 组件一起工作。但是，当我像使用标准 <md-input> 那样连接它时，如果抛出错误。例如

component.html

<form [formGroup]="myFormGroup (ngSubmit)="doSomething()">          
<md-input #birthday formControlName="birthday" placeholder="Birthday"></md-input>
<md-radio-group formControlName="gender" align="end">
    <md-radio-button value="m">Male</md-radio-button>
    <md-radio-button value="f">Female</md-radio-button>
</md-radio-group>
</form>

component.ts

export class Component {

    myFormGroup: FormGroup;

    constructor(formBuilder: FormBuilder) {
        this.myFormGroup = formBuilder.group({
            birthday: [this.myModel.birthday, Validators.required],
            gender: [this.myModel.gender, Validators.required]
        });
    }
}

这给我的错误信息是：

ngModel 不能用于向父级注册表单控件 formGroup 指令。尝试使用 formGroup 的合作伙伴指令“formControlName”。示例：

<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

  Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:

  Example:


<div [formGroup]="myGroup">
   <input formControlName="firstName">
   <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
</div>

即使我将表单组更改为：

this.myFormGroup = formBuilder.group({
                birthday: [this.myModel.birthday, Validators.required],
                gender: new FormControl()
            });

我仍然收到同样的错误。

如何在 Angular 2 中将材质 2 <md-radio> 组件与 FormGroup 一起使用？任何帮助，将不胜感激。

非常感谢。

JT

Answer 1

我最近遇到了这个问题，我使用“值”访问使其工作。 如果值等于 radio-button-value，它会设置默认值。 使用您的代码：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Component } from '@angular/core';
myFormGroup: FormGroup;

export class Component {

   constructor(private formBuilder: FormBuilder) {
       this.myFormGroup = formBuilder.group({
           'birthday': ['', Validators.required],
           'gender': ['m', Validators.required]
       });
   }
}

对于模板：

<form [formGroup]="myFormGroup" (ngSubmit)="doSomething()">          
<md-input #birthday formControlName="birthday" placeholder="Birthday"></md-input>
<md-radio-group formControlName="gender" align="end">
    <md-radio-button value="m">Male</md-radio-button>
    <md-radio-button value="f">Female</md-radio-button>
</md-radio-group>
 <button 
        [disabled]="!myFormGroup.valid"
        md-raised-button 
        >Valid
      </button>
</form>

如果你想通过点击来执行一个函数，有一个EventEmitter，每次点击都会启动。

<md-radio-group formControlName="gender (change)="genderChanged($event.value)"

而且你只需要在TS中实现这个功能。

还有一种方法可以访问表单的值，只需通过

console.log("data from form:', this.myFormGroup.value);

希望这能稍微回答您的问题，这是第一次回答某人。 :D