29

以下のコードは、必要な基本的なフォーム検証を行うのに非常にうまく機能しているようです。

フィールドがダーティ + 無効で、Great!の場合、フォームには赤いName is requiredメッセージが表示されます。フィールドが汚れていて有効な場合のメッセージ。

しかし、フォームの各フィールドごとにこのコードを繰り返すのは面倒です。

<form name="myForm">
    <div class="control-group" 
     ng-class="{error: myForm.name.$invalid && myForm.name.$dirty}">
        <label>Name:</label>
        <input type="text" name="name" ng-model="user.name" required/>
        <span ng-show="myForm.name.$invalid && myForm.name.$dirty" 
            class="help-inline">Name is required</span>
        <span ng-show="myForm.names.$valid && myForm.names.$dirty">Great!</span>
    </div>
</form>

ng-showおよびng-class属性をより簡単な方法で指定できるようにしたいと考えています。

4

11 に答える 11

36

これを行う 1 つの方法は、検証式をスコープ メソッドに抽象化することです。

PLUNKER

HTML

<div class="control-group" ng-class="{error: isInvalid('name')}">
  <label>Name:</label>
  <input type="text" name="name" placeholder="Name" ng-model="user.name" required/>
  <span ng-show="isInvalid('name')" class="help-inline">Name is required</span>
  <span ng-show="isValid('name')">Great!</span>
</div>

コントローラ

function Ctrl($scope) {
  $scope.isInvalid = function(field){
    return $scope.myForm[field].$invalid && $scope.myForm[field].$dirty;
  };

  $scope.isValid = function(field){
    return $scope.myForm[field].$valid && $scope.myForm[field].$dirty;
  };

}
于 2013-02-22T11:44:05.920 に答える
8

私は質問が古いことを知っていますが、素晴らしい新しい角度ディレクティブを世界と共有したいと思います.Githubでプロジェクトを作成しました. PHP フレームワークを開発し、Angular で利用できるようにしました。

<!-- example 1 -->
<label for="input1">Simple Integer</label>
<input type="text" validation="integer|required" ng-model="form1.input1" name="input1" />

<!-- example 2 -->
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" validation="alpha|exact_len:3|required" ng-model="form1.input2" name="input2" />

したがって、単純なディレクティブで必要な検証ルールをいくらでも定義できvalidation="min_len:2|max_len:10|required|integer"、エラー メッセージは常に次のディレクティブに表示され<span>ます。入力用の1 行のコード、エラー表示用の 1 行のコード、それよりも簡単にすることはできません...ああ、追加したい場合はカスタム正規表現もサポートします:)

10行のクラスター化されたフォームはもうありません必要なのは 2 行だけで、5 つのバリデーターを含む入力の場合でも、1 つの入力のコードのコードです。フォームが無効にならないように心配する必要はありません。

私の Github プロジェクトAngular-Validationを見て、その言葉を広めてください =)

EDIT
ユーザー エクスペリエンスをさらにスムーズにするために、タイマーの検証を追加しました。コンセプトはシンプルで、入力に忙しい間はユーザーを悩ませず、ユーザーが一時停止したり入力を変更したりした場合は検証します (onBlur)... 気に入りました!!!
好みに応じてタイマーをカスタマイズすることもできます。ディレクティブ内でデフォルトを 1 秒に設定することにしましたが、カスタマイズしたい場合は、たとえばtyping-limit="5000"5 秒にするために呼び出すことができます。タイムアウト。完全な例:

<input type="text" validation="integer|required" typing-limit="5000" ng-model="form1.input1" name="input1" />


EDIT #2
また、入力一致確認検証 (例: パスワード確認) を追加しました。サンプル コードは次のとおりです。

<!-- input match confirmation, as for example: password confirmation -->
<label for="input4">Password</label>
<input type="password" name="input4" ng-model="form1.input4" validation="alpha|min_len:4|required"  />
<label for="input4c">Password Confirmation</label>
<input type="password" name="input4c" ng-model="form1.input4c" validation="match:form1.input4,Password|required"  />

編集 #3
ディレクティブをリファクタリングして<span>、エラーを表示する必要がないようにしました。ディレクティブはエラーを単独で処理するようになりました。コードの変更が一番上に反映されていることを確認してください。

DEMO
にライブデモを追加しましたPlunker

于 2014-02-04T06:20:35.400 に答える
4

Angular-Validatorを使用できます。

そうなる

  1. 必要なエラー メッセージを赤で表示します (オプションでブートストラップ クラスを使用)
  2. フィールドがバリデータを通過しない場合、フィールドを無効としてマークする
  3. 無効なフォームが送信されないようにする
  4. フィールドがダーティな場合にのみメッセージを表示する
  5. コードをクリーンアップしてください！

