CODEWITHSUNDEEP
inputangular
Sergino
Sergino

Reputation: 10838

Angular2 how to clear the input value on submit without passing dom element

I've read that it is not good practice to pass the dom element so I come up with such view: 

         <div>
            <input #message placeholder="message" (keyup.enter)="add(message.value)" />
            <button (click)="add(message.value)">Add+</button>
            <p>
                the message is {{ message.value }}
            </p>
        </div>

As you can see I am passing the message.value to my add method

add(message: string) {
        this.message = message;
        console.log(this.message);
        this.messengerService.add(this.message);
    }

But how can I clear the so inside add method so input #message won't containg any text? I tried message = null; but it is does not work.

Upvotes: 1

Views: 8290

Answers (3)

Pardeep Jain
Pardeep Jain

Reputation: 86800

Why to use extra Parameter when angular provides two way data binding in the form of [(ngModel)]. you can use ngModel to get notified both side on view as well as in the class/controller. no need to pass extra parameter along with method call. so you can use this simplified approach here

<div>
   <input placeholder="message" [(ngModel)]="message" (keyup.enter)="add()"/>
      <button (click)="add(); message = null">Add+</button>
        <p>
           the message is {{ message }}
         </p>
  </div>

message: string = null;
 add() {
      console.log(this.message);
      // this.messengerService.add(this.message);
    }

here is working demo for the same Working Plunker

The ngModel input property sets the element's value property and the ngModelChange output property listens for changes to the element's value. The details are specific to each kind of element and therefore the NgModel directive only works for elements, such as the input text box.

Upvotes: 1

candidJ
candidJ

Reputation: 4359

you can use ngModel instead of #elem.value : 

  <div>
   <input placeholder="message" [(ngModel)]="message" (keyup.enter)="add(message)"/>
      <button (click)="add(message)">Add+</button>
        <p>
           the message is {{ message }}
         </p>
  </div>

and then clear the input value by adding

  this.message = null;

in add function. This will work :

    add(message: string) {
      this.message = message;
      console.log(this.message);
      this.messengerService.add(this.message);
      this.message = null;
    }

your message.value attribute in view was not mapped to this.message in modal

Upvotes: 1

CM_Expat
CM_Expat

Reputation: 246

If you extend your response with (blur)= , you can reset the input field as follows:

<div>
        <input #message placeholder="message (keyup.enter)="add(message.value)" (blur)="add(message.value); message.value='' " />
        <button (click)="add(message.value)">Add+</button>
        <p>
            the message is {{ message.value }}
        </p>
    </div>

Note added: (blur)=add(message.value); message.value=''

Upvotes: 1

Related Questions