3

我试图让 Angular 2 和 Material 2FormGroup与一个<md-radio>组件一起工作。但是，当我像使用标准一样连接它时，<md-input>如果抛出错误。例如

组件.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>

组件.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>

即使我将表单组更改为：

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

我仍然收到同样的错误。

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

非常感谢。

捷通

4

1 回答 1

2

我最近遇到了这个问题，我使用“价值”访问让它工作。如果值等于 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

于 2016-11-15T13:14:29.913 回答