ならない

  1. 成功メッセージを表示します (成功メッセージのサポートは近日公開予定です)。

例

<form name="myForm" angular-validator>
    <div class="control-group">
        <label>Name:</label>
        <input type="text" 
               name="name"
               ng-model="user.name"
               required-message="'Name is required'"
               required/>
    </div>
</form>

成功メッセージを表示するための回避策:

<form name="myForm" angular-validator>
    <div class="control-group">
        <label>Name:</label>
        <input type="text" 
               name="name"
               ng-model="user.name"
               required-message="'Name is required'"
               required/>
        <span ng-show="myForm.names.$valid && myForm.names.$dirty">Great!</span>
    </div>
</form>

Angular-validator の使用例と例をさらに確認してください。

免責事項: 私は Angular-Validator の作成者です

于 2014-08-08T03:32:06.347 に答える
3

xtFormと呼ばれる github に angular ディレクティブ/プロジェクトがあります。単純な角度フィールドの検証への良いスタートを切ったようです。XtForm は、入力タグの後の検証メッセージ マークアップの量を減らします。

デモサイト へのリンクhttps://github.com/refactorthis/xtform

ちょっとした使用例。このフィールドを取得するために必要な追加のマークアップ (スパンでの ng-show) は必要ありません。エラー メッセージ/ツール ヒントです。 

<form xt-form novalidate>
  <input name="email" ng-model="modelVal" xt-validate required>
  <button type="submit">Submit</button>
</form>
于 2014-03-31T02:47:04.553 に答える
0 
<form ng-app="demoApp" ng-controller="validationCtrl" 
name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Your Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Your Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

<p>Mobile:<br>
<input type="number" name="number" ng-model="number" required>
<span style="color:red" ng-show="myForm.number.$dirty && myForm.number.$invalid">
<span ng-show="myForm.number.$error.required">Your Phone is required.</span>
<span ng-show="myForm.number.$error.number">Invalid number.</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid || myForm.number.$dirty && myForm.number.$invalid">
</p>
</form>

<script>
//This is controller
var app = angular.module('demoApp', []);
app.controller('validationCtrl', function($scope) {
    $scope.user = 'angular';
    $scope.email = 'angular.js@gmail.com';
});
</script>
于 2016-06-21T13:46:55.097 に答える
0

おそらく質問には遅すぎますが、外部ライブラリを使用して検証を処理できます。Angular フォーム バリデーター(私が作成) を使用すると、標準のバリデーターをいくつか用意することで簡単になります。

  1. 必須
  2. 文字列 (最小/最大長)
  3. 数値 (最小値/最大値)
  4. パターン
  5. Eメール
  6. URL
  7. 等しい (電子メール/パスワードの確認用)
  8. カスタム (独自の検証をプラグインできる場所)

また、複数のバリデーターを 1 つのフィールドに組み合わせることができます。

<form name="introform" ng-controller="intro">
    <div class="form-group" validator="required['Field is required'],string[5,20,'Should between 5 and 20 characters']">
        <label for="requiredField">Required Field</label>
        <input type="text" class="form-control" id="requiredField" name="requiredField"
               placeholder="Required Field" ng-model="model.requiredField">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>
于 2016-07-13T00:34:38.367 に答える
-2

index.php 

<form class="add-task" id="myForm" name="myForm" method="post" ng-submit="submitForm(myForm.$valid)" novalidate>
   <div class="form-actions">
      <!-- ng-patten for validation -->
      <span class="error" ng-show="myForm.username.$error.required">
      Required!</span> 
      <div class="input-group">
         <input type="text"  ng-model="user2.username"  name="username" ng-pattern="example.word" placeholder="User Name" required>
         <input  type="password"  ng-model="user2.password"   name="password" placeholder="user password" ng-minlength="4"
            ng-maxlength="10" required>
         <button class="btn btn-success" ng-show="displayadd" type="submit"  ng-click="addUser(user2)" ng-disabled="myForm.$invalid"><i class="glyphicon glyphicon-plus"></i> Add New user</button>
         <button class="btn btn-default" ng-show="displayupdate"  ng-click="updateUser(user2)" value="Update"ng-disabled="myForm.$invalid"><span class="glyphicon glyphicon-save"></span>Save Change</button>
         <p style="color:red" ng-show="myForm.password.$error.minlength" class="help-block">Password Is Very Short.</p>
         <p style="color:red"  ng-show="myForm.password.$error.maxlength" class="help-block">Password Is Very Long.</p>
      </div>
   </div>
</form>

app.jsに次の関数を含めます。

 $scope.submitForm = function() {
     if ($scope.myForm.$valid) {
         alert('Our Form Is Submited....');
     }
 };
于 2015-09-14T13:04:08.530 に答える