I am trying to validate my AngularJS form, adding has-error class to form-group like:
<div class="form-group" ng-class="{ 'has-error': form.field.$invalid }">
<input type="number" name="field" min="0" max="10" class="form-control">
</div>
And it works!
But it gets complicated when I'm using ng-repeat for fields and my name attribute is set according to key:
<div class="form-group" ng-class="{ 'has-error': form.???.$invalid }" ng-repeat="field in fields">
<input type="number" name="{{ field.key }}" min="0" max="10" class="form-control">
</div>
So what should I enter where ??? is? Tried form.{{ field.key }}.$invalid, form[{{ field.key }}].$invalid, nothing works...
Strange thing if I know the value of field.key for example, and I set form.keyValue.$invalid - it still doesn't work.
Any suggestions?
You need to create an inner form (see ng-form).
And take a look at this post
Related
I need to validate that at least one checkbox, in 3, has been selected. I can't use radio buttons because two of the options are can be selected and exclude the third. I'm not really sure if it's best to put these checkboxes into a model array, rather than binding them to separate models and creating a longer ng-required expression. The docs aren't particularly helpful in describing what 'best practise' is for this sort of thing...
Code:
<div class="form-inline form-group">
<div class="row">
<div class="col-xs-12">
<h4 class="card-title left test-list-header">Balcony</h4>
</div>
</div>
<fieldset class="form-group">
<input type="checkbox" id="balconyBalcony" ng-model="balcony">
<label for="balconyBalcony">Balcony</label>
</fieldset>
<fieldset class="form-group">
<input type="checkbox" id="patioBalcony" ng-model="patio">
<label for="patioBalcony">Patio</label>
</fieldset>
<fieldset class="form-group">
<input type="checkbox" id="noBalcony" ng-model="noBalcony" ng-disabled="balcony || patio">
<label for="noBalcony">No</label>
</fieldset>
<fieldset class="form-group" ng-show="noBalcony && !patio && !balcony">
<div class="md-form">
<input
type="text"
id="{{ Plot::FIELD_BALCONY_NOTES }}"
class="form-control"
name="{{ Plot::FIELD_BALCONY_NOTES }}"
inline-edit
inline-edit-callback="UpdateHandler()"
ng-model="Model.BalconyNotes.Value"
ng-class="{ invalid: createPlot.balconyNotes.$invalid && submitted, valid: createPlot.floor.$valid }"
ng-init="Model.BalconyNotes.Value = '{{ old(Plot::FIELD_BALCONY_NOTES) or $Model->BalconyNotes }}'" ng-required="noBalcony">
<label for="{{ Plot::FIELD_BALCONY_NOTES }}" data-error="#{{ Model.BalconyNotes.ValidationMessage }}" class="w-100">Comments</label>
<span class="help-block" ng-show="createPlot.balconyNotes.$invalid && submitted">As there is no balcony or patio, you must enter a comment</span>
</div>
</fieldset>
You could use ng-required built in directive to validate your form.
Like this:
<form novalidate name="myForm" ng-submit="mySubmitFunc()">
<label>Checkbox 1
<input ng-required="!(cb2 || cb3)" ng-model="cb1" type="checkbox">
</label>
<label>Checkbox 2
<input ng-required="!(cb1 || cb3)" ng-model="cb2" type="checkbox">
</label>
<label>Checkbox 3
<input ng-required="!(cb1 || cb2)" ng-model="cb3" type="checkbox">
</label>
<input type="submit" ng-disabled="myForm.$invalid" value="submit">
</form>
Here is a fiddle demonstrating how to handle such logic.
You could add a validation line:
<div ng-show="myForm.$submitted">
<p style="color: red" ng-show="!myForm.balcony && !myForm.patio && !myForm.noBalcony">You must select at least one of the options above.</p>
</div>
That div shows when the user tries to submit and the p shows when none are selected.
Your button will also need an ng-disabled directive with the same condition.
I'm using an ng-repeat directive to generate a set of forms.
I've managed to give unique names to each of the input fields using $index.
<input ng-class="{ 'has-error' : userForm.firstName-$index.$invalid }"
type="text"
class="form-control"
ng-model="passenger.firstName"
id="firstNameId-{{$index}}"
name="firstName-{{$index}}"
required
>
But, I could not get the ng-class expression to work with both the $index and $invalid statements working together.
What should be done in order to get,
ng-class="{ 'has-error' : userForm.firstName-$index.$invalid }"
to work?
Plunker is provided here
I just removed the dash all together from the input name, it is now working as intended
<form name='userForm'>
<div ng-repeat="person in people">
<input ng-class="{ 'has-error' : userForm.firstName{{$index}}.$invalid }" type="text" class="form-control" ng-model="passenger.firstName" id="firstName{{$index}}" name="firstName{{$index}}" required />
</div>
</form>
http://plnkr.co/edit/efLlNT3pUVBmENik61gU?p=preview
Im using angularjs and $invalid to add .has-error to my form group.. problem is one of my form groups has multiple inputs in it, side by side..
<div class="form-group">
<div class="col-sm-6">
<label for="location">Location</label>
<select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
</div>
<div class="col-sm-6">
<label for="name">Rack Size</label>
<input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>
</div>
</div>
validation would look similar to this, but would include additional validations for the size element as well.
ng-class="{ 'has-error': rackForm.location.$invalid && rackForm.location.$dirty }"
if name=size becomes invalid, as it stands .has-error is applied to the entire form group, and that can be confusing to the end user. Is there a way to either
apply the .has-error to a specific input
rearrange my form
layout a bit so each input is in its own form group, yet still retain
the side by side look.
The way i do it is to create form-group for each input element. Also, I believe you don't need inner <div class="col-sm-6"> since you can join that class with form-group and get the same results.
<div class="form-group col-sm-6" ng-class="{ 'has-error': rackForm.location.$invalid && rackForm.location.$dirty }">
<label for="location">Location</label>
<select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
</div>
<div class="form-group col-sm-6" ng-class="{ 'has-error': rackForm.size.$invalid && rackForm.size.$dirty }">
<label for="name">Rack Size</label>
<input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>
</div>
Let me know if it helped
The simple answer is you are trying to put too much logic into your HTML. Look in to creating Angular directives that implement your logic behind the scenes or do it in your controller, and set the state you are trying to check on your scope.
One of the key precepts of Angular is to not put logic in the HTML.
To do this without changing your layout, just use ng-class sintax in each div with col class. Like that:
<div class="form-group">
<div class="col-sm-6" ng-class="{ 'has-error': rackForm.location.$invalid && rackForm.location.$dirty }">
<label for="location">Location</label>
<select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
</div>
<div class="col-sm-6" ng-class="{ 'has-error': rackForm.size.$invalid && rackForm.size.$dirty }">
<label for="name">Rack Size</label>
<input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>
</div>
</div>
I am testing angular-fcsa-number directive, during the process the wrapper element of the input field is not assigned 'has-error' class even though the field is invalid. It seems to me that ng-class does not recognize that the field is invalid. What am I doing wrong here?
<form id="form1" runat="server" name="form1">
<div class="form-group" data-ng-class="{ 'has-error': form1.fcsaPlugin.$invalid }">
<label>FCSA Number</label>
<input type="text" name="fcsaPlugin" class="form-control" data-ng-model="action.FV10036" fcsa-number />
</div>
</form>
as you say it works when you remove the runat="server" attribute. Is by any chance you are using asp.net MasterPages. Had you tried to inspect the html, basically check the name of the form in the rendered html. if you are using MasterPage in asp.net the name of form will be aspnetForm, so your data-ng-class should be
data-ng-class="{ 'has-error': aspnetForm.fcsaPlugin.$invalid }"
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