Ajayv Ajayv - 1 month ago 7
AngularJS Question

Accessing ng-model in html from the controller in the component

This is my template html

<form name="myForm">
<label for="name"><span>Name*: </span>
<br>
<input
name="myName"
type="name"
id="name"
minlength="3"
maxlength="16"
autofocus="on"
required
placeholder=" Ajay"
ng-model="$ctrl.myName"
autocomplete="name">
</label>
</form>


Component Code:

angular.module('loginPage')
.component('loginPage',{
templateUrl: 'login/login.template.html',
controller: ["$scope",function control($scope,params){

}]
});


I want to access the ng-model in the template inside the controller (function control()). How can I do that?

Answer

HTML:

<form name="myForm">
    <label for="name"><span>Name*: </span>
        <br>
        <input name="myName" type="name" id="name" minlength="3" maxlength="16" autofocus="on" required placeholder="Type any name" ng-model="name" autocomplete="name">
    </label>
</form>

JS:

angular.module('loginPage')
    .component('loginPage', {
        templateUrl: 'login/login.template.html',
        controller: ["$scope", function control($scope) {
            console.log($scope.name);
        }]
    });