Switcheryでスタイル指定されたカスタムチェックボックス入力コンポーネント

Question

他の<input type="checkbox" ... />コンポーネントと同じようなフォームで使用できるSwitcheryスタイルのカスタムチェックボックスコンポーネントを作成しようとしています。

私が今持っているコードは、スタイリングの面倒を見る：

import {Component,ViewChild,AfterViewInit,Input} from 'angular2/core'; 
import switchery from 'switchery'; 

@Component({ 
    selector: 'switchery-checkbox', 
    template: `<input #checkbox type="checkbox" class="js-switch"/>`, 
}) 
export class SwitcheryComponent implements AfterViewInit { 
    @Input() options: Switchery.Options = {}; 
    @ViewChild('checkbox') checkbox: any; 
    ngAfterViewInit() { 
    new switchery(this.checkbox.nativeElement, 
        this.options); 
    } 
} 

は、私は次のコードのようにテンプレートでそれを使用できるように追加することは何がありますか？理想的には、<input type="checkbox" />のすべての機能を実装する必要があります。

<switchery-checkbox 
    [(ngModel)]="model.onOrOff" 
    ngControl="onOrOff" 
    [disabled]="disabledCondition" 
    ... > 
</switchery-checkbox> 

Answer 1

実際には、コンポーネントを "ngModelに準拠させる"が、カスタム値アクセサを実装する必要があります。ここで

が行う方法です：

@Component({ 
    selector: 'switchery-checkbox', 
    template: ` 
    <input #checkbox type="checkbox" (change)="onChange($event.target.checked)" class="js-switch"/> 
    `, 
    (...) 
}) 
export class SwitcheryComponent implements AfterViewInit, ControlValueAccessor { 
    @Input() options: Switchery.Options = {}; 
    @Input() disabled:boolean = false; 
    @ViewChild('checkbox') checkbox: any; 

    value: boolean = false; 

    onChange = (_) => {}; 
    onTouched =() => {}; 

    writeValue(value: any): void { 
    this.value = value; 
    this.setValue(this.value); 
    } 

    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } 
    registerOnTouched(fn:() => void): void { this.onTouched = fn; } 

    ngAfterViewInit() { 
    this.switcher = new switchery(this.checkbox.nativeElement, 
       this.options); 
    this.setValue(this.value); 
    this.setDisabled(this.disabled); 
    } 

    ngOnChanges(changes: {[propName: string]: SimpleChange}) { 
    if (changes && changes.disabled) { 
     this.setDisabled(changes.disabled.currentValue); 
    } 
    } 

    setValue(value) { 
    if (this.switcher) { 
     var element = this.switcher.element; 
     element.checked = value 
    } 
    } 

    setDisabled(value) { 
    if (this.switcher) { 
     if (value) { 
     this.switcher.disable(); 
     } else { 
     this.switcher.enable(); 
     } 
    } 
    } 
} 

最後に、あなたは、コンポーネントのprovidersに値アクセサを登録する必要があります：あなたはあなたのディレクティブこの方法を使用することができます

const CUSTOM_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => SwitcheryComponent), multi: true}); 

@Component({ 
    selector: 'switchery-checkbox', 
    template: ` 
    <input #checkbox type="checkbox" (change)="onChange($event.target.checked)" class="js-switch"/> 
    `, 
    providers: [ CUSTOM_VALUE_ACCESSOR ] 
}) 
export class SwitcheryComponent implements AfterViewInit, ControlValueAccessor { 
    (...) 
} 

この方法：

<switchery-checkbox [disabled]="disabled" 
     [(ngModel)]="value" ngControl="cb" 
     #cb="ngForm"></switchery-checkbox> 

このplunkr：https://plnkr.co/edit/z1gAC5U0pgMSq0wicGHC?p=previewを参照してください。

詳細（セクション "NgModel互換成分"）のために、この記事を参照してください。

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/