Question

嘿......我的表格中有单选按钮。在这里有两组单选按钮......

1.用于从列表中选择首选手机

2.在列表中选择首选电子邮件

当我在手机中选择一个无线电选项时，它显示为true但如果我选择电子邮件组中的单选按钮，手机中的所选值将设置为false ...我在这里做了一个plunker演示http://plnkr.co/edit/gSosX6kueTxu64CDfjQg?p=preview < / p>

myForm: ControlGroup;  
Phones: ControlGroup;
Emails:ControlGroup;
constructor(fb:FormBuilder){
this.Phones=fb.group({
      Phone1:[''],
      Phone2:[''],
      Phone3:['']
});
this.Emails=fb.group({
  Email1:[''],
  Email2:['']
});
this.myForm = fb.group({  
});
}
this.myForm.addControl('Phones', this.Phones));
this.myForm.addControl('Emails', this.Emails);

这就是我如何访问单选按钮的值并分配给主控制组...有人请帮助我在这种情况下如何正确获取单选按钮的值

Answer 1

已知问题是同一个ControlGroup中的多个单选按钮无法正常工作https://github.com/angular/angular/issues/7051

来自cur3n4的comment显示了一种解决方法

import {RadioControlRegistry, RadioControlValueAccessor} from 'angular2/src/common/forms/directives/radio_control_value_accessor';

// TODO Monkey patching Radio buttons until https://github.com/angular/angular/issues/7051 is fixed
export class CustomRadioControlRegistry extends RadioControlRegistry {

    select(accessor: RadioControlValueAccessor) {
        (<any>this)._accessors.forEach((c) => {
            if (c[0].control.root === accessor._control.control.root
              && c[1] !== accessor && c[1]._elementRef.nativeElement.name === (<any>accessor)._elementRef.nativeElement.name) {
              c[1].fireUncheck();
            }
        });
    }
}

然后在引导应用程序时，我将RadioControlRegistry替换为我的实现： provide(RadioControlRegistry, {useClass: CustomRadioControlRegistry})

angular2中的单选按钮未按预期工作

1 个答案: