Currently, I am developing an application using ionic-angular. I am facing a challenge with validation on the 'User Profile' page. The input fields on this page include 'First Name', 'Last Name', 'Cell Phone', 'Password', and others.
My goal is to show only one error message at a time, at the bottom of the last field. While utilizing 'ng-messages', I am receiving individual error messages for each field which is not what I want. How can I display only the first error message?
Below is a snippet of my HTML code:
<!-- Input Fields -->
<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>
<!-- Validation Messages -->
<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>
I would greatly appreciate your help in resolving this issue. Thank you!