Angularjs cannot read property firstname of undefined - angularjs

Question

I have a form such as
Html:
<form ng-submit="log(user)">
<input type="text" ng-model="user.firstname">
<input type="text" ng-model="user.lastname
</form>
Angular:
.controller ('', function ($scope){
$scope.log = function (user){
console.log (user.firstname)
}
})
This was working before but now it throws cannot read property user.firstname
Please help me. Thank you

Answer 1

AngualarJs is rich in two way data binding. You didn't need to pass the scope object user in the function log. Its available in controller always with updated value. Just Initialise the user as scope object and try the code
In html:
<form ng-submit="log()">
<input type="text" ng-model="user.firstname" />
<input type="text" ng-model="user.lastname" />
</form>
In Js
.controller ('', function ($scope){
$scope.user = {}; // Declare here
$scope.log = function (){
console.log ($scope.user.firstname);
}
})

Answer 2

if user parameter is undefined you can't access firstname on undefined value, You can try below snippet to solve your problem.
.controller ('', function ($scope){
$scope.log = function (user){
if(user){ //Strict Check: toString.call(user) == "[object Object]"
console.log (user.firstname)
}
}
})

Answer 3

This is full working example, somewhat similar to yours.
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
Please try this.
Thanks
Amit

Answer 4

Remove below code
ng-submit="log(user)"
and remove button type submit
and add below line
<input type="button" ng-click="log()"/>
Your js file
$scope.log=function(){
console.log($scope.firstname);
console.log($scope.lastname);
}