I'm working on an AngularJS application and encountering an issue with a form that is populated using ng-value.
The user fills in the input field, sees the text, but when they click the 'change' button, it suddenly becomes undefined. Any ideas on what might be causing this?
This is my controller code:
// This is fictional data; wineById will be a JSON object.
$scope.wineById = {"id":"4","name":"fdfvs1","percentage":"vcxz1"}
$scope.edit = function () {
var wine = {
id:$scope.wineById.id,
name:$scope.name,
percentage:$scope.percentage
};
console.log($scope.name, $scope.percentage);
};
HTML:
<form novalidate ng-submit="edit()">
<label>ID of wine: <input type="text" ng-value="wineById.id" ng-model="id" ng-disabled="true"></label> <br>
<label>Name of wine: <input type="text" ng-value="wineById.name" ng-model="name"></label> <br>
<label>Percentage of wine: <input type="text" ng-value="wineById.percentage" ng-model="percentage"></label> <br>
<input type="submit" value="Change">
</form>
Scenario 1:
The fields have existing input. Pressing the button without changing the data results in everything becoming undefined.
Scenario 2 (the one that works):
The fields have existing input. Changing all the fields with different data and pressing the button successfully updates everything.
Any suggestions on how to address scenario 1?