1

私はイオン角度に取り組んでいます。User Profile入力フィールドがFirst Name、Last Name、などCell Phoneであるページで検証を実行したい。Password

私が達成したいのは、最後のフィールドの下部に一度に 1 つのエラー メッセージを表示することです。使用する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

これをさらに減らすことができると思いますが（今は時間がありません）、単純な「表示」フィールドメッセージを使用できます。getNgMessageshelpersを書くことができるより良い解決策があり、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 に答える