CODEWITHSUNDEEP
javascriptangularjsionic-frameworkng-messages
Mr. Noddy
Mr. Noddy

Reputation: 1590

Displaying single error message at a time in angular js

I am working on ionic-angular. I want to perform validation on User Profile page, where my input fields are First Name, Last Name, Cell Phone, Password etc.

What I want to achieve is to display single error message at a time at the bottom of last field. By using ng-messages I am getting separate message for every field but I want to display only first error message.

Following is my html code

       <!-- input fields defined -->
              <label class="item item-input item-stacked-label">
                <span class="input-label">First Name</span>
                <input type="text" placeholder="jack" name="fName" ng-model="userData.fName" required="required" ng-focus="clearValidation();" ng-class="{ 'errorCls' : profileInfoForm.fName.$invalid, 'noErrorCls' : profileInfoForm.fName.$valid}"/>
              </label>

              <label class="item item-input item-stacked-label">
                <span class="input-label">Last Name</span>
                <input type="text" placeholder="dow" name="lName" ng-model="userData.lName" required="required" ng-focus="clearValidation();" ng-class="{ 'errorCls' : profileInfoForm.lName.$invalid, 'noErrorCls' : profileInfoForm.lName.$valid}"/>
              </label>

              <label class="item item-input item-stacked-label">
                <span class="input-label">Cell Phone Number</span>
                <input type="text" placeholder="185-728-4380" name="cellPhone" ng-model="userData.cellPhone" required="required" />
              </label>

     <!-- input fields validations defined -->
            <div ng-messages="(profileInfoForm.$submitted || profileInfoForm.fName.$dirty) && profileInfoForm.fName.$error">
               <span ng-message="required">Please enter first name</span>
            </div>
            <div ng-messages="(profileInfoForm.$submitted || profileInfoForm.lName.$dirty) && profileInfoForm.lName.$error">
               <span ng-message="required">Please enter last name</span>
            </div>
            <div ng-messages="(profileInfoForm.$submitted || profileInfoForm.cellPhone.$dirty) && profileInfoForm.cellPhone.$error">
               <span ng-message="required">Please enter cellphone number</span>
            </div>

How can I do it? Need your assistance.

Thank you.

Upvotes: 1

Views: 986

Answers (1)

Nix
Nix

Reputation: 58522

I think i could reduce this further (but dont have time right now) but you could use a simple "show" field message that would help. There is a better solution where you could write helpers getNgMessages, getFieldDisplayName and then you wouldnt need to be so wordy with the html (having to do an ng-messages per field). Ill show the "example" below of the better way but will need to write/test the JS later.

  <div ng-messages="(profileInfoForm.$submitted || profileInfoForm.fName.$dirty) && profileInfoForm.fName.$error" ng-show="showErrorMessage('fName')">
    <span ng-message="required">Please enter first name</span>
  </div>
  <div ng-messages="(profileInfoForm.$submitted || profileInfoForm.lName.$dirty) && profileInfoForm.lName.$error" ng-show="showErrorMessage('lName')">
    <span ng-message="required">Please enter last name</span>
  </div>
  <div ng-messages="(profileInfoForm.$submitted || profileInfoForm.cellPhone.$dirty) && profileInfoForm.cellPhone.$error" ng-show="showErrorMessage('cellPhone')">
    <span ng-message="required">Please enter cellphone number</span>
  </div>

in your controller:

this.showErrorMessage = showErrorMessage;

function showErrorMessage(field){
    if($scope.profileInfoForm.$submitted){
      return false;  //i switched this logic
    }
    if($scope.profileInfoForm.fName.$dirty &&  $scope.profileInfoForm.fName.$error){
          return  field=== 'fName';
    }

    if($scope.profileInfoForm.lName.$dirty &&  $scope.profileInfoForm.lName.$error){
          return field=== 'lName';
    }

    if($scope.profileInfoForm.cellPhone.$dirty &&  $scope.profileInfoForm.cellPhone.$error){
          return field=== 'cellPhone';
    }
       return false;
   }

---better way

<div ng-messages="getNgMessage()" >
    <span ng-message="required">Please enter {{getFieldDisplayName()}}</span>
</div>

 <!--
    You would then return for `getNgMessage` the first in this order $error.fName, $error.lName, $error.cellPhone 
   Then for `getFieldDisplayName()` same logic but you return the text you want to display for whatever field from `getNgMessage` was invalid.  So it would be

   fName = 'first name'
   lName = 'last name'
   cellPhone = 'cellphone number'
  -->

Upvotes: 1

Related Questions