ホームページ > 記事 > ウェブフロントエンド > AngularJs Formsの解析について

AngularJs Formsの解析について

不言オリジナル: 2018-06-25 11:39:132387ブラウズ

この記事では主に AngularJs フォームを紹介します。ここでは関連情報と簡単なサンプルコードをまとめています。必要な方は参考にしてください。

コントロール (input、select、textarea) はユーザーがデータを入力するための手段です。フォームは、関連するコントロールをグループ化するために設計されたこれらのコントロールのコレクションです。

フォームとコントロールは検証サービスを提供するため、ユーザーは無効な入力に対するプロンプトを受け取ることができます。これにより、ユーザーは即座にフィードバックを受け取り、エラーの修正方法を知ることができるため、ユーザーエクスペリエンスが向上します。クライアント側の検証は優れたユーザーエクスペリエンスを提供する上で重要な役割を果たしますが、簡単に回避される可能性があるため、信頼できないことに留意してください。安全なアプリケーションにはサーバー側の認証が依然として必要です。

1. 単純な形式

双方向データバインディングを理解するための重要なディレクティブは ngModel です。 ngModel は、モデルからビュー、およびビューからモデルへの双方向のデータバインディングを提供します。さらに、他のディレクティブに API を提供して、その動作を強化します。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="SimpleForm">
<head>
  <meta charset="UTF-8">
  <title>PropertyEvaluation</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
  </style>
</head>
<body>
<p ng-controller="MyCtrl" class="ng-cloak">
  <form novalidate>
    名字: <input ng-model="user.name" type="text"><br/>
    Email: <input ng-model="user.email" type="email"><br/>
    性别: <input value="男" ng-model="user.gender" type="radio">男
    <input value="女" ng-model="user.gender" type="radio">女
    <br/>
    <button ng-click="reset()">还原上次保存</button>
    <button ng-click="update(user)">保存</button>
  </form>
  <pre class="brush:php;toolbar:false">form = {{user | json}}

saved = {{saved | json}}

2. CSS クラスの使用

フォーム、コントロール、ngModel を豊富なスタイルにするために、次のクラスを追加できます:

ng-valid
ng-invalid
ng-pristine (一度も入力されていない)
ng-dirty (入力されている)

次の例では、CSS を使用して各フォームコントロールの有効性を表示します。この例では、user.name と user.email は両方とも必須ですが、それらが変更されると (ダーティに)、背景が赤で表示されます。これにより、フォームを操作した後 (送信後?)、その有効性が満たされていないことが判明するまで、ユーザーはエラーによって気を散らされることがなくなります。 Angular では、フォームは FormController のインスタンスです。フォームインスタンスは、name 属性を使用して自由にスコープに公開できます (ここでは理解できませんが、スコープにはフォームの name 属性と同じプロパティはありませんが、「document.form」が原因です) name」メソッドでも取得できます)。同様に、コントロールは NgModelController のインスタンスです。コントロールインスタンスも同様に、name 属性を使用してフォームに公開できます。これは、フォームとコントロール (コントロール) の両方の内部プロパティが、標準のバインディングプリミティブを使用してビューでバインドできることを示しています。

これにより、次の機能を使用して上記の例を拡張できます:

RESET ボタンは、フォームが変更された後にのみ使用できます。

「保存」ボタンは、フォームが変更され、入力が有効な場合にのみ使用できます。

user.email と user.agree のカスタマイズされたエラーメッセージ。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CSSClasses">
<head>
  <meta charset="UTF-8">
  <title>CSSClasses</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    .css-form input.ng-invalid.ng-dirty {
      background-color: #fa787e;
    }
    .css-form input.ng-valid.ng-dirty {
      background-color: #78fa89;
    }
  </style>
</head>
<body>
<p ng-controller="MyCtrl" class="ng-cloak">
  <form novalidate class="css-form" name="formName">
    名字: <input ng-model="user.name" type="text" required><br/>
    Email: <input ng-model="user.email" type="email" required><br/>
    性别: <input value="男" ng-model="user.gender" type="radio">男
    <input value="女" ng-model="user.gender" type="radio">女
    <br/>
    <button ng-click="reset()">RESET</button>
    <button ng-click="update(user)">SAVE</button>
  </form>
  <pre class="brush:php;toolbar:false">form = {{user | json}}

saved = {{saved | json}}

IV. カスタム検証

Angular は、ほとんどのパブリック HTML フォームフィールド (入力、テキスト、数値、URL、電子メール、ラジオ、チェックボックス) タイプの実装を提供します。フォーム検証ディレクティブ (必須、パターン、長さ、最大長、最小、最大)。

カスタム検証関数を ngModel コントローラー (接続されている ngModelController ですか?) に追加するディレクティブを定義することで、独自の検証プラグインを定義できます。コントローラーを取得するには、次の例に示すようにディレクティブで依存関係を指定します (ディレクティブ定義オブジェクトの require 属性)。

