Quiero crear la directiva Angular 2 que marcará espacios solo desde el principio y el final del texto que el usuario ha escrito en el campo de entrada.
tengo campo de entrada
<input trim name="fruit" [(ngModel)]="fruit"/>y directiva
import {Directive, ElementRef} from "@angular/core"; @Directive({ selector: 'input[trim]', host: {'(blur)': 'onChange($event)'} }) export class TrimWhiteSpace { constructor(private cdRef:ChangeDetectorRef, private el: ElementRef){} onChange($event:any) { let theEvent = $event || window.event; theEvent.target.value = theEvent.target.value.trim(); } }que funciona bien, elimina espacios y cambia el texto en el campo de entrada, pero el problema es que el valor en la variable "fruta" de ngModel no cambia y aún contiene texto con espacios al principio o al final.
También traté de agregar lo siguiente al método onChange
this.el.nativeElement.value = theEvent.trim(); this.cdRef.detectChanges();y cambie la forma (desenfoque) a (ngModelChange), pero el texto en ngModel no se ve afectado.
¿Alguna sugerencia?
para evitar confusiones al cambiar el nombre del atributo del modelo.
<input name="fruit" [(ngModel)]="fruit1" (change)="fruit1=fruit1.trim()"/>¿Has mirado https://github.com/anein/angular2-trim-directive ?
Parece que abordaría su caso de uso
CommonController en el ejemplo es solo una clase base que activa el sujeto en el gancho onDestroy para cancelar la suscripción de observable.
@Directive({ selector: '[appTrimOnBlur]' }) export class TrimOnBlurDirective extends CommonController implements OnInit { constructor(private elementRef: ElementRef, @Self() private ngControl: NgControl) { super(); } ngOnInit(): void { fromEvent(this.elementRef.nativeElement, 'blur').pipe( takeUntil(this.unsubscribeOnDestroy) ).subscribe(() => { const currentValue: string = this.ngControl.value.toString(); const whitespace: string = ' '; if (currentValue.startsWith(whitespace) || currentValue.endsWith(whitespace)) { this.ngControl.control.patchValue(currentValue.trim()); } }); } }Puede crear una directiva de recorte genérica, que hará recorte no solo para el evento de desenfoque, sino para cualquiera que proporcione:
@Input() public trimEventName: string = 'blur'; constructor(private elementRef: ElementRef, @Self() private ngControl: NgControl) { super(); } ngOnInit(): void { fromEvent(this.elementRef.nativeElement, this.trimEventName).pipe( takeUntil(this.unsubscribeOnDestroy) ).subscribe(() => { const currentValue: string = this.ngControl.value.toString(); const whitespace: string = ' '; if (currentValue.startsWith(whitespace) || currentValue.endsWith(whitespace)) { this.ngControl.control.patchValue(currentValue.trim()); } }); }