1

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.

2
  • try this.message="" or this.message=undefined. Commented Dec 1, 2015 at 6:25
  • yeah I tried that as well Commented Dec 3, 2015 at 0:09

3 Answers 3

1

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=''

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

Comments

1

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

Comments

1

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.