Angular: change value on input event

Question

I have textarea. I try to restrict width of value to 10 symbols. I am trying to cut value on input event.

<textarea [(ngModel)]="smsMessage" (input)="changeSMSMessage()"></textarea>

changeSMSMessage() {
  this.smsMessage = this.smsMessage.substr(0, 10);
  console.log(this.smsMessage);
}

But it doesn't work. I see that value was cut in changeSMSMessage() method, but on UI I see not changed value.
Plunker

When I changed event from input to keyup, it starts work properly. All characters after the tenth are deleted.

So, could someone explain why is input event doesn't update value in textarea?

what are the benefits behind doing this ?? You can directly use maxlength="10" attribute which will not allow user to type more than 10 symbols — mayur
– mayur, Commented Jul 7, 2017 at 8:14
I have to show popup with message "SMS length is greater that 250". In example i removed that code. — iChrome
– iChrome, Commented Jul 7, 2017 at 8:19

score 5 · Accepted Answer · 2017-07-07 08:20:38Z

5

You have several options :

1 - use the maxlength="10" tag of the text area :

<textarea [(ngModel)]="smsMessage" maxlength="10"></textarea>

2 - Use a reactive form control with a built-in validator :

3 - Control the input :

<textarea [(ngModel)]="smsMessage" (change)="changeSMSMessage()"></textarea>


// TS
changeSMSMessage() {
    this.smsMessage = this.smsMessage.length > 10 ? this.smsMessage.substr(0, 10), this.smsMessage;
}

edited Jul 7, 2017 at 8:20

answered Jul 7, 2017 at 8:18

user4676340

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

6 Comments

user4676340 Over a year ago

Woops, forgot to change the property binding ! sorry.

iChrome Over a year ago

1)I can't use maxlength="10" because i need to show popup with error message. 2) I will read this article. Thanks 3) (change) doesn't work. I changed event in Plunker, and it still doesn't cut width of smsMessage.

user4676340 Over a year ago

Then use keypress

iChrome Over a year ago

Also, as i said in question, this example is working with (keup)="changeSMSMessage()". But I want to understand why is it don't work with (input) event.

iChrome Over a year ago

keypress doesn't work because it addes pressed symbol after execution changeSMSMessage(). And in the end i have 11 symbols instead of 10

|

Tejas Savaliya · Accepted Answer · 2020-08-24 14:15:07Z

Use formControl and subscribe to it's valueChanges when your component is initialized, which will allow you to use rxjs operators for advanced requirements like performing http requests, apply a debounce until user finish writing a sentence, take last value and omit previous.

import {Component, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'some-selector',
  template: `
    <input type="text" [formControl]="searchControl" placeholder="search">
  `
})
export class SomeComponent implements OnInit {
  private searchControl: FormControl;
  private debounce: number = 400;

  ngOnInit() {
    this.searchControl = new FormControl('');
    this.searchControl.valueChanges
      .pipe(debounceTime(this.debounce), distinctUntilChanged())
      .subscribe(query => {
        console.log(query);
      });
  }
}

Collectives™ on Stack Overflow

Angular: change value on input event

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related