AngularJs Formsの解析について-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

AngularJs Formsの解析について

不言

Jun 25, 2018 am 11:39 AM

angularjs

この記事では主に 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}}

1	`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}}

1	`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中文网！

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7797

Java チュートリアル

1644

CakePHP チュートリアル

1402

Laravel チュートリアル

1299

PHP チュートリアル

1234

Related knowledge

入門から習得まで、2022 年の最新 5 つの angularjs チュートリアル Jun 15, 2017 pm 05:50 PM

Javascript は、コードの構成、コードのプログラミングパラダイム、およびオブジェクト指向理論の点で非常にユニークな言語です。しかし、JavaScript が 20 年間主流であったとはいえ、jQuery、Angularjs、さらには React などの人気のあるフレームワークを理解したい場合は、「Black Horse Cloud Classroom JavaScript Advanced Framework」を見てください。デザインビデオチュートリアル」。

PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザーエクスペリエンスを提供します Jun 27, 2023 pm 07:37 PM

今日の情報化時代において、ウェブサイトは人々が情報を入手し、コミュニケーションを図るための重要なツールとなっています。レスポンシブな Web サイトはさまざまなデバイスに適応し、ユーザーに高品質のエクスペリエンスを提供できます。これは、現代の Web サイト開発のホットスポットとなっています。この記事では、PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザーエクスペリエンスを提供する方法を紹介します。 PHP の概要 PHP は、Web 開発に最適なオープンソースのサーバー側プログラミング言語です。 PHP には、学びやすさ、クロスプラットフォーム、豊富なツールライブラリ、開発効率など、多くの利点があります。

PHP と AngularJS を使用して Web アプリケーションを構築する May 27, 2023 pm 08:10 PM

インターネットの継続的な発展に伴い、Web アプリケーションは企業情報構築の重要な部分となり、最新化作業に必要な手段となりました。 Web アプリケーションの開発、保守、拡張を容易にするために、開発者は開発ニーズに合った技術フレームワークとプログラミング言語を選択する必要があります。 PHP と AngularJS は非常に人気のある 2 つの Web 開発テクノロジであり、それぞれサーバー側とクライアント側のソリューションであり、これらを組み合わせて使用すると、Web アプリケーションの開発効率とユーザーエクスペリエンスを大幅に向上させることができます。 PHPPHPの利点

Flask と AngularJS を使用してシングルページ Web アプリケーションを構築する Jun 17, 2023 am 08:49 AM

Web テクノロジーの急速な発展に伴い、シングルページ Web アプリケーション (SinglePage Application、SPA) は、Web アプリケーションモデルとしてますます人気が高まっています。従来の複数ページの Web アプリケーションと比較して、SPA の最大の利点は、ユーザーエクスペリエンスがよりスムーズであり、サーバーのコンピューティング負荷も大幅に軽減されることです。この記事では、FlaskとAngularJSを使って簡単なSPAを構築する方法を紹介します。 Flask は軽量の Py です

AngularJS の基本の紹介 Apr 21, 2018 am 10:37 AM

この記事の内容は AngularJS の基本的な入門に関するもので、必要な友人に共有します。

PHP プログラミングで AngularJS を使用するにはどうすればよいですか? Jun 12, 2023 am 09:40 AM

Web アプリケーションの人気に伴い、フロントエンドフレームワーク AngularJS の人気も高まっています。 AngularJS は、Google が開発した JavaScript フレームワークで、動的な Web アプリケーション機能を備えた Web アプリケーションの構築に役立ちます。一方、バックエンドプログラミングの場合、PHP は非常に人気のあるプログラミング言語です。サーバーサイドプログラミングに PHP を使用している場合、PHP と AngularJS を使用すると、Web サイトにさらに動的な効果がもたらされます。

PHP と AngularJS を使用してオンラインファイル管理プラットフォームを開発し、ファイル管理を容易にする Jun 27, 2023 pm 01:34 PM

インターネットの普及に伴い、ネットワークを使用してファイルを転送したり共有したりする人が増えています。ただし、さまざまな理由により、FTP などの従来の方法をファイル管理に使用しても、現代のユーザーのニーズを満たすことができません。したがって、使いやすく、効率的で安全なオンラインファイル管理プラットフォームを確立することがトレンドになっています。この記事で紹介するオンラインファイル管理プラットフォームは、PHP と AngularJS をベースにしており、ファイルのアップロード、ダウンロード、編集、削除などの操作を簡単に実行でき、ファイル共有、検索、検索などの一連の強力な機能を提供します。

フロントエンド開発に PHP と AngularJS を使用する方法 May 11, 2023 pm 05:18 PM

インターネットの普及と発展に伴い、フロントエンド開発の重要性がますます高まっています。フロントエンド開発者として、私たちはさまざまな開発ツールとテクノロジーを理解し、習得する必要があります。その中でも、PHP と AngularJS は非常に便利で人気のあるツールです。この記事では、これら 2 つのツールをフロントエンド開発に使用する方法を説明します。 1. PHP の概要 PHP は、人気のあるオープンソースのサーバー側スクリプト言語であり、Web 開発に適しており、Web サーバーやさまざまなオペレーティングシステム上で実行できます。 PHP の利点は、シンプルさ、スピード、利便性です。

See all articles

AngularJs Formsの解析について

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック