angular2 复选框表单控件

Question

对于具有绑定(bind)到 FormControl 的字符串值的简单复选框:

export class CheckboxComponent {
  formControl: FormControl;
  option: {value: string};

  constructor() {
    this.formControl = new FormControl(); 
    this.option = {value: "MyValue"};

         this.formControl.valueChanges.subscribe(console.log);
  }

}

<input type="checkbox" [formControl]="formControl" [value]="option.value" name="SomeName" />

订阅的输出是真，假，真，假....我希望 Angular 2 在 FormControl 中绑定(bind)字符串值“MyValue”。

默认情况下，angular 2、FormControl 和复选框似乎绑定(bind)了 bool 值，这很奇怪，因为默认的浏览器提交行为是发送复选框的值，并且在多个复选框具有相同名称的情况下，发送一个复选框值数组绑定(bind)到复选框的名称。

提交将毫无用处:

Items=[true, false, true, true, true, false]

代替:

Items=[Toothbrush, Floss, Glock, Clean underwear]

本质上:如何让 angular 2 绑定(bind)字符串值而不是 bool 值？

亲切的问候，

Answer 1

我相信我通过使用“覆盖”默认 CheckboxControlValueAccessor 的自定义指令解决了您(和我)的问题。 Angular2 核心将 onChange 事件设置为触发该框是否被选中。下面的代码触发一个对象，该对象是否被选中以及值。您只需要将 html 元素设置为复选框类型的输入，并附加要跟踪的值 [value]={valueToTrack}

import {Directive, ElementRef, Renderer, forwardRef} from '@angular/core';

import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';


export const CHECKBOX_VALUE_OVERRIDE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => CheckboxControlValueOverrideAccessor),
  multi: true,
};

@Directive({
  selector: 'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]',
  host: {'(change)': 'onChange({checked: $event.target.checked, value: $event.target.value})', '(blur)': 'onTouched()'},
  providers: [CHECKBOX_VALUE_OVERRIDE_ACCESSOR]
})

export class CheckboxControlValueOverrideAccessor implements ControlValueAccessor {
  onChange = (_: any) => {};
  onTouched = () => {};

  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}

  writeValue(value: any): void {
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value.checked);
  }
  registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
  registerOnTouched(fn: () => {}): void { this.onTouched = fn; }

  setDisabledState(isDisabled: boolean): void {
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  }
}