モデルからビューへの更新 - モデルが変更されるたびに、ngModelController.$formatters (モデルが変更されるとデータ検証と形式変換がトリガーされる) 配列内のすべての関数が実行のためにキューに入れられるため、ここにあるすべての関数はフォーマットする機会があります。モデルの値を取得し、NgModelController.$setValidity (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngModel.NgModelController#$setValidity) を通じてコントロールを変更します。検証ステータス。

ビューからモデルへの更新 - 同様のアプローチで、ユーザーがコントロールを操作するたびに、NgModelController.$setViewValue がトリガーされます。現時点では、NgModelController$parsers を実行する番です (コントロールが DOM から値を取得した後、この配列内のすべてのメソッドを実行し、値を確認、フィルターまたは変換し、検証します)。。

次の例では、2つのディレクティブを作成します。

最初のものは integer で、入力が有効な整数であるかどうかを検証します。たとえば、1.23 は小数部分を含むため、不正な値です。配列の末尾に挿入 (プッシュ) するのではなく、先頭に挿入 (シフト解除) していることに注意してください。これは、配列を最初に実行してこのコントロールの値を使用するためです (この配列は、配列として使用されると推定されます)。変換が行われる前に検証関数が実行される必要があります。

第二个directive是smart-float。他将”1.2”和”1,2”转换为一个合法的浮点数”1.2”。注意，我们在这不可以使用HTML5的input类型”number”，因为浏览器不允许用户输入我们预期的非法字符，如”1,2”（它只认识”1.2”）。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CustomValidation">
<head>
  <meta charset="UTF-8">
  <title>CustomValidation</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    .css-form input.ng-invalid.ng-dirty {
      background-color: #fa787e;
    }
    .css-form input.ng-valid.ng-dirty {
      background-color: #78fa89;
    }
  </style>
</head>
<body>
<p class="ng-cloak">
  <form novalidate class="css-form" name="formName">
    <p>
      大小(整数 0 - 10):<input integer type="number" ng-model="size" name="size" min="0" max="10"/>{{size}}<br/>
      <span ng-show="formName.size.$error.integer">这不是一个有效的整数</span>
      <span ng-show="formName.size.$error.min || formName.size.$error.max">
        数值必须在0到10之间
      </span>
    </p>
    <p>
      长度（浮点数）：
      <input type="text" ng-model="length" name="length" smart-float/>
      {{length}}<br/>
      <span ng-show="formName.length.0error.float">这不是一个有效的浮点数</span>
    </p>
  </form>
</p>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  var app = angular.module("CustomValidation", []);
  var INTEGER_REGEXP = /^\-?\d*$/;
  app.directive("integer", function () {
    return {
      require:"ngModel",//NgModelController
      link:function(scope,ele,attrs,ctrl) {
        ctrl.$parsers.unshift(function (viewValue) {//$parsers，View到Model的更新
          if(INTEGER_REGEXP.test(viewValue)) {
            //合格放心肉
            ctrl.$setValidity("integer", true);
            return viewValue;
          }else {
            //私宰肉……
            ctrl.$setValidity("integer", false);
            return undefined;
          }
        });
      }
    };
  });
  var FLOAT_REGEXP = /^\-?\d+(?:[.,]\d+)?$/;
  app.directive("smartFloat", function () {
    return {
      require:"ngModel",
      link:function(scope,ele,attrs,ctrl) {
        ctrl.$parsers.unshift(function(viewValue) {
          if(FLOAT_REGEXP.test(viewValue)) {
            ctrl.$setValidity("float", true);
            return parseFloat(viewValue.replace(",", "."));
          }else {
            ctrl.$setValidity("float", false);
            return undefined;
          }
        });
      }
    }
  });
</script>
</body>
</html>

五、Implementing custom form control (using ngModel)

　　angular实现了所有HTML的基础控件（input，select，textarea），能胜任大多数场景。然而，如果我们需要更加灵活，我们可以通过编写一个directive来实现自定义表单控件的目的。

　　为了制定控件和ngModel一起工作，并且实现双向数据绑定，它需要：

实现render方法，是负责在执行完并通过所有NgModelController.$formatters方法后，呈现数据的方法。

调用$setViewValue方法，无论任何时候用户与控件发生交互，model需要进行响应的更新。这通常在DOM事件监听器里实现。
　　可以查看$compileProvider.directive获取更多信息。

　　下面的例子展示如何添加双向数据绑定特性到可以编辑的元素中。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CustomControl">
<head>
  <meta charset="UTF-8">
  <title>CustomControl</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    p[contenteditable] {
      cursor: pointer;
      background-color: #D0D0D0;
    }
  </style>
</head>
<body ng-controller="MyCtrl">
<p class="ng-cloak">
  <p contenteditable="true" ng-model="content" title="点击后编辑">My Little Dada</p>
  <pre class="brush:php;toolbar:false">model = {{content}}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

AngularJs Formsの解析について

関連記事