my setValidity not working, the message ngshow not working well.
html:
<span ng-show="form.year_of_birth.$error.notAge &&
form.year_of_birth.$touched">Your to Young</span>
js:
$scope.form.year_of_birth.$setValidity('notAge',false);
To create the various checks and to change the validity of the input form, you can use the use-form-error directive.
In your case do this (jsfiddle):
<form name="ExampleForm">
<label>Enter number more then 7:</label>
<input ng-model="dateBirth" name="dateBirth" use-form-error="notAge" use-error-expression="dateBirth&&dateBirth<7" />
<div ng-show="ExampleForm.dateBirth.$error.notAge">Your to young</div>
</form>
Or you can use ngMessages:
<form name="ExampleForm">
<label>Enter number more then 7 and less then 70:</label>
<input ng-model="dateBirth" name="dateBirth" use-form-error="notAge" use-error-expression="dateBirth&&dateBirth<7" />
<span use-form-error="isOld" use-error-expression="dateBirth&&dateBirth>70" use-error-input="ExampleForm.dateBirth"></span>
<div ng-messages="ExampleForm.dateBirth.$error" class="errors">
<div ng-message="notAge">Your a young</div>
<div ng-message="isOld">Your a old</div>
</div>
</form>
Related
I have few controls on Angular Js form and submit button. I am also validating if the fields are empty or not. However, even when all data are entered, the form is not getting submitted. Below is the sample code which I have:
Index.cshtml
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container" ng-show="createMenu">
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" class="input-md form-control col-md-4" required="" ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
//other controls
<input type="submit" value="Submit" ng-click="submitted=true" />
Is there any identifier or way to check which control has invalid data?
Thanks
For debugging purposes you can just print out the $error property of the form controller:
<pre ng-bind="mainForm.$error | json"></pre>
This will immediately show you which model isn't valid.
I am using Angular js, in which i have a textbox outside and an ng-repeat containing textbox and textarea. I want to check if the fields contain value when submit button is clicked. I am able to achieve the functionality for controls outside ng-repeat, but not sure how to achieve required field validation within ng-repeat, when submit button is click. Below is the existing code:
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate>
<div ng-controller="testController" ng-init="init()">
<div>
<label>Name :</label>
</div>
<div>
<input type="text" maxlength="150" required ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<div class="row">
<div class="form-group ">
<label>Language</label>
<label>Title</label>
<label>Description</label>
</div>
</div>
<div class="row">
<div>
<div ng-repeat="Descriptions in testsWithDescription ">
<div>
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div>
<input type="text" maxlength="150" name="titleValidate[]" ng-model="Descriptions.Title" />
</div>
<div>
<textarea maxlength="500" name="descriptionValidate[]" noresize ng-model="Descriptions.Description"></textarea>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer"><img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) ||testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" /> </a>
</div>
</div>
</div>
</div>
<input type="submit" value="Submit" ng-click="submitted=true"/>
How to use required field validation for controls within ng-repeat using angular js?
Thanks
You could use $index to track the name of the different inputs in your ng-repeat.
<div ng-repeat="Descriptions in testsWithDescription ">
<input type="text"
maxlength="150"
name="titleValidate_{{$index}}"
ng-model="Descriptions.Title"
required />
</div>
You can now use the common validations from AngularJS like you already did: mainForm.$valid.
Hello I am beginner of Angularjs and I want to build dynamic validations.Here is my code shortened as well as possible.
JS
$scope.inputValidates = [
{ 'name':'name',
'validate':'required',
},
{ 'name':'email',
'validate':'type = email',
}]
HTML
<div ng-repeat="vitem in vm.inputValidates">
<input name={{vitem.name}} ng-model="vm.useraccount[vitem.name]" {{item.validate}}>
</div>
I want this input result as
<input name=name ng-model="vm.useraccount[vitem.name] required>
<input name=name ng-model="vm.useraccount[vitem.name] type = email>
Thanks for taking time for this.
Use ng-required:
<div ng-repeat="vitem in vm.inputValidates">
<input name={{vitem.name}} ng-model="vm.useraccount[vitem.name]" ng-required="item.validate">
</div>
By the way, I see you assigned inputValidates to your $scope. So you should be accessing it in your view by inputValidates, not vm.inputValidates.
Sample is HERE
Sample contains both required and pattern validation applied on textbox rendered using ng-repeat and use ng-switch based on your validation type
<div ng-repeat="field in fields">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left" ng-switch="field.validationType">
{{field.name}} :
<div ng-switch-when="required">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Field Required!</span>
</div>
<div ng-switch-when="email">
<input type="email" id="input{{$index}}" name="input{{$index}}" ng-model="field.value" ng-pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/">
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid email!</span>
</div>
</div>
</div>
</div>
I have the following code:
<div id="messageArea">
<div ng-messages="text1.$error">
<div ng-message="required">
Text1 is required ...
</div>
</div>
<div ng-messages="text2.$error">
<div ng-message="required">
Text2 is required ...
</div>
</div>
<div ng-messages="text3.$error">
<div ng-message="required">
Text3 is required ...
</div>
</div>
</div>
<div>Text1<input id="text1" ng-model="text1" name="text1" ng-required="true"></div>
<div>Text2<input id="text2" ng-model="text2" name="text2" ng-required="true"></div>
<div>Text3<input id="text3" ng-model="text3" name="text3" ng-required="true"></div>
I wanted to show one error message at a time. When the first error is solved then the next error message will show. Anyone has any idea how I can do this? Thanks.
Nice solution is use CSS and ng-class
var app = angular.module('app', ['ngMessages']);
.error-wrapper {
color: red;
}
.error-wrapper > .view {
display: block;
}
.error-wrapper > .view ~ .view{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-messages.min.js"></script>
</head>
<body ng-app="app">
<form ng-submit="createWallet()" name='testForm' novalidate>
<div>
<input ng-model='text1' type="text" name='text1' placeholder='text1' required>
</div>
<div>
<input ng-model='text2' type="text" name='text2' placeholder='text2' required>
</div>
<div>
<input ng-model='text3' type="text" name='text3' placeholder='text3' required>
</div>
<div class="error-wrapper">
<div ng-class="{ view: testForm.text1.$invalid }" class="error" ng-messages="testForm.text1.$error">
<div ng-message='required'>Text1 required</div>
</div>
<div ng-class="{ view: testForm.text2.$invalid }" class="error" ng-messages="testForm.text2.$error">
<div ng-message='required'>Text2 required</div>
</div>
<div ng-class="{ view: testForm.text3.$invalid }" class="error" ng-messages="testForm.text3.$error">
<div ng-message='required'>Text3 required</div>
</div>
</div>
<button>Submit</button>
</form>
</body>
</html>
It's show only the first error message with class .view, at the plunker http://plnkr.co/edit/kBSpRJLs6QA2D0jctKXB?p=preview
If you wrap the inputs in a form tag with an ID you can use ng-messages on the form to pick up errors from all the inputs. You can see this here: http://jsbin.com/tikufuvawe/2/edit.
<form name="userDetails">
<input name="userName" type="number" ng-model="number" required ng-maxlength="2" />
<textarea name="text" type="text" ng-model="text" required></textarea>
<div ng-messages="userDetails.$error">
<div ng-message="required">This is required</div>
</div>
</form>
EDIT:
I have updated my example http://jsbin.com/zadojamifo/3/edit using ng-show to hide other errors such that only one will show at a time. Its not a great solution but works for the situation described.
<div ng-messages="userDetails.number.$error">
<div ng-message="required">number is required</div>
</div>
<div ng-messages="userDetails.text.$error" ng-show="!userDetails.number.$error.required">
<div ng-message="required">text is required</div>
</div>
<div ng-messages="userDetails.other.$error" ng-show="!userDetails.number.$error.required && !userDetails.text.$error.required">
<div ng-message="required">other is required</div>
</div>
As you can see the ng-show will get bigger and bigger in size if more validation types are added and if more controls are added that require validation.
Maybe is too late but this is my solution, use ng-messages-multiple to show one or more message, angular respect the order of validation messages:
<form name="loginForm" ng-submit="login()">
<label>Email</label>
<input required name="email" type="email" ng-model="email">
<div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$dirty && loginForm.email.$invalid" ng-messages-multiple>
<div ng-message="required">El email es requerido!</div>
<div ng-message="email">El email debe cumplir con el formato: email#dominio.com!</div>
</div>
<label>Contraseña</label>
<input required name="password" type="password" ng-model="password" ng-pattern="passwordPattern" md-maxlength="12">
<div ng-messages="loginForm.password.$error" ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
<div ng-message="required">La contraseña es requerida!</div>
<div ng-message="pattern">Se requieren de 6 a 12 caracteres, por lo menus un dígito, una letra mayuscula y una minúscula</div>
</div>
<div layout="row" layout-align="center center">
<button ng-disabled="loginForm.$invalid>Login</button>
</div>
</form>
You can do something like this
<div id="messageArea">
<div ng-messages="number.$error">
<div ng-message="required">
Number is required ...
</div>
</div>
<div ng-messages="text.$error" ng-if="!number.$error">
<div ng-message="required">
Text is required ...
</div>
</div>
In this case you show the second block of messages only if the first one does not exists (and it's hidden if number.$errors exists)
This sample (http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html) uses a follow solution:
<div ng-messages="my_form.first_name.$error"
ng-if="interacted(my_form.first_name)">
$scope.submitted = false;
$scope.submit = function() {
$scope.submitted = true;
};
$scope.interacted = function(field) {
return $scope.submitted || field.$dirty;
};
If you don't want to show on page load but either on page submit or on change of value then use
<form name="frmSome">
<div ng-messages="userDetails.$error"
ng-if='frmSome.userName.$dirty || frmSome.$submitted'>
<span ng-message="required">Name is Required</span>
<span ng-message="maxlength">Max. 100</span>
</div>
<input name="userName" type="text"
ng-model="model.name"
ng-required='true'
ng-maxlength="30" />
..............................
..............................
<input type='submit' value='Submit' />
</form>
If you touch the text box it will be "dirty"
if try to submit the page "Submitted"
It works on the name not the model
All,
I am working on an AngularJS form and am trying to see how the ng-messages directive works with ng-messages-multiple. I can't seem to get it to pick up multiple errors. I expect to see both the required and minimum errors at the same time but for some reason I only see required, then minimum. I posted the HTML below. I have the ng-messages included using bower, the script call in my index.html page, and I am injecting into my app.js module as required.
I am using AngularJS v1.3.2 in this project.
<div class="panel panel-default">
<div class="panel-heading">
<h1>Validation Test Form</h1>
</div>
<div class="panel-body">
<form class="form" name="form" role="form" ng-submit="submit(form)">
<div class="row">
<div class="form-group" show-errors>
<label for="name">Name:</label>
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
minlength="5"
required/>
<div ng-messages="form.name.$error" ng-messages-multiple class="has-error">
<div ng-message="required">Required!</div>
<div ng-message="minlength">Minimum length is 5</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
{{formError}}
</div>
</div>
Try to use ng-minlength instead minlength
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
ng-minlength="5"
required/>
instead
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
minlength="5"
required/>
EDIT
It is normal behaviour for ng-minlength directive, this directive validate only when we have not 0 size of input, entered a value it must be at least 5 characters long, but it's ok to leave the field empty, and, unfortunately, in anyway you don't achieve, that you want. I offer you to create your custom directive or see in direction ng-pattern directive with need behaviour, if you very want that showing two message.