I integrated a form into a view within my Angular JS 1.2.6 application.
<div class="container" ng-controller="LoginCtrl as signin">
<div class="row">
<div class="col-md-4">
<form name="signin.myForm" novalidate autocomplete="off">
<h1>Sign In</h1>
<div class="form-group" ng-class="{'has-error': (signin.myForm.name.$error.required || signin.myForm.name.$error.minlength) && signin.myForm.name.$dirty}">
<label>Name</label>
<input class="form-control" type="text" name="name" ng-model="signin.myForm.data.name" required ng-minlength="3">
<span class="help-block" ng-show="signin.myForm.name.$error.required && signin.myForm.name.$dirty" >Name is required.</span>
<span class="help-block" ng-show="signin.myForm.name.$error.minlength && signin.myForm.name.$dirty" >Must be at least 3 characters.</span>
</div>
<button class="btn btn-primary" ng-disabled="!signin.myForm.$valid" ng-click="signin.submit()">Sign in</button>
</form>
</div>
The corresponding controller looks like this:
app.controller('LoginCtrl', ['$log',function($log){
var ctrl = this;
ctrl.submit = function(){
console.log(ctrl.myForm);
if(ctrl.myForm.$valid){
console.log('the form is valid');
}
};
}]);
Upon examination, the process of adding the form field's data to the same scope as the signin using
ng-controller="LoginCtrl as signin"signin.myForm.name.$error.requiredIs this the recommended approach? While it functions properly, as a beginner, this setup seems overly complicated. Is there a more effective practice for achieving the same outcome?