i have a problem while accessing $scope inside controller's behavior. code is like below.
<body id="main_body" ng-controller="FormController as frmCtrl">
<form id="form_991905" class="appnitro" name="loginForm" ng-submit="loginForm.$valid && frmCtrl.doLogin()" novalidate>
<div class="form_description">
<h2>Login Form</h2>
</div>
<ul>
<li id="li_1" >
<label class="description" for="username">Username </label>
<div>
<input name="username" class="element text medium crequired email" type="email" ng-model="login.username" form-validator />
<div class="errBx"></div>
</div>
</li>
<li id="li_2" >
<label class="description" for="password">Password </label>
<div>
<input name="password" class="element text medium crequired" type="text" ng-model="login.password" form-validator/>
<div class="errBx"></div>
</div>
</li>
<li class="buttons">
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"/>
</li>
</ul>
</form>
i want to access the $scope.login.username inside the method
controller code.....
this.login = function(){
console.log($scope.login.username);
}
// controller code
You are using "controllerAs" syntax, so there is no $scope available. In the view you can access it via frmCtrl.login.username or in the contoller you can try this.login.username.
You can learn more about it here: http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/
You're using ctrl as syntax, therefore your ng-model show be as follows:
ng-model="frmCtrl.login.password"
And function should change to:
this.login = function(){
console.log(this.login.username);
}
Related
My form is as shown below. But on click of submit button the form is submitting with out validation...I am using spring security so xhr call won't allow to redirect on another page from server(so I have to give the url in action). If I remove "novalidate" page is taking default html validation
<form name="loginForm" id="loginForm" action="${pageContext.request.contextPath}/j_spring_security_check" novalidate>
<div class="panel-body">
<div class="form-group has-feedback">
<input type="email" name="j_username" ng-model="j_username"
class="form-control placeholder-color" placeholder="Email"
ng-pattern="/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/"
required autocomplete="off" />
<div class="form-devider"></div>
<div ng-messages="loginForm.j_username.$error"
ng-if="loginForm.$submitted">
<div class="has-error" ng-message="required">
<spring:message code="peak.email.required" />
</div>
<div class="has-error" ng-message="pattern">
<spring:message code="peak.enter.valid.email" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<input type="password" name="j_password" id="j_password"
placeholder="Password" class="form-control placeholder-color"
ng-model="j_password" required autocomplete="off" /> <%-- <input
type="hidden" name="url" id="url" placeholder="Password"
ng-model="link"
ng-init="link='${pageContext.request.contextPath}/j_spring_security_check'" /> --%>
<div class="form-devider"></div>
<div ng-messages="loginForm.j_password.$error"
ng-if="loginForm.$submitted">
<div class="has-error" ng-message="required">
<spring:message code="peak.password.required" />
</div>
</div>
</div>
</div>
<div id="login-error-box1" style="display: none"></div>
<button type="submit"
class="btn btn-block custome-btn-orange pbi-mt15">
<spring:message code="peak.login" />
</button>
</form>
Thanks in advance
Take a look at this plnkr : http://plnkr.co/edit/rZaKXEp7vspvEerFtVH8?p=preview
$scope.validate = function(isValid,$event){
console.log(isValid);
console.log($scope.loginForm);
if(!isValid){
$event.preventDefault();
}
}
You need to create an angular controller with a function to run on ng-submit. That function will look for if form is invalid and stops it from posting the form.
which allows you to see your error messages.
I am trying to learn angularJS and have problem figuring out how to solve this issue. I am trying to prepend content of the form when user submit the form. This is my code but it's not working. Can anyone help me to figure out where the problem is? Thanks!
angular.module("displayText", [])
.controller("submitText", function($scope) {
$scope.outputArr = [];
$scope.print = function() {
$scope.outputArr.push($scope.inputText);
$scope.inputText = '';
};
};
});
<body ng-app="displayText">
<div ng-controller="submitText">
<form method="get" action="#">
<input type="text" name="input" ng-model="inputText" required/>
<button ng-click="print(inputText)">Submit</button>
</form>
</div>
<div>
<p ng-repeat="text in outputArr">{{text}}</p>
</div>
</body>
put this piece of code inside the submitText controller div
<div>
<p ng-repeat="text in outputArr">{{text}}</p>
</div>
then you whole code should be like
<div ng-controller="submitText">
<form method="get" action="#">
<input type="text" name="input" ng-model="inputText" required/>
<button ng-click="print(inputText)">Submit</button>
</form>
<div>
<p ng-repeat="text in outputArr">{{text}}</p>
</div>
</div>
here is the Plunker
in your case the ng-repeat="text in outputArr" is out of the controller that means scope of the submitText controller not accessible for the ng-repeat that's why its not print anything
Here's FIDDLE
Not able to understand that why the required validation is not working ??
HTML
<div ng-app="app">
<div ng-controller="myctrl">
<form name="myform" class="form form-horizontal" novalidate>
<fieldset class="fieldset" ng-show="payment == 'bankAccount'" class="form-group clearfix">
<ul class="form-group">
<li ng-class="{
'has-error': myform.routingNumber.$invalid,
'has-success':myform.routingNumber.$valid}">
<label for="routingNumber">Bank Routing Number</label>
<div class="" ng-show="myform.routingNumber.$error.required"> <span class="help-block">Please enter routing number</span>
</div>
<input type="text" name="routingNumber" class="form-control" required/>
</li>
</ul>
</fieldset>
</form>
</div>
</div>
JS
var app = angular.module('app', [])
You need to provide an ng-model for the angular validation on the form to kick in.
Try:-
<input type="text" ng-model="routingNumber" name="routingNumber" class="form-control" required/>
On a side note:- there is no use of using label for without using id on the target input.
Demo
I can never seem to get Forms to work properly in Angular. I always add a <form name="myform"> and then try to access it either in the template or in the controller using $scope.myform but it is always undefined! I can never seem to figure out exactly how these work.
Here is my code:
Template
<form name="o365form" novalidate>
<ul class="formList">
<li>
<label>Office 365 Admin Username</label>
<input type="text" ng-model="Master.Start.skAccount.username" required/>
</li>
<li>
<label>Office 365 Admin Password</label>
<input type="text" ng-model="Master.Start.skAccount.password" required/>
</li>
</ul>
</form>
Then I have this code in a function in my controller, but o365form is undefined...
Controller
if ($scope.o365form.$invalid) {
return false;
} else {
return true;
}
You need to use to ng-form directive with this:
This is as simple as
<ng-form name="o365form">
<ul class="formList">
<li>
<label>Office 365 Admin Username</label>
<input type="text" ng-model="Master.Start.skAccount.username" required/>
</li>
<li>
<label>Office 365 Admin Password</label>
<input type="text" ng-model="Master.Start.skAccount.password" required/>
</li>
</ul>
</ng-form>
Add ng-submit directive in form
<form name="o365form" ng-submit="submit(o365form)" novalidate>
<ul class="formList">
<li>
<label>Office 365 Admin Username</label>
<input type="text" ng-model="Master.Start.skAccount.username" required/>
</li>
<li>
<label>Office 365 Admin Password</label>
<input type="text" ng-model="Master.Start.skAccount.password" required/>
</li>
</ul>
</form>
in controller
$scope.submit = function(o365form){
if (o365form.$valid) {
return false;
} else {
return true;
}
}
Example with $watch
<form name="o365form" form-valid novalidate>
<ul class="formList">
<li>
<label>Office 365 Admin Username</label>
<input type="text" ng-model="o365form.username" required/>
</li>
<li>
<label>Office 365 Admin Password</label>
<input type="text" ng-model="o365form.password" required/>
</li>
</ul>
<button type="submit">Submit</button>
</form>
Directive
app.directive("formValid", function () {
return {
link: function ($scope, element, attrs){
$scope.$watch(attrs.name, function (isValid){
if (isValid.$valid) alert("valid");
else alert("not valid");
}, true);
}
}
});
DEMO
Who knows why it doesn't works ?
i want to set a $rootScope value with ngModel on my radio button.
that's an example jsFiddle
<form name="pageTwoForm">
<h3>General Information > Knowledge About </h3>
<div>
<b>User</b>
<div ng-repeat="option in userOptions">
<input type="radio" ng-model="knowledgeAboutUser" ng-value="option.id" />{{option.text}}
</div>
<b>Target Group</b>
<div ng-repeat="option in targetGroupUserOptions">
<input type="radio" ng-model="$parent.knowledgeAboutTargetGroup" ng-value="option.id" />
{{option.text}}
</div>
</div>
</form>
<h3 >{{knowledgeAboutTargetGroup}}</h3>
<h3 >{{knowledgeAboutUser}}</h3>
i solved it
<form name="pageTwoForm">
<h3>General Information > Knowledge About </h3>
<div>
<b>User</b>
<div ng-repeat="option in userOptions">
<input type="radio" ng-model="data.knowledgeAboutUser" ng-value="option.id" />{{option.text}}
</div>
<b>Target Group</b>
<div ng-repeat="option in targetGroupUserOptions">
<input type="radio" ng-model="data.knowledgeAboutTargetGroup" ng-value="option.id" />
{{option.text}}
</div>
</div>
</form>
<h3 >{{data.knowledgeAboutTargetGroup}}</h3>
<h3 >{{data.knowledgeAboutUser}}</h3>
i don't know why but it works if i use
data.knowledgeAboutUser
not only
knowledgeAboutUser