Neden Boru Angular2'de düzgün çalışmıyor?

Question

Görev basittir, girdinin yalnızca belirli bir sayının altındaki rakamlara girilmesi gerekir.

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

ve sonra şablonda denen bir şey gibi: Ben öyle yaptım

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

Ama çok garip click çalışır.

Muhtemelen bir şeyi yanlış anladım. Birisi bu davranışı açıklarsa minnettar olurum.

Answer 1

Bence bir özel değer erişimcisine ihtiyacınız var. Bu şekilde ngModel'da ayarlamadan önce değeri kontrol edebilirsiniz.

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

onun directives niteliğine Bu yönergede daha bunu kullanmak için bileşende ilgisi yoktur:

İşte 1000

örnek bir uygulama olduğundan daha bu şekilde size obj.count üst olmayacaktır

İlgili plunkr: https://plnkr.co/edit/7e87xZoEHnnm82OYP84o?p=preview.