Angular2 Form variable does not work without ngModel

Question

I have the html below:

<form #f="ngForm">
  <input type="text" name="dd" value="abc" (change)="foof(f.form.value)"/>
</form>

However, the f.form.value has nothing in it when foof function is called when I change the input text value. Only if I add ngModel to the input element like below,

 <input type="text" name="dd" [ngModel]="abc" (change)="foof(f.form.value)"/>

Then f.form.value has the dd input text value. I don't understand why is this. Do I have to use ngModel to get the form variable to work right?

Note: For certain reasons in our app, we have to submit the whole form when the dd input is changed, so I do need foof(f.form.value). I also don't want two way binding, just one way binding due to variations between the model and the html layout.

AT82 AT82 · Accepted Answer · 2016-12-30T20:15:46

I guess you could make a hack like this:

<form #f="ngForm">
  <input type="text" id="someInput" value="abc" (change)="foof()"/>
</form>

and

x:any;

foof() {
    this.x = document.getElementById("someInput");
    console.log(this.x.value);
}

Don't know your app, so this (terrible) hack might not at all suit your needs.

Angular2 Form variable does not work without ngModel

2 Answers