11

私はAngularJSを初めて使用し、おそらくこれを間違った方法で行っていますが、フォームの検証に問題があります。

複数のDIVを含む1つのフォームがあります。各DIVは、フォームフローのページを表します。ユーザーを次のページ（DIV）に移動するための[次へ]ボタンが1つあります。

$ scopeの「currentpage」フィールドに基づいてページが表示されます。例：

<form> 
    <div ng-show="currentpage == 1">
        <input type="text" required />
    </div>
    <div ng-show="currentpage == 2">
        <input type="text" required />
    </div>
    <button ng-disabled="??" ng-click="next()" />
</form>

[次へ]ボタンをクリックして、非表示のDIVコントロールではなく、表示されているDIVコントロールでのみフォームの検証をトリガーしたいと思います。表示されているコントロールの検証ステータスに基づいて[次へ]ボタンを無効にするのは完璧です。しかし、どのように？コントローラでJQueryを使用することは避けたいと思います。

ありがとう！

4

3 に答える 3

14

ng-requiredの値を、条件付き送信/表示に当てはまる値に設定することもできます。したがって、検証は表示されていないときに合格します。

次に、送信時に、不要なフィールドを$scopeフォームオブジェクトから削除できます。よりクリーンで保守を容易にするために、特定の条件に対して必須/非必須属性の代替セットを保持する配列を作成できます。

このようにして、1つのフォームで行うことができます。

于 2013-06-30T14:56:43.477 に答える
9 
 <!DOCTYPE html>
 <html ng-app="myapp">
 <body>
  <form name="myForm" data-ng-controller="formController" novalidate> 
    <div ng-show="currentpage==1">
       Page1<input type="text" ng-model="page1" ng-required="currentpage==1"/>
     </div>
    <div ng-show="currentpage=='2'">
        Page2<input type="text" ng-model="page2" ng-required="currentpage==2"/>
    </div>
  <input ng-disabled="myForm.$invalid" type="submit" value="NEXT" ng-click="next()"/>
</form>
</body>
</html>

これを試して。

注意を払う：

ng-required = "currentpage==1" および ng-required="currentpage == 2"

ng-requiredはng-showと同じように機能します。したがって、currentpage == 1がtrueの場合、最初のdivのフィールドにはng-required = "true"があり、2番目のdivのフィールドにはng-required="false"があります。

同様に、[次へ]をクリックすると、currentpage == 2の場合、ng-required = "true"であるため、2番目のdivのフィールドが必須になりますが、1番目のdivのフィールドでは、ng-required="false"になります。

于 2014-06-26T20:52:15.920 に答える
3

提出時にそれらの1つをnullまたは空にすることができる場合、それは実際には「必須」ではないように思われますか？

おそらく、それぞれを別々の形式にする必要があります。現在のページが何であるかに基づいて、ある種の条件付き送信があるように思われるため、維持するのが面倒になります。

2つのフォームそれぞれのフォーム検証の例を次に示します。この例では、本当にそのようにしたい場合でも、各フォームは同じメソッドに送信されますが、すべてをswitchステートメントにまとめる必要はなく、独自のメソッドに送信することをお勧めします。場合によっては、各フォームに独自のコントローラーを与えることもあります。

<form> 
    <div ng-show="currentpage == 1">
        <form name="page1Form" ng-submit="next(currentPage)">
           <input type="text" name="item1" ng-model="item1" required />
           <span ng-show="page1Form.item1.$dirty && page1Form.item1.$error.required">required</span>
           <button type="submit" ng-disabled="page1Form.$invalid">Submit</button>
        </form>
    </div>
    <div ng-show="currentpage == 2">
        <form name="page2Form" ng-submit="next(currentPage)">
           <input type="text" name="item2" ng-model="item2" required />
           <span ng-show="page2Form.item2.$dirty && page2Form.item2.$error.required">required</span>
           <button type="submit" ng-disabled="page2Form.$invalid">Submit</button>
        </form>
    </div>
</form>
于 2013-01-22T16:33:49.547 に答える