2017-03-29 26 views
0

私はカスタムフォームコントロールを作っているとしましょう。これはできますか?ngModelChangeをカスタムフォームコントロールで使用する必要がありますか?

<custom-control [ngModel]="myModelVariable" (ngModelChange)="modelHasChanged($event)"></custom-control> 

[(ngModel)]は私が作成したすべてのフォームコントロールで動作させることができますが、変更を確認することはできません。私のコンポーネントを使用する多くの人々がこれを必要としています。@Output EventEmittersを作成せずにそれを行うためのきれいな方法があるのだろうかと思います。私は何か正しくやっていないと思っていますが、多分私は間違っています。

これは私が理解し、パターン次のサンプル・コンポーネントの実装です:問題のコンポーネントのいくつかは、私たちの問題故に、セッターにonChangedCallbackを呼び出していなかった、精密検査の後

@Component({ 
    selector: 'custom-control', 
    providers: [ 
    { provide: NG_VALUE_ACCESSOR, useClass: CustomControlComponent, multi: true } 
    ] 
}) 
export class CustomControlComponent implements ControlValueAccessor { 

    private onChangeCallback: (_: any) => void = (_: any) => {}; 
    private onTouchedCallback:() => void =() => {}; 

    private innerValue: any; 

    get value(): any { 
    return this.innerValue; 
    } 

    set value(val: any) { 
    if (val !== this.innerValue) { 
     this.innerValue = val; 
     this.onChangeCallback(this.innerValue); 
    } 
    } 

    writeValue(val: any) { 
    if (val !== this.innerValue) { 
     this.innerValue = val; 
    } 
    } 

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

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

} 
+1

'[(ngModel)] =" xxx "'が動作する場合、 '(ngModelChange)=" xxx = $ event "'も同様に動作します。私は何が問題を引き起こすのか見ていない。 –

答えて

0

を。他は正しく実装されていませんでした。

ご迷惑をおかけして申し訳ありません、角度の世界。

関連する問題