I am trying to follow the AngularJS example of doing inline validations of required fields. However when it comes to using a ng-repeat, it doesn't seem to work for me.
<form name="myForm" novalidate>
Me: <input required type="text" name="myName" ng-model="name" />
<span class="error" ng-show="myForm.myName.$error.required">Required!</span>
<div ng-repeat="friend in friends">
Friends: <input required type="text" name="myFriend[{{$index}}]" ng-model="friend.name" />
<span class="error" ng-show="myForm.myFriend[{{$index}}].$error.required">Required</span>
</div>
</form>
JSFiddle
Any idea what I am doing wrong or what I can do to fix it?
Unfortunately you cannot do it that way. The input element does not like having the name dynamically generated. You will need to use ng-form as a subform and wrap the repeated element. Here is a fork of your fiddle: http://jsfiddle.net/p26VQ/
<div ng-controller="MyCtrl">
<form name="myForm" novalidate>
Me: <input required type="text" name="myName" ng-model="name" /><span class="error" ng-show="myForm.myName.$error.required">
Required!</span>
<div ng-repeat="friend in friends">
<ng-form name="subform{{$index}}">
Friends: <input required type="text" name="myFriend" ng-model="friend.name" />
<span class="error" ng-show="subform{{$index}}.myFriend.$error.required">Required</span>
</ng-form>
</div>
</form>
</div>
Using at least AngularJS 1.4.3 you can use this:
name="formControl_{{uniqueId}}"
And this:
ng-messages="myForm[ 'formControl_' + uniqueId ].$error"
Taken from the comment at https://github.com/angular/angular.js/issues/1404#issuecomment-125805732 found in the issue referenced by Danny.
Related
I wanna give required validation to a group of checkboxes formed using ng-repeat. So far I have tried
<div class="radio radio-info radio-inline" ng-repeat="styp in ship_type_list">
<div>
<input type="radio" id="input_ship_type{{styp.id}}" ng-model="formData.ship_type" ng-value="styp.id" name="ship_type" required>
<label for="input_ship_type{{styp.id}}"> {{styp.name}} </label>
</div>
<div ng-show="orderForm.$submitted || orderForm.ship_type.$touched">
<span ng-show="orderForm.ship_type.$error.required" class="text-danger">Select ship type.</span>
</div>
</div>
Still unable to validate. Thanx in adv.
User ng-required for validation
<input type="radio" id="input_ship_type{{styp.id}}" ng-model="formData.ship_type" ng-value="styp.id" name="ship_type" ng-required="value.length==0">
What problem you face I don't understand. But, I solved the issues I faced in your code. This is the plunker
<form name="orderForm" ng-submit="call()">
<div class="radio radio-info radio-inline" ng-repeat="styp in ship_type_list">
<div>
<input type="radio" id="input_ship_type{{styp.id}}" ng-model="formData.ship_type" ng-value="styp.id" name="ship_type" required>
<label for="input_ship_type{{styp.id}}"> {{styp.name}} </label>
</div>
</div>
<div ng-show="orderForm.$submitted || orderForm.ship_type.$touched">
<span ng-show="orderForm.ship_type.$error.required" class="text-danger">Select ship type.</span>
</div>
<button type="submit">submit</button>
</form>
All the best.
Check the array length in the ng-required attribute of the checkboxes.
<input type="radio" id="input_ship_type{{styp.id}}" ng-model="formData.ship_type" ng-value="styp.id" name="ship_type" ng-required="value.length==0">
I have tried to use a lot of regex which I found on the internet but with no luck. I am trying to validate if a form's input ranges between 0-100 (both 0 & 100 are valid inputs) but for some reason The error is not showing up. Pasting my code below
<form class="row" name="myForm">
<div ng-repeat="month in plan.months" class="form-group">
<div class="col-sm-2">{{month.label}} : </div>
<div class="col-sm-10">
<input type="text"
name="name"
ng-model="month.value"
class="form-control"
ng-pattern="/^([1-9]?[0-9])$/"
/>
<br />
</div>
<span class="error" style="color:red" ng-show="myForm.name.$error.pattern">Please enter a Percentage value between 1 & 100</span>
</div>
</form>
try this,
<form class="row" name="myForm">
<div ng-repeat="month in plan.months" class="form-group">
<div class="col-sm-2">{{month.label}} : </div>
<div class="col-sm-10">
<input type="text"
name="name"
ng-model="month.value"
class="form-control"
ng-pattern="/^([0-9]|[1-9][0-9]|[1-9][0-9][0])$/"
/>
<br />
</div>
<span class="error" style="color:red" ng-show="myForm.name.$error.pattern">Please enter a Percentage value between 1 & 100</span>
</div>
</form>
Also refer this
Is there a reason you're using a text input rather than a number input?
If not, try this:
https://jsfiddle.net/kqupg84y/
<form class="row" name="myForm">
<div class="col-sm-2">{{month.label}} : </div>
<div class="col-sm-10">
<input type="number"
name="name"
ng-model="month.value"
class="form-control"
min="0"
max="100"
/>
<br />
</div>
<span class="error" style="color:red" ng-show="myForm.name.$error.pattern">Please enter a Percentage value between 1 & 100</span>
{{myForm.$error}}
(i removed ng-repeat for simplicity of fiddle)
That doesn't answer your question about using an ng-pattern though.
That being said, your regex may just be a bit off. rather than
/^([1-9]?[0-9])$/
you could try:
/^[0-9]+$/
if you're trying to match any number between 0 and 100.
Your regex looks like it's trying to match any number that is between 1 and 9, potentially followed by any other number... but if you're trying to make it inclusive of 0 and 100, i'm not sure it works as expected.
The tool I generally use for checking my regular expressions is:
http://regexr.com/
Your problem is that multiple inputs in your form have the same name. You need to add some uniqueness to the input names. A quick and dirty way to make form element names unique is to bind the name property to an expression that uses the $index of the ng-repeat like name="month{{$index}}. Then you can use Javascript's bracket notation to access the correct form element from the form controller:
<div ng-repeat="month in plan.months" class="form-group">
<div class="col-sm-2">{{month.label}} : </div>
<div class="col-sm-10">
<input type="text"
name="month{{$index}}"
ng-model="month.value"
class="form-control"
ng-pattern="/^[1-9]?[0-9]$|^100$/"
/>
<br />
</div>
<span class="error" style="color:red"
ng-show="myForm['month' + {{$index}}].$error.pattern">
Please enter a Percentage value between 1 & 100
</span>
</div>
Here's a plunker demonstrating this in action. As an aside, your pattern incorrectly failed the string "100", so I added an alternative to the regex.
It's because you cannot use a regular form with ng-repeat because of multiple inputs with the same name. Use ng-form inside ng-repeat to get isolated forms.
Also if you want numbers, just use input type=number with min and max values instead of using ng-pattern.
See working example https://jsfiddle.net/asimgeker/yjmoLtvv/
<div ng-app>
<div ng-controller="MyCtrl">
<div ng-repeat="month in months" class="form-group">
<ng-form name="myForm">
<div class="col-sm-2">{{month.label}} : </div>
<div class="col-sm-10">
<input type="number" min="0" max="100" name="myName" ng-model="month.value" class="form-control" />
<br />
</div>
<div style="color: red" ng-show="myForm.myName.$error.max">Should be less than 101</div>
<div style="color: red" ng-show="myForm.myName.$error.min">Should be greater than -1</div>
</ng-form>
</div>
</div>
</div>
#anurag -- the Solution you provided worked for numbers above 100 but was failing for below 0 numbers
& #andrew -- The same with your solution, was not throwing a validation error unless I enter -100 (ng-maxlength = 3) is working but that is not how we need it.
The original issue was with my Regex, finally the code that worked for me is
<form class="row" name="myForm">
<div class="col-sm-2">{{month.label}} : </div>
<div class="col-sm-10">
<input type="number"
name="percent_monthly_targets"
ng-model="month.value"
class="form-control"
ng-pattern="/^[0-9][0-9]?$|^100$/"
/>
<br />
<span class="alert alert-danger" ng-show="myForm.percent_monthly_targets.$error.pattern">Please enter a Percentage value between 1 & 100</span>
</div>
</form>
I want to implement dirty check on all required elements in a form
i have tried like this
<div ng-app="">
<form name="myForm" ng-controller="Ctrl">
<label>
userType:
</label>
<input name="usertype" ng-model="userType" required>
<span class="error" ng-show="myForm.userType.$dirty">Required</span><br>
<label>
designation:
</label>
<input name="designation" ng-model="Designation" required>
<span class="error" ng-show="myForm.Designation.$dirty">Required</span><br>
</form>
</div>
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.
I'm having trouble getting a message to display when the field input is invalid. I can see the classes being correctly applied to the element i.e. ng-dirty ng-invalid ng-invalid-pattern so I just need to make the error message display. Is there an issue with my html?
Thanks!
<form ng-controller="FormCtrl" name="TestForm" action="http://myserver/api" method="post" novalidate>
<div class="form-group">
<input class="form-control" type="text" id="vld" name="vld" data-ng-pattern="/(^$)|(\b\d{9}\b)/" data-ng-model="model.tfn">
<span class="error" data-ng-show="model.tfn.$invalid">Correct input etc...</span>
</div>
</form>
The information you are looking for is part of the FormController. You need to setup a formController via ng-form directive:
<div class="form-group" ng-form="myForm">
<input class="form-control" type="text" id="vld" name="vld" data-ng-pattern="/(^$)|(\b\d{9}\b)/" data-mg-model="model.tfn">
<span class="error" data-ng-show="myForm.vld.$invalid">Correct input etc...</span>
</div>
If this is done you may access the information by [Name of the OFrmController].[Name of the input field].$invalid e.g. myForm.vld.$invalid