web-dev-qa-db-ja.com

anglejs ng-minlength検証が機能していません、フォームがまだ送信されています

検証が成功した場合にのみフォームを送信しようとしています。検証は必須では機能していますが、ng-minlengthでは機能していません

フォーム入力は無効ですが、フォームはまだ送信中です。

<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
 <div class="control-group" ng-class="{error: myForm.mobile.$invalid}">
        <label class="control-label" for="mobile">Mobile</label>
        <div class="controls">
            <input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11"  required />
            <span ng-show="myForm.mobile.$error.required" class="help-inline">Required</span>
            <span ng-show="myForm.mobile.$error.minlength" class="help-inline">Mobile number should be minimum 11 character starting from 07</span>           
        </div>
    </div>

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

         count: {{count}}<br />

<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
    </div>
</form>

http://jsfiddle.net/pMMke/9/

私は何を間違えていますか。

送信ボタン無効化メソッドを使用したくありません。

angularjsangularjs-validation
22
Developer

これはあなたが間違っていることです： Angularバリデータ と HTML5バリデータ の2つの概念を混ぜています。

たとえば、requiredHTML5バリデーターは次のように述べています：

存在する場合、フォームを送信する前に入力フィールドに入力する必要があることを指定します。

したがって、この属性を持つ入力を持つフォームを送信しようとすると、ユーザーにこれを説明するメッセージが表示され、フォームが送信されなくなります。これはあなたが望む振る舞いです。なぜng-minlengthで動作しないのですか？ ng-minlengthはAngularバリデーターです（ng-）、フォームに特別な動作を追加することはありません。入力された場所を無効（つまりフォーム）に設定するだけで、それをどうするかを決めてください。

オプションがあります：patternHTML5バリデータを使用して、少なくとも11文字が必要なフィールドを指定できます。これが好きです：

<input type="text" pattern=".{11,}">

したがって、この入力を含むフォームを送信すると、ユーザーが11文字未満を入力した場合、フォームは送信されません。

しかし、私たちはそれであり、すでにpatternバリデーターを使用しているため、正規表現を最大限に使用して、次のようなものを定義できます。

<input type="text" pattern="07[0-9]{9}" />

「07」で始まり、数字のみを含む11文字の値のみを許可します。私はあなたのフィドルを修正して、どのように機能するかを示しました： http://jsfiddle.net/helara/w35SQ/

29
T.M.

誤ってngMaxlength="12" ngMinlength="6" の代わりに ng-minlength="6" ng-maxlength="12"、今は問題なく動作しています。

5
Aqib Mumtaz

ng-minlengthとmg-maxlengthの両方がAngularJSで機能します。これをAngularJSバージョン1.3でテストしました。
ブラウザのネイティブ検証を無効にするには、<form>でnovalidateを必ず使用してください。

3
chaitu301

これは動作するはずです：

携帯電話番号を入力するには

ng-show="myForm.mobile.$touched && myForm.mobile.$error.required"

最小長の場合

ng-show="myForm.mobile.$touched && myForm.mobile.$error.minlength"

最大長の場合

ng-show="myForm.mobile.$touched && myForm.mobile.$error.maxlength"
2
GirishBabuC

私は同じ問題に直面していますが、ボタンを無効にするか、入力した値を自分で無視することしかできないと思います。また、コントローラーの$ validプロパティをチェックして値を無視することもできます...それはあまりいいことではありませんが、他の方法は見つかりませんでした。

0
Rafa

私のためのこの仕事

    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input ng-minlength="11" class="mdl-textfield__input" type="text" name="cpf" id="cpf" ng-model="avaliacao.cpf" ng-required="true" ng-pattern="/^\d+$/">
        <label class="mdl-textfield__label" for="cpf">CPF *</label>
    </div>
    <p style="color: #d50000;" ng-show="myForm.cpf.$error.required && myForm.cpf.$dirty">Field Required</p>
    <p style="color: #d50000;" ng-show="myForm.cpf.$error.pattern">Only numbers</p>
    <p style="color: #d50000;" ng-show="myForm.cpf.$error.minlength">Min 11 Chars</p>
0
Haroldo Ramirez