Angular 2单选按钮未使用活动表单正确初始化

时间:2016-12-05 21:18:22

标签: angular radio-button angular2-forms ng-bootstrap

我从Angular 2开始,目前正在使用2.2.2版本

我正在写一个反应形式,但我无法初始化所选的单选按钮。页面应该选中一个单选按钮加载,但这不会发生。

我无法找到问题的根源。从Web上的代码示例,我认为这应该是有效的。这是我的代码片段。

<form [formGroup]="consultaSolicitudesINETELForm"  (ngSubmit)="consulta(consultaSolicitudesINETELForm)">
<input type="radio" formControlName="criterio" value="1"  />
<input type="radio" formControlName="criterio" value="2"  />
<input type="radio" formControlName="criterio" value="3"  />
<input type="text" formControlName="folio" placeholder="folio" required>
 </form>

用于组件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
moduleId: module.id,
selector: 'my',
templateUrl: 'my.component.html',
styleUrls: ['my.component.css']
})
export class My implements OnInit {

myForm: FormGroup;

constructor(private fb: FormBuilder) {

}

ngOnInit(): void {
  this.buildForm();
}

buildForm(): void {

  this.consultaSolicitudesINETELForm = this.fb.group({
    criterio: ["2"],
    folio: ["TEST"],

  });

  this.myForm.valueChanges.subscribe(data => this.onValueChanged(data));
  this.onValueChanged();

}

编辑:  Here是一个plnkr我从一个示例中分出来的,我添加了无法在我的环境中运行的无线电。我看到的唯一区别是版本号。

EDIT2: 好的,我发现它与ng-bootstrap有关。如果我使用NgbModule.forRoot()然后单选按钮没有初始化并且没有按预期工作,如果我禁用ng-bootstrap然后它们工作,但因为我在其他地方使用ng-bootstrap我不能做这一点。

我通过使用ng-bootstrap自己的单选按钮组并重新设计网页来解决这个问题。我将单选按钮放在各种字段集的图例中,所有内容始终可见。 现在无线电的工作类似于制表符,根据当前选择显示不同的div。

单选按钮的原始选项是选择一个工作字段集,其中所有元素都将被启用,而所有其他字段集都会被启用。内容已禁用。

1 个答案:

答案 0 :(得分:1)

此问题与ng-bootstrap有关,并在https://github.com/ng-bootstrap/ng-bootstrap/issues/1125

进行跟踪

这是他们的首要任务。