javascript - RadioButtons 行为奇怪 Angular 4

Question

我正在尝试创建一个自定义组件，以这种方式对一些单选按钮进行分组

<group>
  <radio></radio>
  <radio></radio>
  <radio></radio>
</group

在组件内部，我动态地为输入添加一个名称，因此它们都具有相同的名称，并且当我单击另一个名称时会更改所选的名称。

如果我只有一个组件，它会很好地工作，如果我有多个组件，它会扩展值，就像它只是一组只有一个名称的 RadioButtons 一样。

这是我正在使用的代码:

import {AfterViewInit, Component, ContentChildren, ElementRef, Input, NgModule, QueryList} from "@angular/core";
import {CommonModule} from "@angular/common";
import {ControlValueComponent} from "../shared/ControlValueComponent";
import {SysSharedModule} from "../shared/SysSharedModule";

@Component({
  selector: 'sys-radio-button',
  styleUrls: ['sysRadioButton.css', '../shared/sys.css'],
  providers: ControlValueComponent.providerValueAcessor(SysRadioButton),
  template: `    
      <input type="radio" id="rb{{randomId}}" [value]="val" [(ngModel)]="value">
      <label for="rb{{randomId}}">{{label}}</label>
  `
})

export class SysRadioButton extends ControlValueComponent {

  constructor (public elem: ElementRef) {
    super();
  }

  @Input() groupName = 'radiobutton';
  @Input() val: any;
  @Input() label: string;
  randomId = (Math.floor(Math.random() * (1 - 10000 + 1)) + 1) * -1;

}

@Component({
  selector: 'sys-radio-group',
  styleUrls: ['sysRadioButton.css', '../shared/sys.css'],
  providers: ControlValueComponent.providerValueAcessor(SysRadioGroup),
  template: `    
    <div class="t{{tam}}">
      <label class="header">{{header}}</label> 
      <div class="radioButtonContainer"></div> 
    </div>
  `
})

export class SysRadioGroup extends ControlValueComponent implements AfterViewInit {

  @Input() name: string;
  @Input() header: string;
  @Input() tam = '3-of-10';
  @ContentChildren(SysRadioButton) radioButtons: QueryList<SysRadioButton>;

  constructor (public elem: ElementRef) {
    super();
  }

  ngAfterViewInit() {
    this.addNameToInputs();
  }

  addNameToInputs() {
    const container = this.elem.nativeElement.getElementsByClassName('radioButtonContainer')[0];
    this.radioButtons.forEach(item => {
      const input = item.elem.nativeElement;
      input.getElementsByTagName('input')[0].name = this.name;
      container.appendChild(input);
    });
  }

}

@NgModule({
  imports: [CommonModule, SysSharedModule],
  declarations: [SysRadioButton, SysRadioGroup],
  exports: [SysRadioButton, SysRadioGroup]
})

export class SysRadioButtonModule {

}

我这样使用它:

<sys-radio-group header="Select your destiny" name="name1">
  <sys-radio-button val="hola1" label="Label 1"></sys-radio-button>
  <sys-radio-button val="hola2" label="Label 2"></sys-radio-button>
  <sys-radio-button val="hola3" label="Label 3"></sys-radio-button>
  <sys-radio-button val="hola4" label="Label 4"></sys-radio-button>
</sys-radio-group>
<sys-radio-group header="Select your destiny" name="name2">
  <sys-radio-button val="hola1" label="Label 1"></sys-radio-button>
  <sys-radio-button val="hola2" label="Label 2"></sys-radio-button>
  <sys-radio-button val="hola3" label="Label 3"></sys-radio-button>
  <sys-radio-button val="hola4" label="Label 4"></sys-radio-button> 
</sys-radio-group>

以下是其工作原理的一些图像

这就是我不点击任何东西时的情况

这就是当我单击具有相同值但名称不同的一个时的样子

如果我检查 chrome 控制台中的元素，我可以看到名称有何不同，所以我不明白为什么会发生这种情况

编辑

扩展主类的 ControlValueComponent 类只是用于自定义表单的类。这是代码:

import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
import {forwardRef, Input} from "@angular/core";

export class ControlValueComponent implements ControlValueAccessor {

  @Input() disabled: boolean;

  innerValue: any = '';

  static providerValueAcessor( ref: any): any {
    return [
      { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ref), multi: true }
    ];
  }

  onTouchedCallback: () => void = () => {};

  onChangeCallback: (_: any) => void = () => {};

  constructor() {
  }

  get value(): any {
    return this.innerValue;
  }

  set value(v: any) {
    if (v !== this.innerValue) {
      this.innerValue = v;
      this.onChangeCallback(v);
    }
  }

  writeValue(value: any) {
    if (value !== this.innerValue) {
      this.innerValue = value;
    }
  }

  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

}

这就是 [(ngModel)] 的“值”变量的来源

Answer 1

将 ngModel 更改为:

 [(ngModel)]="val"