Угловой 2, материал 2 Радио, группы форм

#angular #angular-material2

#angular #angular-материал2

Вопрос:

Я пытаюсь заставить Angular 2 и Material 2 работать вместе с компонентом a FormGroup и an <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>
  

Даже если я изменю formgroup на:

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

Я все еще получаю ту же ошибку.

Как мне использовать <md-radio> компонент material 2 вместе с FormGroup в Angular 2? Буду признателен за любую помощь.

Большое спасибо.

1. На самом деле вы смешиваете два разных подхода, посмотрите это видео на YouTube, где Кара Эриксон из команды Angular Material объясняет все о формах youtu.be/xYv9lsrV0s4 … При этом я сталкиваюсь с аналогичной проблемой, и ответ @dries247 не решает ее для меня.

Ответ №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>

Если вы хотите выполнить функцию щелчком мыши, есть отправитель событий, который запускается при каждом нажатии на него.

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

И вам нужно только реализовать функцию в TS.

Существует также способ получить доступ к значению формы, просто

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

Надеюсь, это немного ответило на ваш вопрос, впервые отвечая кому-то. : D