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不能用于向父级注册表单控件 formGroup指令。尝试使用 formGroup的合作伙伴指令＆＃34; formControlName＆＃34;代替。例如：

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

我仍然收到同样的错误。

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

非常感谢。

JT

Answer 1

我最近碰到了这个问题，我使用＆＃34; Value＆＃34;访问。如果该值等于radio-button-value，则设置默认值。使用了您的代码：

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

Angular 2，Material 2 Radio，Formgroups

1 个答案: