CODEWITHSUNDEEP
angularangular-ngmodelangular2-formsangular2-ngmodel
J.Rem
J.Rem

Reputation: 545

Angular 2 [(ngModel)] throws error when placed between <form></form>

I have a component.html with a form with a code that looks like this:

<div *ngIf="client">
    //More divs
   <form class="form-horizontal" (ngSubmit)="onSubmit()" #clientForm="ngForm">
      <div>
         <input class="form-control" #name="ngModel" [(ngModel)]="client.name" required>
      </div>
    //End of more divs
   </form>
</div>

But I keep getting an error when the componente is rendering the html:

Uncaught (in promise): TypeError: undefined is not an object

It only happens if I place the input tag between the form. Where it should be. If I place the input tag above and prior to the form tag it renders just fine with the data. Why could this be happening?

Upvotes: 1

Views: 1450

Answers (2)

silentsod
silentsod

Reputation: 8335

You're missing your name attribute on the input control. Should be

<input class="form-control" name="clientName" #name="ngModel" [(ngModel)]="client.name" required>

If you delete the name attribute and open up the console you'll see the error message as follows:

If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

Here's a Plunker

Upvotes: 2

Vova Bilyachat
Vova Bilyachat

Reputation: 19494

Its not about placing i assume you have not defined object client since you are binding to client.name; You must init to default value like

client = {};

In your component or real client object

PS. I would like to recommend you to stop using NGModel go with FormGroup. After you start using it you will love them :) fast, easy and flexible

Upvotes: 0

Related Questions