角度2 CheckboxControlValueAccessorは

Question

我々はCheckboxControlValueAccessorを実装する場合、我々は次のエラーを取得を実装します：

export declare class CheckboxControlValueAccessor implements ControlValueAccessor { 
private _renderer; 
private _elementRef; 
onChange: (_: any) => void; 
onTouched:() => void; 
constructor(_renderer: Renderer, _elementRef: ElementRef); 
writeValue(value: any): void; 
registerOnChange(fn: (_: any) => {}): void; 
registerOnTouched(fn:() => {}): void; 
setDisabledState(isDisabled: boolean): void; 

}

何が間違っていますか？

角度のバージョン：4.1.3 活字体：私は角2+のチェックボックスコンポーネントを必要とする場合2.3.4

Answer 1

、あなたがやろうとしているのと同じことを行うために直観的なように見えました。なぜチェックボックスで始めることができるのですか？あまりにも多くの時間を費やした後、私は黙ってControlValueAccessorを使うことにしました。

あなたがthis plnkrで見ることができるように、チェックボックスコンポーネントは次のように書くことができます。

import { Component, /*Input,*/ Renderer, ElementRef, forwardRef } from '@angular/core'; 
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; 

@Component({ 
    selector: 'my-checkbox', 
    template: ` 
     <div class="checkbox-container"> 
     <input type="checkbox" id="{{ controlID }}" 
       [checked]="checked" (change)="onChange($event)" /> 
     <label for="{{ controlID }}"></label> 
     </div> 
    `, 
    styles: [` 
     .checkbox-container { 
      background-color: #ddd; 
      width: 20px; 
      height: 20px; 
      position: relative; 
     } 
    `, ` 
     .checkbox-container input[type="checkbox"] { 
      visibility: hidden; 
     } 
    `, ` 
     .checkbox-container label { 
      width: 18px; 
      height: 18px; 
      position: absolute; 
      top: 1px; 
      left: 1px; 
      background-color: white; 
     } 
    `,` 
     .checkbox-container label:before { 
      content: ''; 
      width: 16px; 
      height: 8px; 
      border: 4px solid #000; 
      position: absolute; 
      border-top: none; 
      border-right: none; 
      transform: rotate(-50deg); 
      top: 1px; 
      left: 1px; 
      opacity: 0; 
     } 
    `, ` 
     .checkbox-container input[type="checkbox"]:checked + label:before { 
      opacity: 1; 
     } 
    `], 
    providers: [ 
    { 
     provide: NG_VALUE_ACCESSOR, 
     useExisting: forwardRef(() => CheckboxComponent), 
     multi: true 
    } 
    ] 
}) 
export class CheckboxComponent implements ControlValueAccessor { 
    static idCounter: Number = 0; 
    controlID: String; 
    //@Input() checked: Boolean; 
    checked: Boolean; 

    constructor(private renderer: Renderer, private elementRef: ElementRef) { 
    this.controlID = "myCheckbox" + CheckboxComponent.idCounter++; 
    } 

    propagateChange = (_: any) => { }; 
    onTouchedCallback:() => {}; 

    writeValue(value: any) { 
    if ((value !== undefined) && (value !== null)) { 
     this.checked = value; 
    } 
    } 

    registerOnChange(fn: any) { 
    this.propagateChange = fn; 
    } 

    registerOnTouched(fn: any) { 
    this.onTouchedCallback = fn; 
    }; 

    onChange(event) { 
    this.checked = event.target.checked; 
    this.propagateChange(event.target.checked); 
    } 
} 

と、このように使用することができます。

<form #form="ngForm" (ngSubmit)="submit(form.value)"> 
    <div> 
    <h2>Checkbox Demo Using {{ framework }}</h2> 
    </div> 
    <div> 
    <my-checkbox name="b1" [(ngModel)]="b1"></my-checkbox> 
    <my-checkbox name="b2" [(ngModel)]="b2"></my-checkbox> 
    <my-checkbox name="b3" [(ngModel)]="b3"></my-checkbox> 
    </div> 
</form> 

<pre>{{ form.value | json }}</pre> 

注：

1. controlIDユニークでなければなりません。これは、静的カウンタを使用して示されているように実行できます。
2. 外部ngModel変数で同じことを達成できるので、を の入力変数にすることにしました。
3. Readonlyと他の機能は、簡略化のために を省略しています。