Açısal 2 Verileri değiştirirken metin kutusunun sonundaki imleç atlama

Question

Ad alanında bazı kısıtlamalar var, bu nedenle aşağıdaki gibi yönergeyi kullanarak ad alanını doğrulamaya çalışıyorum. İç yönerge Geçerli adı kontrol etmek ve geçerli adın yerine valueAccessor.writeValue(newVal) 'u kullanarak metin kutusuna değiştirilmek üzere normal ifadeyi kullanıyorum. Burada, metin kutusundaki imleç atlamada bazı sözcüklerin ortalarını yazmaya çalışıyorum. Orada bir odak noktası ya da değil, seçim olmadığını aslında DefaultValueAccessor gelir

@Directive({ 
    selector: '[validateName]', 
    host: { 
     '(ngModelChange)': 'onInputChange($event, false)', 
     '(keydown.backspace)': 'onInputChange($event.target.value, true)', 
     '(focusout)': 'removeClass()' 
    } 
}) 

export class NameValidator { 

    constructor(public model: NgControl,public renderer: Renderer, public el: ElementRef) { } 

    onInputChange(event, backspace) { 
     if (!backspace) { 
      // Remove invalid characters (keep only valid characters) 
      var newVal = event.replace(/^[0-9\s]/g, '').replace(/[^A-Za-z0-9_$]/g,''); 

      // Add class for invalid name. 
      if (/^[0-9\s]/g.test(event) || /[^A-Za-z0-9_$]/g.test(event)) { 
       this.renderer.setElementClass(this.el.nativeElement, 'invalid-name', true); 
      } 
      else { 
       this.renderer.setElementClass(this.el.nativeElement, 'invalid-name', false); 
      } 
      // set the new value 
      this.model.valueAccessor.writeValue(newVal); 
     } 
    } 
    removeClass() { 
     this.renderer.setElementClass(this.el.nativeElement, 'invalid-name', false); 
    } 
} 

Answer 1

, körlemesine öğe değerini yazar. Kendimi kurtarıcı bir form kullandığım ve DefaultValueAccessor'u geçersiz kılmak zorunda kaldım ve yalnızca farklı bir değer yazıyordu (bu sizin için işe yaramayacağını düşünüyorum). ,) aşağıya bakınız:

export const DEFAULT_VALUE_ACCESSOR: any = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => DefaultValueAccessor), 
    multi: true 
}; 

@Directive({ 
    selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]", 
    host: {"(input)": "onChange($event.target.value)", "(blur)": "onTouched()"}, 
    providers: [DEFAULT_VALUE_ACCESSOR] 
}) 
export class DefaultValueAccessor implements ControlValueAccessor { 
    onChange = (_: any) => { 
    }; 
    onTouched =() => { 
    }; 

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

    writeValue(value: any): void { 
     const normalizedValue = value == null ? "" : value; 
     // line bellow is the only line I added to the original one 
     if ((this._elementRef.nativeElement as HTMLInputElement).value !== normalizedValue) 
      this._renderer.setElementProperty(this._elementRef.nativeElement, "value", normalizedValue); 
    } 

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

    registerOnTouched(fn:() => void): void { 
     this.onTouched = fn; 
    } 

    setDisabledState(isDisabled: boolean): void { 
     this._renderer.setElementProperty(this._elementRef.nativeElement, "disabled", isDisabled); 
    } 
} 

davanızı için, giriş seçimle başa gerekebilir: Eğer giriş değiştirdiğiniz gibi doğru olmayabilir

let start=this.el.nativeElement.selectionStart; 
let end = this.el.nativeElement.selectionEnd; 
this.model.valueAccessor.writeValue(newVal); 
this.el.nativeElement.setSelectionRange(start,end); 

Not o ...