Angular 2，Material 2 Radio，Formgroups-Java 学习之路

我试图让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的合作伙伴指令“formControlName” . 示例：<div [formGroup] =“myGroup”>

在你的班上：

this.myGroup = new FormGroup（{
firstName：new FormControl（）
}）;

或者，如果您想避免注册此表单控件，请指明它在ngModelOptions中是独立的：

例：

即使我将formgroup更改为：

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

我仍然收到同样的错误 .

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

非常感谢 .

1 回答

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

回复于 2024-04-25T07:03:37+08:00

Angular 2，Material 2 Radio，Formgroups

1 回答

相关问题