I am writing a form with Angular 1.5 and I am using ngMessages.
My forms will be dynamically generated based on what I get back from the server.
E.g.
<!-- dynamic form -->
<div ng-repeat="entry in form.items track by entry.id">
<!-- item type 0, text input -->
<label ng-if="entry.itemtype === '0'" class="item item-input item-stacked-label" ng-class="{ 'has-error' : templateForm.{{entry.id}}.$invalid }">
<span class="input-label"><span ng-if="entry.mandatory === '1'">* </span>{{ entry.itemlabel }}</span>
<input type="text" name="{{ entry.id}}" ng-model="entry.value" placeholder="{{ entry.itemlabel }}" required="entry.mandatory === '1'">
</label>
I want to use the entry id to name the input element. How can I write this part:
ng-class="{ 'has-error' : templateForm.{{entry.id}}.$invalid }"?
I tried to do it without the {{}} and it did not work.
It can be done with this syntax angular 1.5.3+
templateForm[entry.id].$invalid
Related
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
In the edit operation the value of the input box is filled by ng-model. But even though the value is present the validation shows red for input box as it needs a value to be typed.How to overcome this issue
<div class="row row-no-padding" ng-class="{ 'has-error' : schoolform.summary.$invalid || schoolform.summary.$pristine }">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 vz_input">
<input class="form-control" id="summary" name="summary" type="text" value="" placeholder="Summary" ng-model="project.summary" data-fv-field="summary" required jira-type="input" data-type="str">
</div>
</div>
The problem is that you should use && instead of ||. So it will be when the input is invalid and dirty:
<div class="row row-no-padding" ng-class="{ 'has-error' : schoolform.summary.$error.$required && schoolform.$submitted }">
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 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 have a repeater in my application and I am trying to add required field validation on the fields inside repeater. I used $index to generate id/name of the fields.
Form name is IPForm and used inside ng-class to highlight the error. Please see below code snap,
<tr ng-repeat="ClaimData in ClaimInfo">
<td>
<div ng-class="{ 'has-error' : IPForm.DateOfLoss{{$index}}.$invalid }">
<input type="text" id ="DateOfLoss{{$index}}" name="DateOfLoss{{$index}}" class="datefield form-control" ng-model="DateOfLoss"
required />
<span ng-if="IPForm.DateOfLoss{{$index}}.$invalid" class="help-block">Please enter Date of
Loss.</span>
</div>
</td>
</tr>
Problem is its not working at all. I think it is unable to evaluate IPForm.DateOfLoss{{$index}}.$invalid.
Alternatively, you can use the ng-form directive to handle your form validation which is a cleaner solution.
e.g.
<tr ng-repeat="ClaimData in ClaimInfo" ng-form="subForm">
<td>
<div ng-class="{ 'has-error' : subForm.DateOfLoss.$invalid }">
<input type="text" id ="DateOfLoss{{$index}}" name="DateOfLoss" class="datefield form-control" ng-model="DateOfLoss"
required />
<span ng-if="subForm.DateOfLoss.$invalid" class="help-block">Please enter Date of
Loss.</span>
</div>
</td>
</tr>