Angular 2, Material 2 Radio, Formgroups

Question

I am trying to get Angular 2 and Material 2 working together with a FormGroup and an <md-radio> component. However when I wire it up like I would with a standard <md-input> if throws an error. For example

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

The error message this gives me is:

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>

Even if I change the formgroup to:

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

I still receive the same error.

How do I use a material 2 <md-radio> component together with a FormGroup in Angular 2? Any help would be appreciated.

Many thanks.

JT

You're actually mixing two different approaches, have a look at this YouTube video, where Kara Erickson, from the Angular Material's team explains all about forms youtu.be/xYv9lsrV0s4... This being said, I'm experiencing a similar issue and @dries247 's answer doesn't fix it for me. — PatrickS

dries247 dries247 · Accepted Answer · 2016-11-15T13:14:29

I recently bumped into this problem, and I got it to work using the "Value" access. It sets the default value if the value is equal to radio-button-value. Worked with your code:

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

And for the template:

<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>

If you want to execute a function by clicking, there's an EventEmitter that is launched every time it is clicked.

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

And you only have to implement the function in the TS.

There also a way to access the value of the form, just by

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

Hope this answered your question a bit, first time answering to someone. :D

Angular 2, Material 2 Radio, Formgroups

1 Answers