ฉันได้สร้างแบบฟอร์มพื้นฐานโดยใช้วัสดุเชิงมุมและต้องการให้ข้อความแสดงข้อผิดพลาดปรากฏขึ้นเมื่ออินพุตไม่ถูกต้อง ฉันพยายามสร้างโมเดลหลังจากตัวอย่างอินพุตบนเว็บไซต์อย่างเป็นทางการ ซึ่งใช้คำสั่ง ng-messages เพื่อแสดงข้อผิดพลาดในการตรวจสอบ ไม่ว่าด้วยเหตุผลใดก็ตาม ดูเหมือนว่าข้อความแสดงข้อผิดพลาดจะแสดงเฉพาะเมื่อสถานะการตรวจสอบเปลี่ยนจากถูกต้องเป็นไม่ถูกต้องเท่านั้น
ตัวอย่างเช่น มีการป้อนข้อมูลเช่น <input type="email" required> พร้อมด้วย <ng-message when="email"> ที่ระบุว่า "โปรดป้อนอีเมลที่ถูกต้อง" การเขียนอีเมลที่ไม่ถูกต้องแล้วกด Tab ไปที่ค่าถัดไปจะทริกเกอร์การตรวจสอบ รูปแบบที่ไม่ถูกต้องจะถูกนำไปใช้กับอินพุต และข้อความจะปรากฏขึ้น หากฉันดำเนินการไปยังอินพุตถัดไปทันทีโดยไม่ต้องป้อนสิ่งใดเลย องค์ประกอบจะถูกใช้สไตล์ที่ไม่ถูกต้อง (เนื่องจากแอตทริบิวต์ required) และไม่มีข้อความปรากฏขึ้นตามที่คาดไว้ (ฉันไม่ได้รวมไว้สำหรับ required) แต่หากฉันเน้นการป้อนข้อมูลอีกครั้งและเขียนอีเมลที่ไม่ถูกต้อง ข้อความจะไม่แสดงขึ้นมา (แม้ว่าฉันจะเลื่อนโฟกัสออกไปและย้อนกลับก็ตาม) องค์ประกอบอินพุตยังคงมีการใช้สไตล์ที่ไม่ถูกต้อง ข้อความจะปรากฏขึ้นอีกครั้งเมื่อฉันเขียนอีเมลที่ไม่ถูกต้องเท่านั้น (ทำให้สไตล์ที่ไม่ถูกต้องถูกลบออกจากองค์ประกอบ) จากนั้นจึงลบออกเพื่อทำให้ใช้ไม่ได้อีกครั้ง
ที่นี่ คือตัวอย่าง CodePen ที่แสดงพฤติกรรมของเขา และแสดงค่าของแอตทริบิวต์ของแบบฟอร์ม มาร์กอัปคือ:
<div ng-app="TestApp" layout="row" layout-align="center">
<div class="md-whiteframe-6dp md-margin" layout="column" flex="33">
<md-toolbar>
<div class="md-toolbar-tools">
<h3>Sign Up</h3>
</div>
</md-toolbar>
<md-content class="md-padding">
<form name="signupForm" class="md-inline-form">
<div layout-gt-xs="row">
<md-input-container flex>
<label>Username</label>
<input name="username" ng-model="user.username" required ng-minlength="6" autofocus/>
<ng-messages for="signupForm.username.$error">
<ng-message when="minlength">
Username must be at least 6 characters
</ng-message>
</ng-messages>
</ng-input-container>
</div>
<div layout-gt-xs="row">
<md-input-container flex>
<label>Email</label>
<input type="email" name="email" ng-model="user.email" required/>
<ng-messages for="signupForm.email.$error">
<ng-message when="email">
Please give a valid email
</ng-message>
</ng-messages>
</ng-input-container>
</div>
<div layout="column" layout-gt-xs="row" layout-align="center">
<md-button type="submit" class="md-raised md-primary">
Register
</md-button>
<md-button type="button" class="md-primary">
Back to sign in
</md-button>
</div>
</form>
</md-content>
</div>
</div>
จาวาสคริปต์นั้นไม่มีอะไรนอกจาก
angular.module("TestApp", ["ngMaterial", "ngMessages"]);
คุณจะเห็นว่าอินพุตได้รับการตรวจสอบความถูกต้องอย่างถูกต้อง แต่ดูเหมือนว่าองค์ประกอบข้อความไม่ได้ใช้สไตล์ที่ถูกต้อง (opacity: 1) ในเวลาที่ควรจะเป็น
