156

ユーザー名とパスワードが空ではなく、3文字を超えていないことを確認するために、angularjsを使用してクライアント側の入力検証を使用して簡単なログインフォームを作成しています。以下のコードを参照してください。

<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
    <fieldset>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
        </div>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-lock"></i></span>
            <input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
        </div>

        <div class="control-group">
            <input class="btn" type="submit" value="Log in">
        </div>

    </fieldset>
</form>

そしてコントローラー：

var controller = function($scope) {

    $scope.login = {
        submit: function() {

            Console.info($scope.login.username + ' ' + $scope.login.password);
        }
    }

};

問題はlogin.submit、入力が有効でない場合でも関数が呼び出されることです。この動作を防ぐことは可能ですか?

ちなみに、bootstrap と requirejs も使用しています。

4

9 に答える 9

43

したがって、TheHippoからの提案された回答はうまくいきませんでした。代わりに、次のようにフォームをパラメーターとして関数に送信しました。

<form name="loginform" novalidate ng-submit="login.submit(loginForm)" class="css-form">

これにより、コントローラー メソッドでフォームが使用可能になります。

$scope.login = {
    submit : function(form) {
        if(form.$valid)....
    }
于 2013-05-02T15:34:21.413 に答える
3

OPの質問に対する直接的な解決策ではありませんが、フォームがng-appコンテキスト内にあるがAngularに完全に無視させたい場合は、ngNonBindableディレクティブを使用して明示的にこれを行うことができます:

<form ng-non-bindable>
  ...
</form>
于 2015-12-10T16:33:01.437 に答える
2

上記の回答に追加するだけで、

以下に示すように、2つの通常のボタンがありました。(no type="submit" どこにもありません)

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>
<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

どんなに試しても、フォームが有効になったらEnterキーを押すと、「フォームのクリア」ボタンが呼び出され、フォーム全体がクリアされました。

回避策として、

無効にして非表示にしたダミーの送信ボタンを追加する必要がありました。このダミー ボタンは、以下に示すように、他のすべてのボタンの上に配置する必要がありました。

<button type="submit" ng-hide="true" ng-disabled="true">Dummy</button>

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>

<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

まあ、私の意図はEnterで提出することではなかったので、上記のハックはうまくいきます.

于 2015-08-22T19:19:54.850 に答える
1

これが古いスレッドであることは知っていますが、私も貢献したいと思いました。私の解決策は、すでに回答としてマークされている投稿に似ています。いくつかのインライン JavaScript チェックはうまくいきます。

ng-click="form.$invalid ? alert('Please correct the form') : saveTask(task)"
于 2015-04-11T07:36:40.600 に答える