uppercase directive not update input angular

Question

this uppercase directive not work on angular.... if i print a console.log() to see value on format method i can see the value of i input, but the text not update to uppercase on inputText;

my declaration on html

<input type="text" uppercase >

import {Directive, Input, Output, EventEmitter, OnInit} from 'angular2/core';

@Directive({
    selector: '[uppercase]',
    host: {
        '[value]': 'uppercase',
        '(input)': 'format($event.target.value)'
    }
})
export class Uppercase implements OnInit {

    @Input() uppercase: string;
    @Output() uppercaseChange: EventEmitter<string> = new EventEmitter<string>();

    constructor() {
    }

    ngOnInit() {
        this.uppercase = this.uppercase || '';
        this.format(this.uppercase);
    }

    format(value) {
        value = value.toUpperCase();
        this.uppercaseChange.next(value);
    }
}

how i can do to text uppercase?

What do you want to archieve exactly. You may need to use your directive in a template or not ? Can you show your template code ? — billyjov
– billyjov, Commented Sep 23, 2018 at 22:15
hi. I updated the code, I try do it in only one input text <input type="text" appUppercaseText > — Davi Resio
– Davi Resio, Commented Sep 24, 2018 at 1:16

billyjov · Accepted Answer · 2018-09-24 17:48:41Z

2

You may need to update your template like this <input type="text" uppercase > in other to apply all changes from your Directive.

But it's important to correct your logic because uppercase directive will be applied to a nativeElement like input.

So you may need to have to implement the ControlValueAccessor interface and ajust your directive.

Here a example how you can do this (I have adapted your code): Uppercase directive on stackblitz

I added some comment to the code.

Let me know if it's that what you want to archieve.

Edit (look comments below)

if you look for a easier way to create your directive and keep the two things you need Input text should be Uppercase and placeholder should be lowercase, you can simply do something like following

uppercase.directive.ts

import { Directive,ElementRef, HostListener } from '@angular/core';

@Directive({
 selector: '[uppercase]'
})
export class UppercaseDirective {
  constructor(public ref: ElementRef) { }

  @HostListener('input', ['$event']) onInput(event) {
     this.ref.nativeElement.value = event.target.value.toUpperCase();
  }
}

your.template.html

<input placeholder="placeholder lowercase" uppercase type='text'>

I made here another demo on stackblitz

edited Sep 24, 2018 at 17:48

answered Sep 24, 2018 at 10:08

billyjov

2,99021 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Davi Resio Over a year ago

its work, thank you very much, i will study more about ControlValueAccessor

Davi Resio Over a year ago

the placeholder are uppercase to, but i want placeholder lowercase and only value uppercase, you know how solve it?

Feng Zhang · Accepted Answer · 2024-10-23 14:21:48Z

0

import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[uppercase]'
})
export class UppercaseDirective {

  constructor(private readonly control: NgControl) { }

  @HostListener('input', ['$event.target'])
  protected onInput(input: HTMLInputElement): void {
    const caretPos = input.selectionStart;
    this.control.control.setValue(input.value.toUpperCase());
    input.setSelectionRange(caretPos, caretPos);
  }

}

answered Oct 23, 2024 at 14:21

Feng Zhang

2,0001 gold badge21 silver badges22 bronze badges

Collectives™ on Stack Overflow

uppercase directive not update input angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related