ความแตกต่างระหว่างที่จำเป็นและจำเป็นต้องมี ng คืออะไร?

278

ความแตกต่างระหว่างrequiredและng-required(การตรวจสอบแบบฟอร์ม) คืออะไร?

angularjs required

คำตอบ:

421

องค์ประกอบแบบฟอร์ม AngularJS ค้นหาrequiredคุณลักษณะเพื่อดำเนินการฟังก์ชันการตรวจสอบความถูกต้อง ng-requiredอนุญาตให้คุณตั้งค่าแอrequiredททริบิวต์โดยขึ้นอยู่กับการทดสอบบูลีน (ตัวอย่างเช่นต้องการเฉพาะฟิลด์ B - พูด, หมายเลขนักเรียน - หากฟิลด์ A มีค่าบางค่า - หากคุณเลือก "นักเรียน" เป็นตัวเลือก )

เป็นตัวอย่าง<input required>และ<input ng-required="true">เป็นสิ่งเดียวกัน

หากคุณสงสัยว่าทำไมจึงเป็นเช่นนี้ (และไม่ใช่แค่สร้าง<input required="true">หรือ<input required="false">) มันเกิดจากข้อ จำกัด ของ HTML - requiredแอตทริบิวต์ไม่มีค่าที่เกี่ยวข้อง - การมีอยู่ของมันหมายถึง (ตามมาตรฐาน HTML) ที่องค์ประกอบนั้นจำเป็นต้องมี - ดังนั้นเชิงมุมต้องการวิธีตั้งค่า / ยกเลิกค่าที่ต้องการ ( required="false"เป็น HTML ที่ไม่ถูกต้อง)

— Tiago Roldão
แหล่งที่มา

ฉันจะลบ ng-required ตามลำดับได้อย่างไร เพราะฉันลองใช้วิธี jquery บางอย่างโดยไม่ประสบความสำเร็จ

— พวกเขาจะใช้เวลา

ฉันไม่แน่ใจว่าฉันเข้าใจคำถาม .. ในทางปฏิบัติคุณไม่เคยใช้ ng-required = "true" แต่ค่อนข้าง ng-required = "scopedVariable" หรือ ng-required = "scopeTruthTest ()" และค่าของ ตัวแปร / ฟังก์ชั่นพิจารณาว่าจำเป็นต้องมีองค์ประกอบหรือไม่ อย่าใช้ jQuery เพื่อยุ่งกับสิ่งเหล่านี้ในแอปเชิงมุมหรือคุณจะได้ผลลัพธ์ที่คาดเดาไม่ได้!

— Tiago Roldão

มูลค่าการกล่าวขวัญว่าจำเป็นต้องมี ng แสดงข้อความแสดงข้อผิดพลาดสไตล์คำแนะนำเครื่องมือเริ่มต้นที่บอกว่า 'จำเป็นต้องกรอกข้อมูลในฟิลด์นี้' ซึ่งไม่ต้องการเสมอไป ฉันกำลังมองหาวิธีที่จะปิดมัน

— Adam Spence

มันไม่ได้จริงๆ ไม่แน่ใจ แต่ฉันคิดว่าสิ่งที่คุณกำลังอ้างถึงคือการตรวจสอบความถูกต้อง html5 ซึ่งจะถูก preformed โดยอัตโนมัติโดยเบราว์เซอร์ที่ทันสมัยที่สุด หากคุณต้องการที่จะใช้การควบคุมมากกว่านี้ (ปิดการใช้งานสิ่งที่เบราว์เซอร์ไม่) คุณสามารถเพิ่ม novalidate <form method="post" action="/foo" novalidate>แอตทริบิวต์: นี่เป็นแอตทริบิวต์ html5 ซึ่งไม่เกี่ยวข้องกับ angularJS

— Tiago Roldão

ฉันคาดว่าเมื่อng-requiredชี้ไปที่ตัวแปรขอบเขต / ตัวควบคุมแองกูลาร์จะตรวจสอบการเปลี่ยนแปลงและตั้งค่าแอตทริบิวต์ที่จำเป็นตามลำดับ ในขณะที่ในกรณีของrequiredคุณลักษณะHTML อย่างง่ายคุณไม่มีความยืดหยุ่นเช่นนั้น ไม่มี? และในขณะที่เรากำลังในหัวข้อเดียวกันสิ่งที่เกี่ยวกับng-attr-required? มันเหมือนกับng-requiredหรือไม่

— AsGoodAsItGets

ฉันต้องการที่จะทำ addon สำหรับคำตอบของ tiago :

สมมติว่าคุณซ่อนองค์ประกอบโดยใช้ng-showและเพิ่มrequiredแอตทริบิวต์ในรายการเดียวกัน:

<div ng-show="false">
    <input required name="something" ng-model="name"/>
</div>

จะโยนข้อผิดพลาดบางอย่างเช่น:

การควบคุมฟอร์มไม่ถูกต้องพร้อมชื่อ = '' ไม่สามารถโฟกัสได้

นี่เป็นเพราะคุณไม่สามารถกำหนดค่าrequiredการตรวจสอบความถูกต้องกับhiddenองค์ประกอบได้ ใช้ng-requiredทำให้ง่ายต่อการตามเงื่อนไขนำไปใช้ตรวจสอบความถูกต้องซึ่งจะน่ากลัวเพียง !!

— I_Debug_Everything
แหล่งที่มา

เคล็ดลับที่ดีแน่นอนและคุณยังสามารถใช้ng-ifแทนng-show/ ng-hideเพื่อก้าวเท้าเลี่ยงปัญหาที่อาจเกิดขึ้นได้

— jkjustjoshing

นี่ควรเป็นคำตอบที่ยอมรับได้ หากคุณมีองค์ประกอบที่ซ่อนอยู่ (ng-show = "false") มีความแตกต่างระหว่าง ng-required = "true" และเพียง 'ต้อง' ตามที่อธิบายไว้ในคำตอบนี้และเราลงไปในน้ำร้อนเพราะความแตกต่างนี้

— Ivan Krivyakov

แอตทริบิวต์ HTML required="required"เป็นคำสั่งที่บอกเบราว์เซอร์ที่ข้อมูลนี้เป็นสิ่งจำเป็นเพื่อให้รูปแบบที่ถูกต้อง ( required="required"เป็นรูปแบบ XHTML เพียงใช้requiredเทียบเท่า)

เชิงมุมแอตทริบิวต์ ng-required="yourCondition"หมายถึง 'isrequired (yourCondition)' และชุดแอตทริบิวต์ของ HTML แบบไดนามิกสำหรับคุณขึ้นอยู่กับสภาพของคุณ

โปรดทราบว่าเวอร์ชัน HTML กำลังสับสนคุณไม่สามารถเขียนสิ่งที่มีเงื่อนไขเช่นเดียวกับrequired="true"หรือrequired="false"มีเพียงแอตทริบิวต์ที่ปรากฏเท่านั้น (ปัจจุบันหมายถึงจริง)! ng-requiredนี่คือที่เชิงมุมจะช่วยให้คุณออกด้วย

— Christophe Roussy
แหล่งที่มา

ใช่น่าเศร้าที่เบราว์เซอร์ไม่อนุญาตให้ใส่ความจริง / เท็จอาจถือได้ว่าเป็นเทคนิคเกินไป ...

— Christophe Roussy