關於AngularJs Forms的解析-js教程-PHP中文網

首頁

web前端

js教程

關於AngularJs Forms的解析

不言

Jun 25, 2018 am 11:39 AM

angularjs

本文主要介紹AngularJs Forms，這裡整理了相關資料及簡單範例程式碼，有需要的朋友可以參考下

控制項（input、select、textarea）是使用者輸入資料的一種方式。 Form（表單）是這些控制項的集合，目的是將相關的控制項分組。

　　表單和控制項提供了驗證服務，所以使用者可以收到無效輸入的提示。這提供了更好的用戶體驗，因為用戶可以立即獲得到回饋，並知道如何修正錯誤。請記住，雖然客戶端驗證在提供良好的使用者體驗中扮演重要的角色，但是它可以很簡單地被繞過，因此，客戶端驗證是不可信的。服務端驗證對於一個安全的應用程式來說仍然是必要的。

一、Simple form

　　理解雙向資料綁定的關鍵directive是ngModel。 ngModel提供了從model到view和view到model的雙向資料綁定。並且，它也向其他directive提供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}}

登入後複製

#二、Using CSS classes

　　為了讓form以及控制項、ngModel富有樣式，可以增加以下class：

ng-valid
ng-invalid
#ng -pristine（從未輸入過）
ng-dirty（輸入過）

　　下面的例子，使用CSS去顯示每個表單控制項的有效性。例子中，user.name和user.email都是必填的，但當它們修改過之後（dirty），背景將呈現紅色。這確保用戶不會直到與表單互動之後（提交之後？），發現未能滿足其有效性，才為一個錯誤而分心。

<!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}}

登入後複製

三、Binding to form and control state

　　在angular中，表單是FormController的一個實例。表單實例可以隨意地使用name屬性暴露到scope中（這裡沒看懂，scope裡面沒有一個跟form的name屬性一直的property，但由於有「document.表單名稱」這種方式，所以還是可以取得的）。相似地，控制項是NgModelController的實例。控制項實例可以相似地使用name屬性暴露在form中。這說明form和控制項（control）兩者的內部屬性對於使用標準綁定實體（standard binding primitives）綁定在視圖中的這個做法是可行的。

　　這允許我們透過以下特性來擴展上面的例子：

#RESET按鈕僅在form發生改變之後才可用。
SAVE按鈕僅在form發生變更且輸入有效的情況下可用。
為user.email和user.agree客製化錯誤訊息。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="ControlState">
<head>
  <meta charset="UTF-8">
  <title>ControlState</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" name="userName" type="text" required><br/>
    <p ng-show="formName.userName.$dirty&&formName.userName.$invalid">
      <span>请填写名字</span>
    </p>
    Email: <input ng-model="user.email" name="userEmail" type="email" required><br/>
    <p ng-show="formName.userEmail.$dirty && formName.userEmail.$invalid">提示:
      <span ng-show="formName.userEmail.$error.required">请填写Email</span>
      <span ng-show="formName.userEmail.$error.email">这不是一个有效的Email</span>
    </p>
    性别: <input value="男" ng-model="user.gender" type="radio">男
    <input value="女" ng-model="user.gender" type="radio">女
    <br/>
    <input type="checkbox" ng-model="user.agree" name="userAgree" required/>我同意：
    <input type="text" ng-show="user.agree" ng-model="user.agreeSign" required/>
    <br/>
    <p ng-show="!formName.userAgree || !user.agreeSign">请同意并签名~</p>
    <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
    <button ng-click="update(user)" ng-disabled="formName.$invalid || isUnchanged(user)">SAVE</button>
  </form>
  <pre class="brush:php;toolbar:false">form = {{user | json}}

saved = {{saved | json}}

登入後複製

#四、Custom Validation

　　angular為大多數公共的HTML表單域（input，text,number,url,email,radio,checkbox）類型提供了實現，也有一些為了表單驗證的directive（required，pattern,，inlength，maxlength，min，max）。

　　可以透過定義增加客製化驗證函數到ngModel controller（這裡是連在一起的ngModelController嗎？）中的directive來定義我們自己的驗證插件。為了得到一個controller，directive如下面的例子那樣指定了依賴關係（directive定義物件中的require屬性）。

Model到View更新- 無論何時Model改變，所有在ngModelController.$formatters（當model發生改變時觸發資料有效性驗證和格式化轉換）數組中的function將排隊執行，所以在model發生改變時觸發資料有效性驗證和格式化轉換）數組中的function將排隊執行，所以在這裡的每一個function都有機會格式化model的值，並且透過NgModelController.$setValidity（http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngModel.NgModelController#$setValidity ）修改控制項的驗證狀態。

