angular2 复选框表单控件 [英] 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" />

订阅的输出是真假假真假....我希望 angular 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.

默认情况下，angular 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.

提交将非常无用:

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 复选框表单控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！