angular2 체크 박스 formcontrol

Question

:

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" /> 

구독의 출력은 참, 거, 참, 거짓 .... I입니다 각도 2가 FormControl의 "MyValue"문자열 값을 바인딩하게하십시오.

기본적으로 각도 2, FormControl 및 체크 상자는 기본 브라우저 제출 동작이 확인란의 값을 보내고 동일한 이름을 가진 여러 확인란의 경우 확인란의 배열이므로 이상한 부울 값을 바인딩하는 것으로 보입니다 값은 체크 박스의 이름에 바인딩됩니다.

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

대신에 :

이

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

그래서 본질적으로 어떻게 각 2 바인딩 문자열 값이 아닌 부울 값을 만드는

제출 꽤 쓸모가있을 것인가?

종류와 관련,

Answer 1

은 내가 정의 지시어를 사용하여 (내) 문제를 해결 믿는다 "재정의"기본 CheckboxControlValueAccessor. Angular2 코어는 onChange 이벤트를 설정하여 상자의 선택 여부에 관계없이 실행합니다. 아래의 코드는 체크 여부와 값을 가진 객체를 발생시킵니다. html 요소를 checkbox 유형의 입력으로 설정하고 추적 할 값을 [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); 
    } 
}