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.

AVJT82 · Accepted Answer · 2016-12-30 20:15:46Z

1

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.

answered Dec 30, 2016 at 20:15

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

2 Comments

vanval Over a year ago

Thanks!! This solved this problem and simultaneously solved another problem for me where I have to have a form spread across multiple components and was not using reactive forms but template driven forms. Using javascript made that possible too!

AVJT82 Over a year ago

Great! Glad I could help! :)

smoyer · Accepted Answer · 2016-12-30 18:44:38Z

0

I don't think this is how you're supposed to be binding to an input field.

You should be doing it like this,

 <input type="text" name="dd" [(ngModel)]="abc" (ngModelChange)="foof(abc)"/>

answered Dec 30, 2016 at 18:44

smoyer

8,2723 gold badges19 silver badges27 bronze badges

1 Comment

vanval Over a year ago

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.

Collectives™ on Stack Overflow

Angular2 Form variable does not work without ngModel

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related