7

私はAngularパーシャルで次の形式を持っています：

<form name="submit_entry_form" id="submit_entry_form" ng-submit="submit()" ng-controller="SubmitEntryFormCtrl" novalidate >
    <input type="text" name="first_name" ng-model="first_name" placeholder="First Name" required/><br />
    <input type="text" name="last_name" ng-model="last_name" placeholder="Last Name" required/><br />
    <input type="text" name="email" ng-model="email" placeholder="Email Address" required/><br />
    <input type="text" name="confirm_email" ng-model="confirm_email" placeholder="Confirm Email Address" required/><br />
    <span ng-show="submit_entry_form.$invalid">Error!</span>
    <input type="submit" id="submit" value="Submit" />
</form>

私が抱えている問題は、「エラー！」と表示されている下部のスパンにあります。入力の1つが「ng-dirty」と「ng-invalid」の両方である場合にのみ、これを表示したいと思います。上記のように、フォームが完全に有効になるまでエラーが表示されます。長い解決策は、次のようなことを行うことです。

<span ng-show="submit_entry_form.first_name.$dirty && submit_entry_form.first_name.$invalid || submit_entry_form.last_name.$dirty && submit_entry_form.last_name.$invalid || submit_entry_form.email.$dirty && submit_entry_form.email.$invalid || submit_entry_form.confirm_email.$dirty && submit_entry_form.confirm_email.$invalid">Error!</span>

これは醜いです。これを行うためのより良い方法はありますか？

4

1 に答える 1

17

方法1：コントローラーによって設定された$scopeの関数を使用します。

したがって、問題をよりよく理解して、フォームのいずれかのフィールドが$invalidと$dirtyの両方である場合にメッセージを表示したいとしました...

コントローラメソッドを追加します。

app.controller('MainCtrl', function($scope) {

  $scope.anyDirtyAndInvalid = function (form){
    for(var prop in form) {
      if(form.hasOwnProperty(prop)) {
         if(form[prop].$dirty && form[prop].$invalid) {
           return true;
         }
      }
    }
    return false;
  };
});

そしてあなたのHTMLで：

<span ng-show="anyDirtyAndInvalid(submit_entry_form);">Error!</span>

これがデモ用のプランカーです

とはいえ、誰かがあなたのフォームにデータを入力し、それが完全でない場合、フォーム自体は無効です。ですから、これが最高のユーザビリティかどうかはわかりません。しかし、それは機能するはずです。

方法2：フィルターを使用する！（おすすめされた）

私は今、この種のもののためのフィルターをお勧めします...

次のフィルターは上記と同じように機能しますが、Angular、IMOの方が適切です。また、プランク。

app.filter('anyInvalidDirtyFields', function () {
  return function(form) {
    for(var prop in form) {
      if(form.hasOwnProperty(prop)) {
        if(form[prop].$invalid && form[prop].$dirty) {
          return true; 
        }
      }
    }
    return false;
  };
});

<span ng-show="submit_entry_form | anyInvalidDirtyFields">Error!</span>
于 2013-01-15T21:16:14.173 に答える