I have a simple form with input box.
angular.module('main', [])
.controller('Ctrl', ['$scope', '$location',
function($scope, $location) {
}
]);
.red-border {
border-color: red;
}
<div ng-app="main">
<div ng-controller="Ctrl">
<form name="frm" novalidate="novalidate">
<input type="text" required name="myname" ng-class="{'red-border':frm.myname.$error.$invalid}" />
<br>{{frm | json}}
</form>
</div>
</div>
I need the input box to be in red border at the beginning, since it's already empty, but it doesn't make it red on load.
When I test it like this: ng-class="{'red-box':true}" it does work.
What is the best practice to make it triggered at the very beginning, or do I have to do all workarounds?
Thanks
Edit:
here is my code snippet.
https://jsfiddle.net/Ingeeg/afm7rhsw/8/
Angular only evaluates inputs with the ng-model directive:
<form name="frm" novalidate="novalidate">
<input type="text" required name="myname"
ng-model="myModel"
ng-class="{'red-border':frm.myname.$invalid}" />
</form>
See this working jsfiddle
Related
I am new to form validation using Angular JS so I looked around a lot and found one that was a nice tutorial. The tutorial can be found here. I know there are a few posts on Stack Overflow about ng-messages however I reviewed them and they do not seem to pertain to my issue.
I have installed ng-messages using bower and am running it with grunt. There are no error however my validation messages do not seem to fire off.
My HTML is as follows:
<form name="myForm" novalidate>
<fieldset>
<div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }">
<label for="client">SRF #: *</label>
<input type="text" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required>
<div ng-messages="myForm.clientNumber.$error">
<!--<div ng-message="required" >SRF # is required.</div>-->
<div ng-message="minlength" >SRF Number is too short.</div>
<!--<div ng-message="maxlength">SRF Number is too long.</div>-->
</div>
</div>
</fieldset>
</form>
Part of my app.JS is as follows:
angular
.module('myApp', [
// Angular
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router',
'myApp.home',
'restangular',
'ngMessages'
])
Part of my controller is as follows:
(function() {
'use strict';
angular.module('myApp.home', [
'ui.router',
'myApp.myFactory',
'ngMessages'
])
.config(homeConfig)
.controller('homeCtrl', home);
homeConfig.$inject = ['$stateProvider'];
home.$inject = ['$http','myFactory','$timeout'];
function home($http,myFactory,$timeout) {
...
}
What I have looked at and tried:
ngMessages/angular validation not working
ng-messages is not working
https://github.com/angular/material/issues/6440
https://github.com/angular/material/issues/2820
https://docs.angularjs.org/api/ngMessages
http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html
Some in the list are tutorials while others are posts on Stack Overflow: ngMessages/angular validation not working.
I do not understand why it does not work. All sites I have seen look to be implementing the same way.
All we need to do is adding ng-model to our input.
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
In short, without ng-model on <input> element Angular does not care about it.
Look at working snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-messages.js"></script>
<script>
var app = angular.module('app', ['ngMessages']);
app.controller('RegistrationScreenController', function() {});
</script>
</head>
<body ng-app="app" ng-controller="RegistrationScreenController">
<form name="myForm" novalidate>
<fieldset>
<div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }">
<label for="client">SRF #: *</label>
<input type="text" ng-model="clientNumber" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required>
<div ng-messages="myForm.clientNumber.$error">
<div ng-message="required" >SRF # is required.</div>
<div ng-message="minlength" >SRF Number is too short.</div>
<div ng-message="maxlength">SRF Number is too long.</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
# From what i can see, you are missing 'when=required' in your 'ng-message'
# This should fix it. Refer to examples below.
# 1) Using 'ng-messages'
# 2) Using 'ng-show'
//---------------------------------------------------------------------------------------------------------------
# HTML - Angular Material Design
# Follow the following example below and it should work.
# Am basically using 'ng-message' to show the error message
<form name="editUserForm">
<div flex layout="row">
<md-input-container flex="100">
<label for="firstName">First Name</label>
<md-icon md-font-icon="zmdi zmdi-account" style="color:#47B2E8"></md-icon>
<input id="firstNameEditUser"
label="firstName"
name="firstName"
type="text"
ng-model="vm.contact.firstName"
required/>
<div ng-messages="editUserForm.firstName.$error">
<div ng-message when="required"><span translate>Please enter your First Name</span></div>
</div>
</md-input-container>
</div>
</form>
//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
# HTML - Angular Material Design
# Follow the following example below and it should work.
# Am basically using 'ng-show' to hide and show the error
# messages
<form name="changePasswordForm">
<md-input-container class="md-block">
<label for="password">Password</label>
<input id="password"
label="password"
name="password"
type="password"
ng-model="vm.user.password"
required/>
<div class="validation-messages-error">
<div ng-show="changePasswordForm.password.$dirty && changePasswordForm.password.$error.minlength">
<span>Password is too short</span>
</div>
<div ng-show="changePasswordForm.password.$dirty && changePasswordForm.password.$error.maxlength">
<span>Password is too long</span>
</div>
<div ng-show="changePasswordForm.password.$error.required">
<span>Password required</span>
</div>
</div>
</md-input-container>
</form>
//---------------------------------------------------------------------------------------------------------------
# CSS Class
.validation-messages-error {
font-size: 12px;
color: #dd2c00;
margin: 10px 0 0 25px;
}
//---------------------------------------------------------------------------------------------------------------
validation on keyup is working but on click of submit button it's not working. When i click on submit it does no validate although redirect to some other page.
<script>
angular.module("MyApp", [])
.controller('loginCtrl', ['$scope', '$log', function ($scope, $log) {
}]);
</script>
<div id="loginBox" ng-controller="loginCtrl">
<form action="/" id="userLogin" name="myForm" novalidate>
<label>User id</label>
<input type="text" ng-model="userId" name="myUserid" required="" />
<div ng-show="myForm.$submitted || myForm.myUserid.$touched">
<div ng-show="myForm.myUserid.$error.required">Tell us your name.</div>
</div>
<br /><br />
<input type="submit" name="loginSubmit" ng-click="submit()" value="Login" />
</form>
</div>
You should remove the actions attribute from the form. Like:
<form id="userLogin" name="myForm" novalidate>
You can also add the directive ng-submit in the form and remove the ng-click directive from the submit button.
More information here.
Remove form action .
<form id="userLogin" name="myForm" novalidate>
Here is the plunkr: https://plnkr.co/edit/BchMhCHHETftNuKxBVaj?p=preview
Try adding ng-app to your application. I see no error in having action in form on anything else. checkin those plnkers
I need am not able to access the $scope.mainform.subform.submitted property in my script. My html goes as below.
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
#*Same goes for other personal details*#
<input type="button" id="submitbutton" value="Save" ng-model="Submit" ng-click="saveDependentDetailsClick($event, $index, dependent)" />
</ng-form>
</div>
</div>
Can anyone help?
First of all, I think that it's not correct to use <ng-form name="subform">...</div> in ng-repeat in a way you have used it because you will end up with multiple forms having same name(subform) within the same scope therefore you can't refer to each of these forms as they have not unique name providing you with reference to them.
You will also end up with multiple submit buttons with the same id="submitbutton" in same html document which is an invalid html.
try this.
var app = angular
.module('MyApp', [
])
.controller('Main', ['$scope', function ($scope) {
$scope.DependentDetails = [{"FirstName":""},{"FirstName":""}];
$scope.saveDependentDetailsClick = function(DependentDetails){
console.log(DependentDetails);
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
<div ng-form="mainform">
<div ng-repeat="dependent in DependentDetails">
<ng-form name="subform">
<input type="text" class="textbox" ng-model="dependent.FirstName"/>
<input type="button" value="Save" ng-click="saveDependentDetailsClick(dependent)" />
</ng-form>
</div>
</div>
</div>
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
I know that there are a lot of other similar questions but I didn't find the answer there.
<html ng-app="app" ng-controller="AppController">
...
<form class="navbar-form navbar-left" role="search" ng-submit="alert()">
<div class="form-group">
<input type="text" class="form-control search" ng-model="text" />
</div>
<button type="submit" class="btn btn-default icon-default icon-search">Submit </button>
</form>
</html>
You cant use alert (window.alert) function in angular as you normally do in plain javascript. This is example from angular $window service docs:
<script>
function Ctrl($scope, $window) {
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function(greeting) {
$window.alert(greeting);
};
}
</script>
<div ng-controller="Ctrl">
<input type="text" ng-model="greeting" />
<button ng-click="doGreeting(greeting)">ALERT</button>
</div>
If you put doGreeting (name it as you want) function in your controller and inject $window, then your example should work:
...
<form class="navbar-form navbar-left" role="search" ng-submit="doGreeting()">
...
Try to submit the form by adding ng-click in the button tag and call submit function by passing your form in the ng-click. The function is where you write your logic in the controller. submit