Why is my regex not being triggered? The first error message "Please enter the longtitude" is displayed when nothing is entered. If I entered an obviously wrong value for "longtitude" the error message is not displayed.
<div class="row">
<div class="col span-1-of-3">
<label for="name">Longtitude</label>
</div>
<div class="col span-2-of-3">
<input type="text" ng-pattern="/^[-+]?(180(\.0+)?|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)$/" ng-model="report.lon" name="lon" id="longtitude" placeholder="Enter the longtitude" required />
</div>
<div ng-messages="submitReport.lon.$error" ng-if="submitReport.lon.$dirty">
<div ng-message="required">Please enter the longtitude</div>
<div ng-message="lon">Your longtitude is invalid</div>
</div>
<div ng-show="submitReport.lon.$error.pattern" ng-if="submitReport.lon.$dirty">
<div ng-message="required">Please enter the longtitude</div>
<div ng-message="lon">Your longtitude is invalid</div>
</div>
</div>
It works for me: https://plnkr.co/edit/WPjGeylGESDexh7Q6UKJ?p=preview
Also please note your spelling for Longitude is not correct.
Edit
The problem in the code is that
<div ng-message="lon">Your longitude is invalid</div>
should be
<div ng-message="pattern">Your longitude is invalid</div>
Related
I'm new to AngularJS. I need to show <p> when checkbox is checked = true. Currently <p> is showing when mouse hover-over. instead of that I need to show <p> when sendSMS is checked = true my code as follows,
<div class="col-xs-12">
<div class="form-group label-floating" ng-class="{'is-empty': vm.checkInData.telephone === null}">
<label for="phone" class="control-label">xxx-xxx-xxxx</label>
<input type="text" class="form-control" ng-model="vm.checkInData.telephone" id="phone"
ng-pattern="/^[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4}$/" name="phone" required>
<div ng-messages="vm.inputForm.phone.$error" ng-show="vm.formSubmitted || vm.inputForm.phone.$touched">
<div class="ngMessage" ng-message="required">Phone number is required.</div>
<div class="ngMessage" ng-message="pattern">Phone number should be a valid 10 digit one.</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="vm.checkInData.sendSMS"> Receive text updates
</label>
</div>
<p class="help-block">Message & data rates may apply.</p>
</div>
</div>
</div>
How can I do that.
<p class="help-block" ng-if="vm.checkInData.sendSMS">Message & data rates may apply.</p>
you could toggle the visibility of the p tag by using the ng-if.
I'm having a hard time to display a message when an input is valid. To display error messages, it is working alright. This is what I'm trying:
<form>
...
<div class="form-group">
<label class="col-xs-2 control-label" for="inputSuccess">Username</label>
<div class="col-xs-10">
<input type="text" id="inputUser" name="usernameInput" class="form-control textbox"
placeholder="Digite seu Username" width="25" ng-model="username.value"
ng-minlength="4" ng-maxlength="10" valid="validateForm.usernameInput.$valid" required>
<div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$error">
<div class="error-message" ng-message="required">*This field is required</div>
<div class="error-message" ng-message="minlength">*Username too short</div>
<div class="error-message" ng-message="maxlength">*Username too long</div>
</div>
<div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$valid">
<div class="valid-message" ng-message="valid">valid!</div>
</div>
</div>
</div>
</form
I also tried to set "ng-message" with the $valid ng-model but to no avail. Any tips?
your form wasn't named
the value of ng-messages should be an object containing a property/properties that you want to validate against. eg input.$error can have in your case required,minlength or maxlength. its different for $valid because that has true/false values, so we check for the property $valid on the object usernameInput for true/false
the value of ng-message should be the name of the property to check on the containing block's ng-messages value object. if the value of the property is truthy you see the content, and you dont if its falsy.
ng-messages/ng-message probably isnt the right solution for your case since you're checking one value and displaying one message.
TLDR
ng-messages : name of object*
ng-message : name of property of object*
if the value of property is truthy, content of ng-message shows... falsy, nothing shows.
angular.module('formDemo', ['ngMessages']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular-messages.js"></script>
<body ng-app="formDemo">
<form name="validateForm">
...
<div class="form-group">
<label class="col-xs-2 control-label" for="inputSuccess">Username</label>
<div class="col-xs-10">
<input
type="text"
id="inputUser"
name="usernameInput"
class="form-control textbox"
placeholder="Digite seu Username"
width="25"
ng-model="username.value"
ng-minlength="4"
ng-maxlength="10"
required>
<div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput.$error">
<div class="error-message" ng-message="required">*This field is required</div>
<div class="error-message" ng-message="minlength">*Username too short</div>
<div class="error-message" ng-message="maxlength">*Username too long</div>
</div>
<div ng-if="validateForm.usernameInput.$dirty" ng-messages="validateForm.usernameInput">
<div class="valid-message" ng-message="$valid">valid!</div>
</div>
</div>
</div>
</form>
</body>
add "required" attribute to the input tag
else to avoid manipulation through inspection-tool, PHP works,
if(empty($_POST['usernameInput']))
{
echo "Error!"
}
you can simply use ng-if with validateForm.usernameInput.$valid to control showing valid messages. mention that this block should be put outside ng-message block.
<div ng-if="validateForm.usernameInput.$valid">
valid!
</div>
PLUNKER DEMO
comment: you missed validateForm at your form tag, I think this is typo.
I have input type 'number' and i have setup its min and max length.
I am trying to show error if user enter more than max length or number is invalid.
I have following code. I can see when i inspect element that class change to ng-invalid ng-invalid-max when i enter more than max allowed and tab out.
However,no error message shows on ui.'
Why?
<div class="form-group">
<label class="col-lg-2 control-label">Student</label>
<div ng-class="{ 'has-error' : studentReportForm.RollNumber.$invalid && (studentReportForm.$submitted) }">
<div class="col-lg-4">
<div class="input-group">
<input type="number" class="form-control" name="RollNumber" data-ng-model="studentReport.Details.RollNumber" min="0" max="10000000" />
</div>
<div data-ng-if="studentReportForm.RollNumber.$error.number" class="error">invalid number</div>
<div data-ng-if="studentReportForm.RollNumber.$error.min" class="error">Min 0</div>
<div data-ng-if="studentReportForm.RollNumber.$error.max" class="error">Max 10000000</div>
</div>
</div>
</div>
Is it possible to use ng-messages with angular 1.3 and show validation summary on the top with error messages for different fields?
<div ng-messages="myForm.$error">
<div ng-message="required">Need to show required error for field 1.</div>
<div ng-message="required">Need to show required error for field 2.</div>
</div>
How can i achieve this ?
All the examples i have seen so far is showing error messages for one single field, not for all the fields in the form.
Do I need to have multiple ng-messages section for each field?
I wanted to style the whole summary block as one. So i ended up doing this.
<div class="error-summary" ng-show="myForm.$submitted && myForm.$invalid">
<p ng-show="myForm.field1.$error.required">Field 1 is required.</p>
<p ng-show="myForm.field2.$error.required">Field 2 is required.</p>
</div>
I was hoping to do something similar to this using ng-messages.
How about this?
<div ng-messages="myForm.field1.$error">
<div ng-message="required">Need to show required error for field 1</div>
</div>
<div ng-messages="myForm.field2.$error">
<div ng-message="required">Need to show required error for field 2</div>
</div>
<div ng-messages="myForm.field3.$error">
<div ng-message="required">Need to show required error for field 3</div>
</div>
Yes, you should have multiple ng-messages. Please have a look at the below link.
http://plnkr.co/edit/QgNkXKosgcArGZW7WuZO?p=preview
<form name="myForm">
<label>Enter your name:</label>
<br>
<input type="text" name="myName1" ng-model="name1" required />
<br>
<input type="text" name="myName2" ng-model="name2" required />
<div ng-messages="myForm.myName1.$error">
<div ng-message="required">enter name 1</div>
</div>
<div ng-messages="myForm.myName2.$error">
<div ng-message="required">enter name 2</div>
</div>
</form>
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