Angular2 - Input-Value undefined

Question

I want to pass the Input-Value to the function by clicking the Button.

<md-card> 
     <md-input-container><input mdInput ngDefaultControl [ngModel]="newInput">
     </md-input-container> 
     <button md-raised-button (click)="newInputValue(newInput)">Update</button>
</md-card>

But the value of newInput in the function newInputValue(..) is always undefined.

Aravind · Accepted Answer · 2017-03-12 19:41:31Z

5

In the below link you are using property binding(one way), so you cannot access the variable in the DOM

 <md-input-container><input mdInput ngDefaultControl [ngModel]="newInput">

Change the [ngModel] to [(ngModel)]

Alternatively,

 <div class="button-row">
  <md-input-container><input mdInput #inputVal [ngModel]="newInput">
     </md-input-container> 
     <button md-raised-button (click)="newInputValue(inputVal.value)">Update</button>
  </div>

In the above case you will have the value in your method, so your one way databinding remains untouched

LIVE DEMO of second option

edited Mar 12, 2017 at 19:41

answered Mar 12, 2017 at 19:28

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

Collectives™ on Stack Overflow

Angular2 - Input-Value undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related