เมื่อเร็ว ๆ นี้ข้อบกพร่องที่เหลืออยู่ของส่วนประกอบที่เก็บรักษาไว้ในมือคือการตรวจสอบแบบฟอร์มและตรรกะภายในรหัสการตรวจสอบแบบฟอร์มของ บริษัท นั้นไม่ชัดเจนสำหรับรุ่นและโครงสร้างรหัสไม่ได้เป็นเชิงมุม
จำเป็นอย่างยิ่งที่จะต้องมีความเข้าใจในเชิงลึกเกี่ยวกับการตรวจสอบแบบฟอร์ม
<body ng-controller = "MainController"> <form name = "form" novalidate = "novalidate"> <input name = "text" type = "email" ng-model = "name"> </form> </body>
Ngmodel เป็นเวทมนตร์สีดำเชิงมุมซึ่งตระหนักถึงการผูกสองทาง เมื่อค่าของชื่อเปลี่ยนค่าอินพุตจะเปลี่ยน
เมื่ออินพุตของผู้ใช้เปลี่ยนค่าค่าของชื่อจะเปลี่ยน
วัตถุประสงค์ของ novalidate = "novalidate" คือการลบการตรวจสอบแบบฟอร์มที่มาพร้อมกับระบบ
หลังจากแยกวิเคราะห์รหัสด้านบน Angular จะสร้างตัวแปร "ฟอร์ม" และ $ scope.form ภายใต้ขอบเขต $ ของ MainController ชื่อของตัวแปรนี้เหมือนกับ form.name ใน html
และ $ scope.form.text เป็นรูปแบบของกล่องอินพุตข้อความที่สืบทอดมาจาก ngmodelcontroller
โดยที่ $ scope.form อินสแตนซ์มาจาก FormController เนื้อหาคือ:
โมเดล (นั่นคือ $ scope.form.text) ของกล่องอินพุตข้อความคือ:
โดยที่ $ dirty/$ pristine, $ ถูกต้อง/$ ไม่ถูกต้อง, $ ข้อผิดพลาดเป็นแอตทริบิวต์ทั่วไป โดยเฉพาะ $ ข้อผิดพลาด
การตรวจสอบแบบฟอร์มที่ง่ายที่สุด:
หลังจากทำความเข้าใจกับฟอร์มและกล่องอินพุตคุณสามารถแก้ไขคำสั่งที่ง่ายที่สุดเพื่อแสดงข้อผิดพลาด
เนื้อหา HTML มีดังนี้:
<form name = "form" novalidate = "novalidate"> <input name = "text" type = "email" ng-model = "name" ข้อผิดพลาด-ข้อผิดพลาด> </form>
รหัสคำสั่งมีดังนี้:
// เมื่อเกิดข้อผิดพลาดในกล่องอินพุตข้อผิดพลาดจะแสดงคำสั่ง ("errortip", ฟังก์ชั่น ($ compile) {return {จำกัด : "a", ต้องการ: "ngmodel", ลิงก์: ฟังก์ชัน ($ scope, $ element, $ attrs, $ ngmodel) ng-if = "haserror ()"> {{errors () | json}} </span> '; // สกปรกและไม่ถูกต้องแน่นอนว่ามันเป็นข้อผิดพลาด {อีเมล: จริง, xxx: true, xxxx: trie} $ scope.errors = function () {return $ ngmodel. $ error;} // รวบรวมคำสั่งผิดและใส่ไว้ในกล่องอินพุตหลังจาก $ element.after ($ compile (TIP) (subscope));มาดูผลการดำเนินการก่อน:
เมื่อป้อนที่อยู่อีเมลที่ไม่ถูกต้อง:
เมื่อป้อนที่อยู่อีเมลที่ถูกต้อง:
คำสั่ง errortip เริ่มต้นโดยการได้รับ ngmodelcontroller ผ่านต้องการ: "ngmodel" จากนั้นสร้างองค์ประกอบเพื่อแสดงข้อผิดพลาดลงในกล่องอินพุต
$ Compile ใช้ที่นี่และ $ Compile ใช้เพื่อรวบรวมและแสดงเนื้อหา HTML แบบไดนามิก
เมื่อมีเนื้อหาข้อผิดพลาดองค์ประกอบที่ไม่ถูกต้องจะปรากฏขึ้น
ทำไมวิธีการเข้าถึง Subscope Haserror และข้อผิดพลาด?
เพราะห่วงโซ่ต้นแบบ เพียงแค่ดูภาพด้านล่างเพื่อทราบ
ปรับแต่งเนื้อหาข้อผิดพลาด
ตกลงเป็นที่ชัดเจนว่าการตรวจสอบแบบฟอร์มไม่สามารถใช้ได้ในขณะนี้ เราต้องปรับแต่งเนื้อหาข้อผิดพลาดที่จะแสดงและมีข้อผิดพลาดมากกว่าหนึ่งข้อที่จะแสดง
ใช้ ng-repeat เพื่อแสดงข้อผิดพลาดหลายอย่างนั่นคือใช้คำสั่ง "errortip"
tip = '<span ng-if = "haserror ()"> {{errors () | JSON}} </span> ';เปลี่ยนเป็น:
tip = '<ul ng-if = "haserror ()" ng-repeat = "(errorkey, errorvalue) ในข้อผิดพลาด ()">' +'<span ng-if = "errorvalue"> {rorreskey | ErrorFilter}} </span> ' +' </ul> ';โดยที่ Errorfilter เป็นตัวกรองสำหรับการแสดงข้อความแสดงข้อผิดพลาดที่กำหนดเอง ตัวกรองเป็นฟังก์ชั่นจริง
รหัสมีดังนี้:
.Filter ("ErrorFilter", function () {return function (อินพุต) {var errorMessagesMap = {อีเมล: "โปรดป้อนที่อยู่อีเมลที่ถูกต้อง", xxoo: "ไม่เหมาะสำหรับเด็ก"} ส่งคืน errorMessagesMap [อินพุต];}});ผลลัพธ์มีดังนี้:
ตกลงที่นี่เราสามารถจัดการการตรวจสอบแบบฟอร์ม "ง่าย" ใช่ง่าย เราต้องไปให้ลึกลงไป
การยืนยันแบบฟอร์มที่กำหนดเอง!
จากนั้นให้ใช้การตรวจสอบแบบฟอร์มที่ไม่สามารถป้อนได้ใน "คนหล่อ"
คำแนะนำมีดังนี้:
.directive ("Donotinputhandsomeboy", ฟังก์ชั่น ($ compile) {return {จำกัด : "a", ต้องการ: "ngmodel", ลิงก์: ฟังก์ชั่น ($ ขอบเขต, $ องค์ประกอบ, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push ไม่ถูกต้อง $ ข้อผิดพลาดจะกลายเป็น {หล่อ: จริง} $ ngmodel. $ setValidity ("หล่อ", เท็จ);} ค่าคืน;})}}})ผลลัพธ์มีดังนี้:
มีสองสิ่งสำคัญที่นี่ $ ngmodel. $ parsers และ $ ngmodel. $ setValidity
$ ngmodel. $ parsers เป็นอาร์เรย์ เมื่อป้อนเนื้อหาในกล่องอินพุตมันจะสำรวจและดำเนินการฟังก์ชั่นใน $ parsers
$ ngmodel. $ setValidity ("หล่อ", เท็จ); การตั้งค่าหล่อเป็นไม่ถูกต้องจะตั้งค่า $ ngmodel $ error ["หล่อ"] = true;
ลบ $ ngmodel. $$ ความสำเร็จ ["หล่อ"] ก็ถูกตั้งค่าและคุณสามารถค้นหารายละเอียดซอร์สโค้ดเพื่อดูรายละเอียด
ที่นี่ฉันจะสรุปกระบวนการ
-> อินพุตผู้ใช้
-> Angular ดำเนินการฟังก์ชั่นทั้งหมดใน $ parsers
-> ตรวจสอบ $ setValidity ("xxoo", false); จากนั้น xxoo จะถูกตั้งค่าเป็น $ ngmodel. $ error ["xxoo"]
-> จากนั้นคำสั่ง errortip จะทำซ้ำ $ ngmodel. $ ข้อผิดพลาด
-> ข้อผิดพลาด Filter จะหลบหนีข้อความแสดงข้อผิดพลาด
-> ข้อความแสดงข้อผิดพลาดปรากฏขึ้นในตอนท้าย
ปรับแต่งเนื้อหาการแสดงผลของกล่องอินพุต
หลายครั้งการพัฒนาไม่ง่ายเหมือนการตรวจสอบข้อผิดพลาดและการแสดงข้อผิดพลาด บางครั้งเราต้องจัดรูปแบบเนื้อหาของกล่องอินพุต
ตัวอย่างเช่น "1,000" จะแสดงเป็น "1,000"
"สวัสดี" ปรากฏเป็น "สวัสดี"
ตอนนี้เรามาใช้ชื่อย่ออัตโนมัติ
ซอร์สโค้ดมีดังนี้:
<form name = "form" novelidate = "novalidate"> <input name = "text" type = "text" ng-model = "ชื่อ" ส่วนบน> </form> .directive ("uppercase", function () {return {จำกัด : "a", ต้องการ: "ngmodel", ลิงก์: ฟังก์ชั่น ($ scope, $ องค์ประกอบ, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push (ฟังก์ชัน (ค่า) {var viewvalue; if (angular.isundined ViewValue [0] .touppercase () + viewValue.substring (1); // ตั้งค่าเนื้อหาอินเตอร์เฟส $ ngmodel. $ setViewValue (viewValue); // ทรัพยากรไปยังอินเทอร์เฟซฟังก์ชั่นนี้มีความสำคัญมากที่นี่เราใช้ $ setViewValue และ $ render, $ setViewValue เพื่อตั้งค่า viewValue เป็นค่าที่ระบุและ $ render แสดง viewValue ไปยังอินเตอร์เฟส
หลายคนคิดว่าการใช้ $ setViewValue สามารถอัปเดตอินเทอร์เฟซได้ แต่พวกเขาไม่ได้ใช้ $ render และในที่สุดอินเตอร์เฟสก็ไม่ได้รับการรีเฟรชไม่ว่าจะทำอะไร
หากเพียง $ ngmodel. $ parsers ไม่เพียงพอ $ parsers จะถูกเรียกใช้ก็ต่อเมื่อผู้ใช้ป้อนเนื้อหาใหม่ในกล่องอินพุต อีกสถานการณ์หนึ่งคือเนื้อหาของกล่องอินพุตจะต้องรีเฟรช:
นั่นคือการผูกสองทาง ตัวอย่างเช่นกล่องอินพุตตอนนี้ถูกผูกไว้กับ $ scope.name ใน MainController เมื่อผู้ใช้เปลี่ยน $ scope.name เป็น "สวัสดี" ในรูปแบบอื่นการใช้อักษรตัวพิมพ์ใหญ่ของตัวอักษรตัวแรกจะไม่สามารถเห็นได้ในกล่องอินพุต
ในเวลานี้คุณต้องใช้ $ formatters ดังนั้นมาดูตัวอย่างก่อน
<body ng-controller = "MainController"> <form name = "form" novalidate = "novalidate"> <button ng-click = "random ()"> สุ่ม </button> <input name = "text" type = "text" ng-model = "ชื่อ"
เนื้อหา MainController:
Angular.module ("App", []). คอนโทรลเลอร์ ("MainController", ฟังก์ชั่น ($ scope, $ timeout) {$ scope.random = function () {$ spope.name = "hello" + math.random ();}})มันง่ายพอ เมื่อคุณคลิกปุ่ม $ scope.name จะกลายเป็นเนื้อหาแบบสุ่มเริ่มต้นด้วย Hello
เห็นได้ชัดว่าจดหมายเริ่มต้นของ Hello ไม่ได้เป็นตัวพิมพ์ใหญ่ไม่ใช่สิ่งที่เราต้องการ
เราแก้ไขเนื้อหาของคำสั่งต่อไปนี้:
.Directive ("uppercase", function () {return {จำกัด : "A", ต้องการ: "ngmodel", ลิงก์: ฟังก์ชั่น ($ scope, $ องค์ประกอบ, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push $ ngmodel. $ setViewValue (viewValue); // render ไปยังอินเตอร์เฟสฟังก์ชั่นนี้สำคัญมาก $ ngmodel. $ render (); ไม่ได้กำหนดและแปลงเนื้อหาทั้งหมดเป็นฟังก์ชั่นสตริง handleampyValue (ค่า) {return angular.isundefined (ค่า)?เพื่อสรุป:
1.
-> ผู้ใช้ป้อนเนื้อหาในกล่องอินพุต
-> การสำรวจเชิงมุมของฟังก์ชั่นใน $ ngmodel. $ parsers แปลงเนื้อหาอินพุตแล้วตั้งค่าเป็น $ ngmodel $ modelValue
-> ในฟังก์ชั่นในอาร์เรย์ $ ngmodel. $ parsers เราแก้ไข $ ngmodel. $ viewValue จากนั้น $ ngmode. $ render () แสดงเนื้อหา
2.
-> สร้างสตริงแบบสุ่มผ่านปุ่มเพื่อตั้งค่าเป็นชื่อ
-> ทุกครั้งที่การตรวจจับสกปรกจะพิจารณาว่าค่าของชื่อนั้นไม่สอดคล้องกับ $ ngmodel $ modelValue (ที่นี่ถูกนำไปใช้โดยใช้ $ นาฬิกา) หากไม่สอดคล้องกันให้วนซ้ำผ่านฟังก์ชั่นทั้งหมดใน $ formaters ตามลำดับย้อนกลับและดำเนินการและกำหนดค่าคืนสุดท้ายให้กับ $ ngmodel $ viewValue
-> รีเฟรชเนื้อหากล่องอินพุต
ตัวอย่าง "ปรับแต่งเนื้อหาการแสดงผลของกล่องอินพุต" ได้หรือไม่?
ทำไมต้องปรับให้เหมาะสม?
เหตุผลนั้นง่ายมาก เพื่อที่จะใช้ "เนื้อหาที่กำหนดเอง" จะใช้ $ parsers และ $ formatters ในความเป็นจริงเนื้อหาของทั้งสองนั้นคล้ายกันมาก! สิ่งนี้สำคัญมาก
จะเพิ่มประสิทธิภาพได้อย่างไร?
ใช้ $ ngmodel. $ validators
ตกลงตอนนี้เปลี่ยนตัวอย่าง
.directive ("uppercase", function () {return {จำกัด : "A", ต้องการ: "ngmodel", ลิงก์: ฟังก์ชั่น ($ scope, $ องค์ประกอบ, $ attrs, $ ngmodel) {// 1.3 ได้รับการสนับสนุน viewValue = uppercasefirstword (handleemptyValue (modelValue)); // ตั้งค่าเนื้อหาอินเตอร์เฟส $ ngmodel. $ setViewValue (viewValue); // ทรัพยากรไปยังอินเทอร์เฟซฟังก์ชั่นนี้มีความสำคัญมาก เข้าสู่ฟังก์ชั่นสตริง handleemptyValue (ค่า) {return angular.isundefined (ค่า)?รหัสนั้นง่ายกว่ามากรองรับโดย $ ngmodel เท่านั้น $ validators ในเวอร์ชัน 1.3 หรือสูงกว่า
หากค่าส่งคืนของ $ ngmodel. $ validators ฟังก์ชั่น uppercase เป็นเท็จดังนั้น $ ngmodel. $ error ['uppercase'] = true สิ่งนี้คล้ายกับ $ ngmodel. $ setValidity ("uppercase", false)