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, Jul 07 '17 at 08:14
I have to show popup with message "SMS length is greater that 250". In example i removed that code. — iChrome, Jul 07 '17 at 08:19

score 5 · Accepted Answer · 2017-07-07T08:20:38.573

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 07 '17 at 08:20

answered Jul 07 '17 at 08:18

Woops, forgot to change the property binding ! sorry. – Jul 07 '17 at 08:20
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. – iChrome Jul 07 '17 at 08:29
Then use `keypress` – Jul 07 '17 at 08:31
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 Jul 07 '17 at 08:35
`keypress` doesn't work because it addes pressed symbol after execution `changeSMSMessage()`. And in the end i have 11 symbols instead of 10 – iChrome Jul 07 '17 at 08:38
Go through this blog you might sort out what you are trying to get https://www.bennadel.com/blog/3089-learning-about-the-input-event-from-angular-2.htm – mayur Jul 07 '17 at 08:45

score 0 · Answer 2 · answered Aug 24 '20 at 14:15

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);
      });
  }
}

Angular: change value on input event

2 Answers2

Linked