Question

48

Angular: change value on input event

rated 0 times [ 50] [ 2] / answers: 1 / hits: 19804 / 7 Years ago, fri, july 7, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

armandoh

Add To Favorites

Follow

Total Points: 208

Total Questions: 94

Total Answers: 112

Location: South Sudan

Member since Sun, Jul 11, 2021

3 Years ago

answered 7 Years ago dominickmackenziet · Accepted Answer

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;

}