Как реализовать трубку во входном типе при использовании Angular2?

Question

Я новичок в angularJS2, и я пытаюсь реализовать трубу в тексте типа ввода формы. Например, если у меня есть тег ввода, как этот

<input type="text" class="col-lg-7 small rounded form-control" formControlName="firstName" /> 

Я хочу значение, введенное в текстовое поле, чтобы быть в верхнем регистре, мы можем достичь этого внутри входного элемента формы?

Answer 1

Невозможно использовать трубы на входах.

Однако вы можете запустить свою трубу в рамках метода ввода.

this.toUpper = new UpperCasePipe().transform(input); 

Надежда, что помогает

Answer 2

1 - Вы не можете использовать каналы на входы. Для достижения такого рода вещи вы могли бы использовать (keyup)событие:

<input 
    type="text" 
    class="col-lg-7 small rounded form-control" 
    formControlName="firstName" 
    (keyup)="upperValue($event.target.value)"> 

Компонент:

upperValue(value: string) { 
    this.formGroup.patchValue({ 
    firstName: value.toUpperCase() 
    }); 
} 

STACKBLITZ DEMO

---

2 - Если вы хотите, чтобы показать оригинальный текст для пользователя и изменить его «за кулисами», вы можете создать директиву:

@Directive({ 
    selector: '[appUppercase]' 
}) 
export class UppercaseDirective implements OnInit { 

    private readonly destroySubject$ = new Subject<void>(); 

    constructor(
    private readonly ngControl: NgControl 
) { } 

    ngOnDestroy(): void { 
    this.destroySubject$.next(); 
    this.destroySubject$.complete(); 
    } 

    ngOnInit(): void { 
    this.ngControl.control.valueChanges.pipe(
     takeUntil(this.destroySubject$) 
    ).subscribe(value => { 
     const newValue = value.toUpperCase(); 

     this.ngControl.control.setValue(newValue, { 
     emitEvent: false, 
     emitModelToViewChange: false, 
     emitViewToModelChange: false 
     }); 
    }); 
    } 
} 

STACKBLITZ DEMO

---

3 - Если вы хотите, чтобы отобразить модифицированный текст для пользователя и поддерживать его в нижнем регистре formControl, изменить следующие директивы в директиве:

... 
this.elementRef.nativeElement.value = value.toUpperCase(); 

this.ngControl.control.setValue(value.toLowerCase(), { 
    emitEvent: false, 
    emitModelToViewChange: false, 
    emitViewToModelChange: false 
}); 
... 

STACKBLITZ DEMO