Пользовательский компонент ввода флажка, созданный с помощью Switchery

Question

Я пытаюсь создать пользовательский элемент флажка в стиле Switchery, который может использоваться в форме, как и любой другой компонент <input type="checkbox" ... />.

код у меня сейчас заботится о стилизации:

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-compliant», но реализовать специальный аксессуар.

Вот способ сделать:

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