View到Model更新 - 類似的方式，無論任何時候，使用者與一個控制項發生交互，將會觸發NgModelController.$setViewValue。這時候輪到執行NgModelController$parsers（當控制項從DOM取得值之後，將會執行這個陣列中所有的方法，對值進行審查過濾或轉換，也進行驗證）陣列中的所有方法。

　　在下面的範例中我們將建立兩個directive。

第一個是integer，它負責驗證輸入到底是不是一個有效的整數。例如1.23是一個非法的值，因為它包含小數部分。請注意，我們透過在數組頭部插入（unshift）來代替在尾部插入（push），這因為我們想它首先執行並使用這個控件的值（估計這個Array是當作隊列來使用的），我們需要在轉換發生之前執行驗證函數。

第二个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 Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7559

CakePHP 教程

1384

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

2022年最新5款的angularjs教學從入門到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。

使用PHP和AngularJS建立響應式網站，提供優質的使用者體驗 Jun 27, 2023 pm 07:37 PM

在現今資訊時代，網站已成為人們獲取資訊和交流的重要工具。一個響應式的網站能夠適應各種設備，為使用者提供優質的體驗，成為了現代網站開發的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網站，進而提供優質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言，非常適合Web開發。 PHP具有許多優點，如易於學習、跨平台、豐富的工具庫、開發效

使用PHP和AngularJS建立Web應用 May 27, 2023 pm 08:10 PM

隨著網路的不斷發展，Web應用已成為企業資訊化建設的重要組成部分，也是現代化工作的必要手段。為了讓Web應用能夠方便開發、維護和擴展，開發人員需要選擇適合自己開發需求的技術框架和程式語言。 PHP和AngularJS是兩種非常流行的Web開發技術，它們分別是伺服器端和客戶端的解決方案，透過結合使用可以大大提高Web應用的開發效率和使用體驗。 PHP的優勢PHP

使用Flask和AngularJS建立單頁Web應用程式 Jun 17, 2023 am 08:49 AM

隨著Web技術的快速發展，單頁Web應用程式（SinglePageApplication,SPA）已成為越來越流行的Web應用程式模型。相較於傳統的多頁Web應用程序，SPA的最大優勢在於使用者感受更加流暢，同時伺服器端的運算壓力也大幅減少。在本文中，我們將介紹如何使用Flask和AngularJS來建構一個簡單的SPA。 Flask是一款輕量級的Py

如何在PHP編程中使用AngularJS？ Jun 12, 2023 am 09:40 AM

隨著Web應用程式的普及，前端框架AngularJS變得越來越受歡迎。 AngularJS是一個由Google開發的JavaScript框架，它可以幫助你建立具有動態Web應用程式功能的網頁應用程式。另一方面，對於後端編程，PHP是非常受歡迎的程式語言。如果您正在使用PHP進行伺服器端編程，那麼結合AngularJS使用PHP將可以為您的網站帶來更多的動態效

使用PHP和AngularJS開發一個線上文件管理平台，方便文件管理 Jun 27, 2023 pm 01:34 PM

隨著網路的普及，越來越多的人使用網路進行檔案傳輸和分享。然而，由於各種原因，使用傳統的FTP等方式進行檔案管理無法滿足現代使用者的需求。因此，建立一個易用、高效、安全的線上文件管理平台已成為了一種趨勢。本文介紹的線上文件管理平台，基於PHP和AngularJS，能夠方便地進行文件上傳、下載、編輯、刪除等操作，並且提供了一系列強大的功能，例如文件共享、搜尋、

AngularJS基礎入門介紹 Apr 21, 2018 am 10:37 AM

這篇文章介紹的內容是關於AngularJS基礎入門介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下。

如何使用PHP和AngularJS進行前端開發 May 11, 2023 pm 05:18 PM

隨著網路的普及和發展，前端開發已變得越來越重要。身為前端開發人員，我們需要了解並掌握各種開發工具和技術。其中，PHP和AngularJS是兩種非常有用且受歡迎的工具。在本文中，我們將介紹如何使用這兩種工具進行前端開發。一、PHP介紹PHP是一種流行的開源伺服器端腳本語言，它適用於Web開發，可以在Web伺服器和各種作業系統上運作。 PHP的優點是簡單、快速、便

See all articles

關於AngularJs Forms的解析

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題