angular2复选框formcontrol [英] angular2 checkbox formcontrol

问题描述

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

For a simple checkbox with a string value bound to a 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" />

订阅的输出为true，false，true，false.... 我希望角度2绑定FormControl中的字符串值"MyValue".

The output of the subscribe is true, false, true, false.... I want the angular 2 to bind the string value "MyValue" in the FormControl.

默认情况下，角度2，FormControl和复选框似乎绑定了布尔值，这很奇怪，因为默认浏览器的提交行为是发送复选框的值，如果多个复选框具有相同的名称，则发送复选框值的数组绑定到复选框的名称.

By default angular 2, FormControl and checkboxes seem to bind boolean values which is strange since default browser submit behaviour is to send the value of the checkbox and, in the case of multiple checkboxes with the same name, an array of checkbox values bound to the name of the checkboxes.

提交将毫无用处

Would be pretty useless to submit:

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

代替:

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

所以本质上:如何使angular 2绑定字符串值而不是布尔值?

So in essence: How to make angular 2 bind the string value not the boolean value?

亲切的问候，

推荐答案

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

I believe I solved your (and my) issue by utilizing a custom directive that "overrides" the default CheckboxControlValueAccessor. Angular2 core sets the onChange event to fire whether the box is checked or not. The code below fires an object with the whether it's checked and the value. You will just need to set the html element as an input of type checkbox, and attached the value you want to track with [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);
  }
}

这篇关于angular2复选框formcontrol的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！