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 }"
Related
I'm trying to perform simple form validation. I'm using required and ng-minlength conditions on my fields and ng-messages to display the error messages. the error messages should display only when user access the input field. But I do not see any error messages appearing. When I examined using chrome developer tools, I found the classes on the input field are changing but the 'has-error' class is not being added on the other div elements that are checking for this condition.
this is when the application got loaded.
this is when I clicked the username field and left the field without giving any data. Please observe the classes of the elements marked in red boxes. I'm not getting any errors displayed. What might the issue be?
1 this is the ng-messages code snippet that i'm using
<form role="form" name="userForm" novalidate class="container-fluid">
<div class="margin-bottom" ng-class="{'has-error' : userExists.notAvailable , 'has-error': userForm.username.$touched && userForm.username.$invalid}">
<label for="email">username</label>
<input class="form-control" type="text" placeholder="UserName" name="username" ng-blur="checkingUser($event)" ng-model="username" required ng-minlength="4">
<div ng-messages='userExists'>
<div ng-message='error'>Error!</div>
<div class="form-group" ng-message='notAvailable' class="has-error">Username already exists. Please choose a different username!!</div>
</div>
<div class="help-block" ng-messages="userForm.username.$error" ng-show="userForm.username.$touched" ng-class="{'has-error': userForm.username.$touched && userForm.username.$invalid}">
<div class="form-group" ng-message='required' class="has-error">Username cannot be empty</div>
<div class="form-group" ng-message='minlength'>minimum 4 charcters</div>
</div>
</div>
Edited after the source code is posted:
<div class="margin-bottom" ng-class="{'has-error' : userExists.notAvailable , 'has-error': userForm.username.$touched && userForm.username.$invalid}">
<label for="email">username</label>
<input class="form-control" type="text" placeholder="UserName" name="username" ng-blur="checkingUser($event)" ng-model="username" ng-required="true" ng-minlength="4">
<div ng-messages='userExists'>
<div ng-message='error'>Error!</div>
<div class="form-group has-error" ng-message='notAvailable' >Username already exists. Please choose a different username!!</div>
</div>
<div ng-messages="userForm.username.$touched && userForm.username.$error" ng-class="{'has-error': userForm.username.$touched && userForm.username.$invalid}">
<div class="form-group has-error" ng-message='required'>Username cannot be empty</div>
<div class="form-group" ng-message='minlength'>minimum 4 charcters</div>
</div>
</div>
This works on my machine.
The message will be displayed after you've submitted the form.
Make sure you've added required dependency in your module to use ngMessage. If necessary, please post the AngularJS code as well.
I enter the page and I can see the validation message immediately.
<div ng-class="{'has-error': test.$invalid}" class="form-group" >
<input id="field" name="field" required class="form-control" ng-model="field" type="text"/>
<div class="help-block error" ng-show="test.field.$error.required">Required</div>
</div>
link
How can avoid that ?
Your issue is essentially with respect to the fact that the condition for
ng-show is only test.field.$error.required.
What's the problem with this?
Even when the page loads, the field is still not a valid email id.
So, what's the fix?
You need to check that the user has actually clicked on the field and the field is no longer pristine.
How do we do that?
In the ng-show, add the following condition.
test.field.$error.required && test.field.$dirty
Here is a working DEMO
You also need to add a check to see if the input has been touched too.
<div ng-class="{'has-error': test.$invalid}" class="form-group" >
<input id="field" name="field" required class="form-control" ng-model="field" type="text"/>
<div class="help-block error" ng-show="test.field.$error.required && test.field.$touched">Required</div>
</div>
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
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
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