angular2 onay kutusu 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" /> 

abone çıktısı, doğru yanlış, doğru, yanlış .... I Açısal 2'nin FormControl'de "MyValue" dize değerini bağlamasını isteyin.

Varsayılan olarak açısal 2, FormControl ve onay kutuları, varsayılan tarayıcı gönderme davranışı onay kutusunun değerini göndermek ve aynı ada sahip birden çok onay kutusu olması durumunda bir onay kutusu olduğundan garip olan boole değerlerini bağlar gibi görünüyor. değerler onay kutularının adına bağlı.

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

yerine:

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

Yani özünde: Nasıl açısal 2 bağlama dize değeri değil boolean değeri yapmak için

göndermek için oldukça yararsız olurdu?

Saygılarımızla

Answer 1

Ben özel yönergesi kullanarak sizin (ve benim) sorunu çözüldü inanıyoruz "geçersiz kılmaları" varsayılan CheckboxControlValueAccessor. Angular2 çekirdeği, kutunun işaretli olup olmadığını açmak için onChange olayını ayarlar. Aşağıdaki kod, kontrol edilip edilmediğine ve değere sahip bir nesneyi tetikler. Sadece tip onay kutusu girdi olarak html elemanını ayarlamak gerekir ve [değer] = {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); 
    } 
}