Angular 2，Material 2 Radio，Formgroups

我正在试着让Angular 2和Material 2与FormGroup和<md-radio>一起工作。但是，当我把它连接起来，就像我会用一个标准的<md-input>一样引发错误。例如Angular 2，Material 2 Radio，Formgroups

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>

即使我改变formgroup到：

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

我仍然收到了同样的错误。

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

非常感谢。

来源

2016-10-12 JT-Helsinki

实际上，您实际上在混合使用两种不同的方法，请观看此YouTube视频，其中来自Angular Material团队的Kara Erickson解释了有关表单的所有信息https：//youtu.be/xYv9lsrV0s4 ... This is说，我遇到类似的问题，@ dries247的答案不能解决它。 – PatrickS

我最近碰到了这个问题，我把它用“价值”获得工作。如果该值等于单选按钮值，它将设置默认值。曾与你的代码：

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

来源

2016-11-15 13:14:29 dries247

你的解决方案工作得很好。最常见的错误之一是将'formControlName'放在收音机中而不是收音机组中。 –

Angular 2，Material 2 Radio，Formgroups

回答

相关问题