CODEWITHSUNDEEP
angularangular-ngmodel
ismail
ismail

Reputation: 28

Angular 4 - [(ngModel)] doesn't update in production site

I work on an Angular 4 app. I have a modal where I enter a supplier info and create one. I have a select box for the city. 

  <select class="custom-select form-control" [(ngModel)]="newSupplier.city">
       <option *ngFor="let city of cities" [ngValue]="city">{{city.name}}</option>
  </select>

When I run the app in my local machine, everything works fine. When I select a city, the newSupplier variable is updated. But when I deploy the app to heroku, the app works fine but when I select the city, newSupplier variable is not updated. PS: I have other attributes in newSupplier which I enter using input such as:

<input class="form-control" type="text" [(ngModel)]="newSupplier.name">

This works both in my local and when I deploy.

I really don't know where this problem comes from. Thanks for helping.

Upvotes: 0

Views: 536

Answers (3)

Mateus Milczewski
Mateus Milczewski

Reputation: 1

Try the following:

Template.html

<select class="custom-select form-control" [(ngModel)]="citySelected">
    <option 
      *ngFor="let city of cities" 
      [ngValue]="city">
        {{city.name}}
    </option>
</select>

And on your component, attribute citySelected to newSupplier.city.

Upvotes: 0

funkizer
funkizer

Reputation: 4897

Hmm are your inputs inside a <form>? If yes, add a name="supplierCity" to the select and a name="supplierName" to the the input, as those are required in that case.

Ie. could be that Heroku installs a later version of NG than your local one (have you locally installed the latest versions btw?) and crashes where your local version doesn't.

Having said that, I don't know much about deploying to heroku, just guessing here, cause I know the missing name attr error is runtime only, and runtime errors can cause NgModel to act weird even though the page renders and all (should show an error in the console though...).

Upvotes: 1

andrea06590
andrea06590

Reputation: 1299

Hello don't you need the reference too ?

<input #name="ngModel" class="form-control" type="text" [(ngModel)]="newSupplier.name">

Another possibility could be to add a (change) event handler

Upvotes: 0

Related Questions