Angular 2、Material 2 radio 、表单组

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 cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead. Example:

<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()
            });

我仍然收到同样的错误。

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

非常感谢。

JT

Answer 1

我最近遇到了这个问题，我使用“值”访问让它工作。如果值等于单选按钮值，它会设置默认值。使用您的代码:

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