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

回答

相關問題