I have below validation for my texboxes within ng-repeat
<div class="col-md-6 col-lg-2">
<div class="form-group">
<label for="Country{{$index}}" class="control-label required">Country</label>
<div class="input-group">
<mc-lookup-dropdown data-lookup-name="CountryType" required data-model="ContactAddress.Country" id="Country{{$index}}" name="Country{{$index}}" class="form-control"></mc-lookup-dropdown>
</div>
<div data-ng-messages="memberDemographics.demographics.$error" class="validation-errors">
<div data-ng-message="Country">{{ ContactAddress.$serverErrors.Country }}</div></div>
<div data-ng-messages="demographicsForm.{{'Country'+$index}}.$error" class="validation-errors">
<div data-ng-message="required" data-ng-show="!demographicsForm.{{'Country'+$index}}.$pristine">This Field is Required</div>
</div>
</div>
</div>
below error is thrown on pageload "rror: [$parse:syntax]
http://errors.angularjs.org/1.5.8/$parse/syntax?p0=%7B&p1=is%20not%20a%20validNaNdentifier&p2=18&p3=demographicsForm.%7B%7B'PhoneNumber'%2B%index%7D%7D.%24error&p4=%7B%7B'PhoneNumber'%2B%index%7D%7D.%24error"
i need to have expression with in ng-message since textname depends on $index of ng-repeat loop..
These lines are having errors:
<div data-ng-messages="demographicsForm.{{'Country'+$index}}.$error" class="validation-errors">
<div data-ng-message="required" data-ng-show="!demographicsForm.{{'Country'+$index}}.$pristine">This Field is Required</div>
Change this with :
<div data-ng-messages="demographicsForm['Country' + $index].$error" class="validation-errors">
<div data-ng-message="required" data-ng-show="!demographicsForm['Country'+$index].$pristine">This Field is Required</div>
From this article
You only need to wrap in braces when using Angular's templating system - the braces tell Angular to replace the value. In this case, the value of data-ng-message is an expression that is being evaluated.
it worked out by changing the html to
<div data-ng-messages="demographicsForm['Country'+$index].$error" class="validation-errors">
<div data-ng-message="required" data-ng-show="!demographicsForm['Country'+$index].$pristine">This Field is Required</div>
</div>
thankyou
Related
I am listing div using ng-repeat to in following manner and include form-template which is assigned. I have several form-template and want to include in following manner. They can have nested ng-repeat to include same template. So i am using "trackerWidgetData" variable in my template. its working fine but inner ng-repeat have different variable(dependWidgetData).
How to use common model value for form-template. If we are including it in nested ng-repeat.
<div class="listview-trckr-new clearfix" ng-repeat="trackerWidgetData in optionsList.inlineTemplates | filter:options.trackerSearchClient track by $index">
<div class="listview-trckr-new-top">
<div class="listview-trckr-new-left clearfix">
<h3>{{trackerWidgetData.trackerName}}</h3>
</div>
<div class="listview-trckr-new-right">
<div ng-if="trackerWidgetData.template" ng-include src="'/public/views/tracker-templates/'+trackerWidgetData.template"></div>
</div>
</div>
<div class="listview-trckr-new-btm" ng-if="trackerWidgetData.dependendTrackers && trackerWidgetData.dependendTrackers.length">
<div class="listview-trckr-new-top" ng-repeat="dependWidgetData in trackerWidgetData.dependendTrackers">
<div class="listview-trckr-new-left clearfix">
<h3>{{dependWidgetData.trackerName}}</h3>
</div>
<div class="listview-trckr-new-right">
<div ng-if="dependWidgetData.template" ng-include src="'/public/views/tracker-templates/'+dependWidgetData.template"></div>
</div>
</div>
</div>
</div>
I have many different type template like this.
<script type="text/ng-template" id="addManualContent.tpl">
<ng-form name="stepAddForm" novalidate >
<div class="new-weight-tracker">
<div class="weight-auto-fil-input">
<input type="text" name="value" ng-model="form[trackerWidgetData.uniqueFormId].trackerValue.values[0].value" />
<div class="new-trkr-select">
<select class="weight-selectbox" name="foodUnit" ng-model="form[trackerWidgetData.uniqueFormId].trackerValue.values[0].unitId" ng-options="opt.id as opt.unitName for opt in trackerWidgetData.unitType.units">
</select>
</div>
</div>
<div class="new-tracker-cale">
<adm-dtp ng-model='form[trackerWidgetData.uniqueFormId].trackerValue.dateTime' maxdate="{{optionsList.maxTimeStamp}}" options='{format: toUpperString(dateFormat) + "hh:mm", default: todayTimestamp, freezeInput:false}'>
<input name="date" ng-model="form[trackerWidgetData.uniqueFormId].trackerValue.dateTime" ng-click="initDTP(form[trackerWidgetData.uniqueFormId].trackerValue.dateTime)" type="text" ng-required="true" dtp-input>
<i aria-hidden="true" class="fa fa-calendar" ng-click="initDTP(form[trackerWidgetData.uniqueFormId].trackerValue.dateTime)" dtp-toggle></i>
</adm-dtp>
</div>
<div class="new-logit-btn">
<a ng-href="" ng-class="{'disable-anchor-btn': optionsList.inAddProcess}" ng-click="optionsList.inAddProcess ? null : addTrackerValue(stepAddForm, trackerWidgetData)" class="fill_button">Log It</a>
</div>
</div>
</ng-form>
</script>
The Question is How to pass model value to ng-template when including it?
i am using ngMessages to validate a form , which is dynamically generated using ngRepeat.ngMessages is working fine but i want to display validation error messages only submit button is clicked.I am using ng-if for checking
submit button clicked and current form field is invalid . but i am getting angular compiler error , i think it is something to do with constructing the control name dynamically.
can any one suggest what is wrong with following markup.
<div ng-repeat="item in Data" class="container-fluid">
<ng-form name="fm">
<div class="row">
<div class="col-md-10">
<h2>{{ item.headerName}}</h2>
</div>
</div>
<div class="row" ng-repeat="it in item.items">
<div class="col-md-8">
<div class="form-group">
<label for="''{{ it.name}}''" class="col-xs-4 control-label"> {{ it.name}}</label>
<div class="col-xs-2">
<select name='{{"yOrNo" + $parent.$index + $index}}'
id='{{"yOrNo" + $parent.$index + $index}}'
class="form-control"
data-ng-disabled="false"
ng-model="it.yesorNo"
ng-options="yno.id as yno.value for yno in lookups.yno"
ng-required="true"></select>
<div class="messages" ng-messages="fm.yOrNo{{$parent.$index}}{{$index}}.$error" ng-if="fm.yOrNo{{$parent.$index}}{{$index}}.$error && submitClicked" >
<div class="error-message" ng-message="required">* required.</div>
</div>
</div>
</div>
</div>
</div>
</ng-form>
</div>
Your ng-form needs a unique name per iteration, so instead of:
<ng-form name="fm"> try something like:
<ng-form name="fm{{$index}}">
note that all references to that name=fm{{$index}} will now needs to be adjusted accordingly, E.G: this: fm.yOrNo{{$parent.$index}}{{$index}}.$error will need to become this: fm{{$parent.$index}}.yOrNo{{$parent.$index}}{{$index}}.$error
I have angularJS validation issue with below field , if i use ng-model its not making form $valid even the value is selected, So i used k-ng-model now this field is out of the validation scope, Any suggetion will be appreciated.
main.html
<div class="row">
<div class="form-group col-md-12">
<label for="themesList" class="required col-md-4">Themes:</label>
<div class="col-md-8">
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
ng-model-options="{updateOn: 'blur'}"
k-ng-model="challengesDTO.themesKyList" required
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && addChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div
I have a simple code :
<div class="row" ng-repeat="aDiagnosis in diagnosisListForPrescription">
<div class="col-md-4 padding-right-zero" id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisName" ng-model="aDiagnosis.Name" ng-disabled="true">
</div>
<div class="col-md-4 padding-right-zero form-group" show-errors id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisResult" ng-maxlength="200" ng-model="aDiagnosis.Result" />
<p class="help-block" ng-if="form.aDiagnosisResult.$error.maxlength">Too Large</p>
</div>
</div>
and use $scope.form.$valid to generate the error message.
But problem is since use ng-repeat every time it finds the same name and when i want to generate second list by clicking a button ,,first error message is gone and error-message now works on the second text (obviously).
So How can i generate error-message each and every time dynamically ,,so every text form in ng-repeat,it has it's own error-message.
You can generate dynamically name attribute of your inputs in ng-repeat. For example, you can put $index (or id of your objects or whatever you want) to generate unique name for your inputs.
<div class="row" ng-repeat="aDiagnosis in diagnosisListForPrescription">
<div class="col-md-4 padding-right-zero" id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisName-{{$index}}" ng-model="aDiagnosis.Name" ng-disabled="true">
</div>
<div class="col-md-4 padding-right-zero form-group" show-errors id={{aDiagnosis.rowIndex}}>
<input class="form-control" name="aDiagnosisResult-{{$index}}" ng-maxlength="200" ng-model="aDiagnosis.Result" />
<p class="help-block" ng-if="form['aDiagnosisResult-' + $index].$error.maxlength">Too Large</p>
</div>
</div>
Example on plunker.
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>