CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangularjs-validation
Mohaimin Moin
Mohaimin Moin

Reputation: 841

How can i add validation ng-maxlength into ng-repeat with error message?

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.

Upvotes: 0

Views: 715

Answers (1)

Ilya Dmitriev
Ilya Dmitriev

Reputation: 1720

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.

Upvotes: 2

Related Questions