Warum funktioniert Pipe in Angular2 nicht richtig?

Question

Die Aufgabe ist einfach, es ist notwendig, dass die Eingabe nur Zahlen unterhalb einer bestimmten Nummer eingegeben wurde. Ich tat so:

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

und dann in der Vorlage namens so etwas wie:

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

Aber es funktioniert sehr seltsam click.

Ich habe wahrscheinlich etwas falsch verstanden. Ich wäre dankbar, wenn jemand dieses Verhalten erklären würde.

Answer 1

Ich denke, dass Sie eher einen benutzerdefinierten Wert Accessor benötigen. Auf diese Weise können Sie den Wert überprüfen, bevor Sie ihn in ngModel setzen. Auf diese Weise kann obj.count nicht oberen sein als 1000.

Hier eine Beispielimplementierung ist:

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; } 
} 

Es gibt nichts in der Komponente zu tun ist, es zu benutzen, als diese Richtlinie in sein directives Attribut festlegen:

Entsprechende Plunkr: https://plnkr.co/edit/7e87xZoEHnnm82OYP84o?p=preview.