Question

我正在研究离子角度。我想在User Profile页面上执行验证，我的输入字段为First Name，Last Name，Cell Phone，Password等。

我想要实现的是在最后一个字段的底部一次显示单个错误消息。通过使用ng-messages我为每个字段获取单独的消息，但我想只显示第一条错误消息。

以下是我的HTML代码

       <!-- 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>

我该怎么办？需要你的帮助。

谢谢。

Answer 1

我想我可以进一步减少这种情况（但现在没有时间），但你可以使用一个简单的＆＃34; show＆＃34;可以帮助的字段消息。有一个更好的解决方案，你可以编写助手getNgMessages，getFieldDisplayName，然后你不需要如此罗嗦html（每个字段必须做一个ng-messages）。我会展示＆＃34;示例＆＃34;以下是更好的方法，但稍后需要编写/测试JS。

  <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>

在您的控制器中：

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;
   }

---更好的方式

<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'
  -->

以角度js一次显示单个错误消息

1 个答案: