5

私は自分の問題の解決策をハックしましたが、満足していません。それは私にとって「角度のある」とは感じず、コードの保守に追加されます。

まず、フォームの要件：

  1. モジュラーディレクティブ（再利用できるように）
  2. 各フィールドには複数のエラーが含まれる可能性がありますが、論理的な順序で一度に表示されるのは1つだけです。
  3. 有効なだけでなく、フォームが完成するまで送信ボタンを非表示にします。
  4. ブートストラップをテーマにした
  5. それを「角度のある方法」で行います。

問題は＃3です。私はこれを試しました：

<div ng-show="myform.$valid">
   <input type="submit" value="Submit" />
</div>

ただし、これにより、1つのフィールドが有効になるとすぐに送信ボタンが表示され、次のフィールドを開始すると再び非表示になります。私の「ハック修正」は、スコープに変数を作成し、コントローラーにメソッドを作成してそれらすべてをチェックすることでした（主にビューをクリーンに保つために...）しかし、これは正しくないと感じています。

これが私のフィドルです：http： //jsfiddle.net/thomporter/e3jye/

4

3 に答える 3

13

私はちょうどこれをいじくり回していました、そしてこれが論理的な順序で電子メールフィールドのエラーを強調するために私が着陸したものです（ブートストラップフォームコントロールグループを使用して）... http：//jsfiddle.net/kNKbJ/1/

<form name="form" ng-app>
    <div class="control-group" ng-class="{true: 'error'}[form.email.$error.email || (submitted && form.email.$error.required)]">
        <label class="control-label" for="email">Your email address</label>
        <div class="controls">
            <input type="email" name="email" ng-model="email" required />
            <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
            <span class="help-inline" ng-show="form.email.$error.email">Invalid email</span>
        </div>
    </div>

    <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>

submitted最初に送信するまで表示したくないものにチェックを追加できます

于 2013-04-05T19:46:02.380 に答える
8

たとえすべてが適用されたとしても、すべての検証メッセージが同時に表示されることを望まないというのはよくある問題です。

次のフォームは要件に合うはずですが、エラー検証メッセージを「ブートストラップテーマ」にしませんでした。デフォルトの角度機能のみを使用しています。

ただし、簡単に言うと、必要なメッセージが表示されます。値は存在するが有効な電子メールではない場合は、無効な電子メールメッセージが表示されます。

また、有効でない場合は送信ボタンを非表示にします...ただし...代わりにng-disabledを使用して送信ボタンを無効にすることをお勧めします。送信ボタンがどこにあるかを人々に知らせないのは、使い勝手の悪いIMOです。

<form name="myForm">
   <label for="email">Email</label>
   <input type="email" id="email" name="email" ng-model="formData.email" required/>
   <span ng-show="myForm.email.$error.required && myForm.email.$dirty">required</span>
   <span ng-show="!myForm.email.$error.required && myForm.email.$error.email && myForm.email.$dirty">invalid email</span>

   <button type="submit" class="btn" ng-show="myForm.$valid">Submit</button>
</form>

これらのチェックを検証に追加するのは少し時間がかかりますが、それはそれを行うための「角度のある方法」です。

それがお役に立てば幸いです。

于 2013-01-27T01:21:52.067 に答える
3

これに別のソリューションを追加して、可能な限り完全なものにしたかったのです。この検証は、asp.netの検証サマリーコントロールと同様のルックアンドフィールを備えています。

フォームはJSONから読み込まれます。フォームフィールドと検証は、と呼ばれる関数から取得されrequiredFieldsます。検証は、ロード時に顔を合わせるのではなく、ボタンをクリックするまで表示されません。

関連するコードを次に示します。

HTML

<div ng-show="showValidation() &&  !formReset">
    <h4>The following errors were found:</h4>
    <ul ng-repeat="(key,val) in requiredFields()">
        <li ng-show="myForm[key].$invalid">{{val}} is required</li>
    </ul>
</div>

<form name="myForm" novalidate>
  <label>Age: <span class="ng-cloak" ng-show="myForm.age.$valid">&#10004;</span></label>
  <input type="number" name="age" ng-model="form.age" required />
  <button ng-click="clickButton()">Submit</button>
</form>

JS

$scope.clickButton = function() {
  $scope.formReset = false;
  $scope.showValidation = function () { return $scope.myForm.$invalid; }
  if ($scope.myForm.$valid)
    $scope.jsonoutput = JSON.stringify($scope.form);
}

完全なコード： http： //plnkr.co/edit/GAHHab7pEFtlyHnPWVux？p = Preview

補足：ポップアップツールチップを表示したくない場合はnovalidate、タグの「」が重要です。form私の理解では、' required'属性はHTML5の一部であり、angularjs'requiredディレクティブと競合しています。

于 2013-04-26T04:08:10.450 に答える