对于一个带有绑定到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绑定字符串值&#34; MyValue&#34;在FormControl中。
默认情况下,角度2,FormControl和复选框似乎绑定布尔值,这是奇怪的,因为默认浏览器提交行为是发送复选框的值,并且在多个具有相同名称的复选框的情况下,复选框值的数组绑定到复选框的名称。
提交将毫无用处:
Items=[true, false, true, true, true, false]
而不是:
Items=[Toothbrush, Floss, Glock, Clean underwear]
所以本质上:如何使angular 2绑定字符串值而不是布尔值?
亲切的问候,
答案 0 :(得分:2)
我相信我通过使用&#34;覆盖&#34;的自定义指令解决了您(和我)的问题。默认的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);
}
}