Angular2でパイプが正しく動作しないのはなぜですか？

Question

タスクは単純です。入力が特定の数よりも少ない数だけ入力されている必要があります。

export class MaxNumber implements PipeTransform{ 
    transform(value, [maxNumber]) { 
     value = value.replace(/[^\d]+/g,''); 
     value = value > maxNumber?maxNumber:value; 
     return value; 
    } 
} 

して、テンプレートに呼ばれるもののように：私はそのようにした

<input type="text" [ngModel]="obj.count | maxNumber:1000" (ngModelChange)="obj.count=$event" /> 

しかし、それは非常に奇妙なclickに動作します。

私はおそらく何かを誤解しています。誰かがその行動を説明するなら、私は感謝します。

Answer 1

カスタム値のアクセサーが必要だと思います。この方法で、値を確認してからngModelに設定することができます。あなたはobj.countはここで1000

より上位ではありません。この方法では、サンプルの実装です：

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

@Directive({ 
    selector: 'input', 
    host: {'(input)': 'customOnChange($event.target.value)'}, 
    providers: [ CUSTOM_VALUE_ACCESSOR ] 
}) 
export class MaxNumberAccessor implements ControlValueAccessor { 
    onChange = (_) => {}; 
    onTouched =() => {}; 

    constructor(private _renderer: Renderer, private _elementRef: ElementRef) {} 

    writeValue(value: any): void { 
    var normalizedValue = (value == null) ? '' : value; 
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', normalizedValue); 
    } 

    customOnChange(val) { 
    var maxNumber = 1000; 
    val = val.replace(/[^\d]+/g,''); 
    val = val > maxNumber?maxNumber:val; 
    this.onChange(val); 
    } 

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

そのdirectives属性には、このディレクティブを設定するよりも、それを使用するようにコンポーネントに行うには何もありません：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     Number: <input type="text" [(ngModel)]="obj.count" /> 
     <p>Actual model value: {{obj.count}}</p> 
    </div> 
    `, 
    directives: [MaxNumberAccessor] 
}) 
export class App { 
    (...) 
} 

対応するplunkr：https://plnkr.co/edit/7e87xZoEHnnm82OYP84o?p=preview。