When does "$viewValue" become "NOT undefined"? - angularjs

Question

Here is my example to count value length in the input text:
let app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.submit = function ($event, form) {
$event.preventDefault();
alert(form.myinput.$viewValue.length)
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form id="myForm" ng-model="myForm" name="myForm" novalidate ng-app="myApp" ng-controller="myController">
<input ng-model="myinput" name="myinput" />
Submit
</form>
The problem: If the value in the input is null or empty (the input contained nothing before), it would throw this error when clicking on submit:
TypeError: Cannot read property 'length' of undefined
at a.$$childScopeClass.$$childScopeClass.$scope.submit
Then, I've tried to type something in the input, delete it and click on submit again. It should work.
My question: for input[type=text], is there nothing like default value with property $viewValue?
I mean: if the value is null or empty, form.myinput.$viewValue should be ''. So, the length must be 0.

Answer 1

Try this :
It will check first for null and empty value of the text box and then perform operation according to that.
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.submit = function () {
if($scope.myinput != null && $scope.myinput.length > 0) {
alert($scope.myinput.length);
} else {
alert("Please enter the text");
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form id="myForm" name="myForm" novalidate ng-app="myApp" ng-controller="myController">
<input ng-model="myinput" name="myinput" />
<button ng-click="submit()">Submit</button>
</form>

Answer 2

You need to access it via the scope. $scope.form.myinput.$viewValue.length
That being said I do not believe that controllers should know about form as forms are a view concept. Anything to do with the form variable should not make their way into your controllers. I am a big fan of not passing the $scope into your controllers at all and using the controller as syntax.

Answer 3

Here is how I would do it. This will only work with Angular 1.3 or greater as 1.2 doesn't support controller as.
let app = angular.module('myApp', []);
app.controller('myController', function () {
var vm = this;
vm.submit = function () {
alert(vm.myinput);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<form id="myForm" name="myForm" novalidate ng-app="myApp" ng-controller="myController as vm">
<input ng-model="vm.myinput" name="myinput" />
<button ng-click="vm.submit()">Submit</button>
</form>