1

我正在研究离子角度。我想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>

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

谢谢你。

4

1 回答 1

1

我想我可以进一步减少这个（但现在没有时间），但你可以使用一个简单的“显示”字段消息，这会有所帮助。有一个更好的解决方案，你可以编写 helpers getNgMessages，getFieldDisplayName然后你就不需要对 html 这么罗嗦（必须为每个字段做一个 ng-messages）。我将在下面展示更好的方法的“示例”，但稍后需要编写/测试 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'
  -->
于 2016-02-02T14:53:06.290 回答