การควบคุม (อินพุต, เลือก, textarea) เป็นวิธีสำหรับผู้ใช้ในการป้อนข้อมูล แบบฟอร์มคือการรวบรวมการควบคุมเหล่านี้โดยมีวัตถุประสงค์ในการจัดกลุ่มการควบคุมที่เกี่ยวข้อง
แบบฟอร์มและการควบคุมให้บริการตรวจสอบเพื่อให้ผู้ใช้สามารถรับพรอมต์สำหรับอินพุตที่ไม่ถูกต้อง สิ่งนี้ให้ประสบการณ์ผู้ใช้ที่ดีขึ้นเนื่องจากผู้ใช้สามารถรับคำติชมได้ทันทีและรู้วิธีแก้ไขข้อผิดพลาด โปรดจำไว้ว่าในขณะที่การตรวจสอบลูกค้ามีบทบาทสำคัญในการมอบประสบการณ์การใช้งานที่ดี แต่ก็สามารถข้ามผ่านได้ดังนั้นการตรวจสอบลูกค้าจึงไม่น่าเชื่อถือ การตรวจสอบฝั่งเซิร์ฟเวอร์ยังคงเป็นสิ่งจำเป็นสำหรับแอปพลิเคชันที่ปลอดภัย
1. รูปแบบง่าย
คำสั่งหลักในการทำความเข้าใจการเชื่อมโยงข้อมูลสองทางคือ ngmodel NGMODEL ให้ข้อมูลแบบสองทิศทางที่มีผลผูกพันจากโมเดลไปยังดูและดูโมเดล และยังให้ APIs สำหรับคำสั่งอื่น ๆ เพื่อเพิ่มพฤติกรรมของพวกเขา
<! doctype html> <html lang = "zh-cn" ng-app = "simpleform"> <head> <meta charset = "utf-8"> <title> propertyEvaluation </title> <style type = "css"> .ng-cloak {display: ไม่มี; } </style> </head> <body> <div ng-controller = "myctrl"> <ฟอร์ม novalidate> ชื่อ: <อินพุต ng-model = "user.name" type = "text"> <br/> อีเมล: <อินพุต ng-model = "user.email" type = "วิทยุ"> male <ค่าอินพุต = "female" ng-model = "user.gender" type = "Radio"> หญิง <br/> <button ng-click = "Reset ()"> คืนค่าล่าสุดบันทึก </button> <button ng-click = "ผู้ใช้) JSON}} </pre> <pre> บันทึก = {{บันทึก | JSON}} </pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("simpleform", []); app.controller ("myctrl", ฟังก์ชั่น ($ scope, $ window) {$ scope.saved = {}; $ scope.update = ฟังก์ชั่น (ผู้ใช้) {$ scope.saved = angular.copy (ผู้ใช้);}; $ scope.reset ();2. การใช้คลาส CSS
เพื่อสร้างแบบฟอร์มการควบคุมและ ngmodel ที่อุดมไปด้วยสไตล์สามารถเพิ่มคลาสต่อไปนี้:
ในตัวอย่างต่อไปนี้ให้ใช้ CSS เพื่อแสดงความถูกต้องของการควบคุมแต่ละรูปแบบ ในตัวอย่างจำเป็นต้องใช้ user.name และ user.email แต่เมื่อพวกเขาได้รับการแก้ไข (สกปรก) พื้นหลังจะปรากฏเป็นสีแดง สิ่งนี้ทำให้มั่นใจได้ว่าผู้ใช้จะไม่ถูกรบกวนจากความผิดพลาดจนกว่าจะมีปฏิสัมพันธ์กับแบบฟอร์ม (หลังจากการส่ง?) และค้นพบว่าความถูกต้องของมันไม่เป็นไปตาม
<! doctype html> <html lang = "zh-cn" ng-app = "cssclasses"> <head> <meta charset = "utf-8"> <title> cssclasses </title> <style type = "css"> .ng-cloak {แสดง: ไม่มี; } .css-form input.ng-invalid.ng-dirty {พื้นหลังสี: #fa787e; } .css-form input.ng-valid.ng-dirty {พื้นหลังสี: #78FA89; } </style> </head> <body> <div ng-controller = "myctrl"> <form novalidate name = "formName"> ชื่อ: <อินพุต ng-model = "user.name" type = "text" ต้องการ> <br/> อีเมล: <อินพุต ng-model = "user.email" ng-model = "user.gender" type = "Radio"> male <ค่าอินพุต = "female" ng-model = "user.gender" type = "Radio"> หญิง <br/> <button ng-click = "Reset ()"> รีเซ็ต </button> <button ng-click = "update (ผู้ใช้)"> JSON}} </pre> <pre> บันทึก = {{บันทึก | JSON}} </pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("cssclasses", []); app.controller ("myctrl", ฟังก์ชั่น ($ scope, $ window) {$ scope.saved = {}; $ scope.update = ฟังก์ชั่น (ผู้ใช้) {$ scope.saved = angular.copy (ผู้ใช้);}; $ scope.reset ();3. ผูกพันกับรูปแบบและสถานะการควบคุม
ในเชิงมุมรูปแบบเป็นตัวอย่างของ formcontroller อินสแตนซ์แบบฟอร์มสามารถสัมผัสกับขอบเขตที่จะใช้แอตทริบิวต์ชื่อ (ฉันไม่เข้าใจที่นี่ไม่มีคุณสมบัติในขอบเขตที่เคยอยู่กับแอตทริบิวต์ชื่อฟอร์มเสมอ แต่เนื่องจากมีวิธีการเช่น "เอกสารชื่อฟอร์ม" มันยังสามารถรับได้) ในทำนองเดียวกันการควบคุมเป็นอินสแตนซ์ของ ngmodelcontroller อินสแตนซ์การควบคุมสามารถสัมผัสกับรูปแบบในทำนองเดียวกันโดยใช้แอตทริบิวต์ชื่อ สิ่งนี้แสดงให้เห็นว่าคุณสมบัติภายในของทั้งรูปแบบและการควบคุมเป็นไปได้สำหรับการเชื่อมโยงในมุมมองโดยใช้มาตรฐานการเชื่อมโยงมาตรฐาน
สิ่งนี้ช่วยให้เราสามารถขยายตัวอย่างด้านบนโดยติดตามคุณสมบัติ:
<! doctype html> <html lang = "zh-cn" ng-app = "controlstate"> <head> <meta charset = "utf-8"> <title> controlstate </title> <style type = "css"> .ng-cloak {display: ไม่มี; } .css-form input.ng-invalid.ng-dirty {พื้นหลังสี: #fa787e; } .css-form input.ng-valid.ng-dirty {พื้นหลังสี: #78FA89; } </style> </head> <body> <div ng-controller = "myctrl"> <ฟอร์ม novalidate name = "formName"> ชื่อ: <อินพุต ng-model = "user.name" name = "username" type = "text" ชื่อ </span> </div> อีเมล: <อินพุต ng-model = "user.email" name = "useremail" type = "อีเมล" ที่ต้องการ> <br/> <div ng-show = "formname.useremail. $ สกปรก && formname.useremail. ng-show = "formName.userEmail. $ error.email"> นี่ไม่ใช่อีเมลที่ถูกต้อง </span> </div> เพศ: <ค่าอินพุต = "ชาย" ng-model = "user.gender" type = "วิทยุ"> male value = "Female" ng-model = "user.gender" ประเภท " name = "useragree" ต้องการ/> ฉันเห็นด้วย: <อินพุต type = "ข้อความ" ng-show = "user.agree" ng-model = "user.agreesign" ต้องการ/> <div ng-show = "! formname.useragree ||! user.agreesign" ng-disabled = "isunchanged (ผู้ใช้)"> รีเซ็ต </button> <button ng-click = "อัปเดต (ผู้ใช้)" ng-disabled = "formName. $ ไม่ถูกต้อง || isunchanged (ผู้ใช้)"> บันทึก </button> </form> </form> JSON}} </pre> <pre> บันทึก = {{บันทึก | JSON}} </pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("controlstate", []); app.controller ("myctrl", ฟังก์ชั่น ($ scope, $ window) {$ scope.saved = {}; $ scope.update = ฟังก์ชั่น (ผู้ใช้) {$ scope.saved = angular.copy (ผู้ใช้);}; $ scope.isunchanged = function (ผู้ใช้) {return angular.equals (ผู้ใช้, $ scope.saved);4. การตรวจสอบที่กำหนดเอง
Angular ให้การใช้งานสำหรับฟิลด์ฟอร์ม HTML สาธารณะส่วนใหญ่ (อินพุต, ข้อความ, จำนวน, URL, อีเมล, วิทยุ, ช่องทำเครื่องหมาย) ประเภทและยังมีคำสั่ง (จำเป็น, รูปแบบ, ความยาว, ความยาวสูงสุด, ขั้นต่ำ, สูงสุด) สำหรับการตรวจสอบแบบฟอร์ม
เราสามารถกำหนดปลั๊กอินการตรวจสอบของเราเองโดยกำหนดคำสั่งในคอนโทรลเลอร์ NGModel (นี่คือ NGModelController ที่เชื่อมต่อเข้าด้วยกันหรือไม่) ในการรับคอนโทรลเลอร์ Directive ระบุการพึ่งพาเช่นในตัวอย่างต่อไปนี้ (Directive กำหนดแอตทริบิวต์ที่ต้องการในวัตถุ)
โมเดลในการดูการอัปเดต - เมื่อใดก็ตามที่โมเดลเปลี่ยนแปลงฟังก์ชั่นทั้งหมดใน NGModelController $ Formatters (การตรวจสอบข้อมูลการแปลงข้อมูลและการแปลงรูปแบบเมื่อโมเดลเปลี่ยน) อาร์เรย์จะถูกคิวเพื่อดำเนินการดังนั้นแต่ละฟังก์ชั่นที่นี่มีโอกาสจัดรูปแบบค่าของโมเดลและปรับเปลี่ยนสถานะการตรวจสอบของการควบคุม (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngmodel.ngmodelcontroller#$setvalidity)
มุมมองการอัปเดตแบบจำลอง - ในทำนองเดียวกันไม่ว่าเมื่อใดก็ตามที่ผู้ใช้โต้ตอบกับตัวควบคุม NGMODELCONTROLLER. $ setViewValue จะถูกเรียกใช้ ตอนนี้เป็นเทิร์นที่จะเรียกใช้งาน ngmodelcontroller $ parsers (เมื่อการควบคุมได้รับค่าจาก DOM วิธีการทั้งหมดในอาเรย์นี้จะถูกดำเนินการค่าจะถูกตรวจสอบกรองหรือแปลงและตรวจสอบ)
ในตัวอย่างต่อไปนี้เราจะสร้างสองคำสั่ง
อันแรกคือจำนวนเต็มซึ่งรับผิดชอบในการตรวจสอบว่าอินพุตเป็นจำนวนเต็มที่ถูกต้องหรือไม่ ตัวอย่างเช่น 1.23 เป็นค่าที่ผิดกฎหมายเนื่องจากมีส่วนที่เป็นเศษส่วน โปรดทราบว่าเราใช้ Unshift เพื่อแทนที่การกดหางโดยใส่ไว้ในหัวอาร์เรย์เพราะเราต้องการให้มันดำเนินการก่อนและใช้ค่าของการควบคุมนี้ (การประเมินว่าอาร์เรย์ใช้เป็นคิว) เราจำเป็นต้องดำเนินการตรวจสอบก่อนการแปลง
คำสั่งที่สองคือ Smart-Float เขาแปลง "1.2" และ "1,2" เป็นหมายเลขจุดลอยตัวทางกฎหมาย "1.2" โปรดทราบว่าเราไม่สามารถใช้ประเภทอินพุต HTML5 "หมายเลข" ได้ที่นี่เนื่องจากเบราว์เซอร์ไม่อนุญาตให้ผู้ใช้ป้อนอักขระที่ผิดกฎหมายที่เราคาดหวังเช่น "1,2" (เป็นเพียงการรับรู้ "1.2")
<! doctype html> <html lang = "zh-cn" ng-app = "customvalidation"> <head> <meta charset = "utf-8"> <title> customvalidation </title> <style type = "css"> .ng-cloak {display: ไม่มี; } .css-form input.ng-invalid.ng-dirty {พื้นหลังสี: #fa787e; } .css-form input.ng-valid.ng-dirty {พื้นหลังสี: #78FA89; } </style> </head> <body> <div> <ฟอร์ม novalidate name = "formName"> <div> ขนาด (จำนวนเต็ม 0-10): <อินพุตจำนวนเต็มประเภท = "หมายเลข" ng-model = "size" name = "size" min = "0" max = "10" จำนวนเต็มที่ถูกต้อง </span> <span ng-show = "formname.size. $ error.min || formname.size. $ error.max"> ค่าต้องอยู่ระหว่าง 0 และ 10 </span> </div> <div> ความยาว ng-show = "formname.length.0error.float"> นี่ไม่ใช่หมายเลขจุดลอยตัวที่ถูกต้อง </span> </div> </form> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> var integer_regexp =/^/-?/d*$/; app.directive ("จำนวนเต็ม", function () {return {ต้องการ: "ngmodel", // ngmodelcontroller ลิงก์: ฟังก์ชั่น (ขอบเขต, ele, attrs, ctrl) {ctrl. $ parsers.unshift (ฟังก์ชั่น (viewvalue) {// $ parsers // การรับรองและให้แน่ใจว่า ctrl. $ setValidity ("จำนวนเต็ม", true); var float_regexp = /^/-?/d+(? app.directive ("smartfloat", function () {return {ต้องการ: "ngmodel", ลิงก์: ฟังก์ชั่น (ขอบเขต, ele, attrs, ctrl) {ctrl. $ parsers.unshift (ฟังก์ชั่น (viewvalue) {ถ้า (float_regexp.test (viewvalue) parsefloat (viewvalue.replace (",", "."));5. การใช้งานการควบคุมแบบกำหนดเอง (โดยใช้ NGMODEL)
Angular ใช้การควบคุมพื้นฐานของ HTML ทั้งหมด (อินพุต, Select, Textarea) และมีความสามารถสำหรับสถานการณ์ส่วนใหญ่ อย่างไรก็ตามหากเราจำเป็นต้องมีความยืดหยุ่นมากขึ้นเราสามารถบรรลุวัตถุประสงค์ในการปรับแต่งการควบคุมแบบฟอร์มโดยการเขียนคำสั่ง
เพื่อพัฒนาการควบคุมและ ngmodel เพื่อทำงานร่วมกันและใช้การเชื่อมโยงข้อมูลแบบสองทิศทางต้องมี:
การใช้วิธีการเรนเดอร์เป็นวิธีที่รับผิดชอบในการแสดงผลข้อมูลหลังจากดำเนินการและส่งผ่าน NGModelController ทั้งหมด $ วิธีการ Formatters
โทรหาวิธี $ setViewValue และโมเดลจะต้องได้รับการปรับปรุงในการตอบสนองไม่ว่าเมื่อใดที่ผู้ใช้โต้ตอบกับการควบคุม สิ่งนี้มักจะถูกนำไปใช้ในฟังเหตุการณ์ DOM
คุณสามารถดู $ CompileProvider.Directive สำหรับข้อมูลเพิ่มเติม
ตัวอย่างต่อไปนี้แสดงวิธีเพิ่มคุณสมบัติการเชื่อมข้อมูลสองทางไปยังองค์ประกอบที่สามารถแก้ไขได้
<! doctype html> <html lang = "zh-cn" ng-app = "customcontrol"> <head> <meta charset = "utf-8"> <title> customcontrol </title> <style type = "css"> .ng-cloak {display: ไม่มี; } div [contenteditable] {เคอร์เซอร์: ตัวชี้; พื้นหลังสี: #D0D0D0; } </style> </head> <body ng-controller = "myctrl"> <div> <div ที่เป็นที่ชื่นชอบ = "true" ng-model = "เนื้อหา"> dada ตัวน้อยของฉัน </div> <der> model = {{content}} </pre> <button ng-click = "Reset () src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("customControl", []); app.controller ("myctrl", ฟังก์ชั่น ($ scope) {$ scope.reset = function () {$ scope.content = "dada ตัวน้อยของฉัน"; // จะรับ ngmodelcontroller ได้อย่างไร app.directive ("contenteditable", function () {return {ต้องการ: "ngmodel", ลิงก์: ฟังก์ชั่น (ขอบเขต, ele, attrs, ctrl) {// ดู -> โมเดล ele.bind ("Blur Keyup", function () ctrl. $ setViewValue (ele.text ()); }); </script> </body> </html>