AngularJS: มีวิธีใดในการตรวจสอบว่าฟิลด์ใดที่ทำให้ฟอร์มไม่ถูกต้อง?

ฉันมีรหัสต่อไปนี้ในแอปพลิเคชัน AngularJS ภายในคอนโทรลเลอร์ซึ่งเรียกจากฟังก์ชัน ng-submit ซึ่งเป็นของฟอร์มที่มีชื่อprofileForm:

$scope.updateProfile = function() {
  if($scope.profileForm.$invalid) { 
    //error handling..
  }
  //etc.
};

ภายในฟังก์ชันนี้มีวิธีใดบ้างที่จะทราบว่าช่องใดที่ทำให้ฟอร์มทั้งหมดถูกเรียกว่าไม่ถูกต้อง

แต่ละป้อนข้อมูลname'การตรวจสอบข้อมูลที่ถูกเปิดเผยว่าเป็นสถานที่ให้บริการในชื่อในformscope

HTML

<form name="someForm" action="/">
    <input name="username" required />
    <input name="password" type="password" required />
</form>

JS

$scope.someForm.username.$valid
// > false
$scope.someForm.password.$error
// > { required: true }

คุณสมบัติที่มีสัมผัส$pristine, $dirty, $valid, ,$invalid$error

หากคุณต้องการทบทวนข้อผิดพลาดด้วยเหตุผลบางประการ:

$scope.someForm.$error
// > { required: [{$name: "username", $error: true /*...*/},
//                {$name: "password", /*..*/}] }

กฎแต่ละข้อผิดพลาดจะถูกเปิดเผยด้วยข้อผิดพลาด $

นี่คือ plunkr ที่จะเล่นกับhttp://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview

สำหรับการตรวจสอบว่าฟิลด์ใดของฟอร์มไม่ถูกต้อง

console.log($scope.FORM_NAME.$error.required);

สิ่งนี้จะส่งออกอาร์เรย์ของฟิลด์ที่ไม่ถูกต้องของฟอร์ม

หากคุณต้องการดูว่าช่องใดบ้างที่ยุ่งกับการตรวจสอบความถูกต้องของคุณและคุณมี jQuery ที่จะช่วยคุณเพียงค้นหาคลาส"ng-invalid"บนคอนโซลจาวาสคริปต์

$('.ng-invalid');

จะแสดงรายการองค์ประกอบ DOM ทั้งหมดซึ่งการตรวจสอบล้มเหลวไม่ว่าด้วยเหตุผลใดก็ตาม

คุณสามารถวนซ้ำform.$error.patternได้

$scope.updateProfile = function() {
    var error = $scope.profileForm.$error;
    angular.forEach(error.pattern, function(field){
        if(field.$invalid){
            var fieldName = field.$name;
            ....
        }
    });
}

เมื่อข้อมูลใด ๆ undefinedที่ไม่ถูกต้องถ้าคุณพยายามที่จะได้รับความคุ้มค่าก็จะเป็น

สมมติว่าคุณมีการป้อนข้อความที่แนบมา$scope.mynumซึ่งจะใช้ได้เฉพาะเมื่อคุณพิมพ์ตัวเลขและคุณได้พิมพ์ลงABCไป

หากคุณพยายามที่จะได้รับค่าของ$scope.mynumมันจะเป็นundefined; มันจะไม่ส่งคืนไฟล์ABC.

(คุณอาจจะรู้ทั้งหมดนี้ แต่อย่างไรก็ตาม)

ดังนั้นผมจะใช้อาร์เรย์ที่มีองค์ประกอบทั้งหมดที่ตรวจสอบความต้องการที่ฉันได้เพิ่มขอบเขตและใช้ตัวกรอง (กับ underscore.js ตัวอย่าง) typeof undefinedเพื่อตรวจสอบว่าคนที่กลับมาเป็น

และนั่นจะเป็นช่องที่ทำให้สถานะไม่ถูกต้อง

ฉันต้องการแสดงข้อผิดพลาดทั้งหมดในคำแนะนำปุ่มบันทึกที่ปิดใช้งานดังนั้นผู้ใช้จะทราบว่าเหตุใดจึงปิดใช้งานแทนที่จะเลื่อนขึ้นและลงแบบยาว

หมายเหตุ: อย่าลืมเพิ่มคุณสมบัติชื่อลงในฟิลด์ในแบบฟอร์มของคุณ

    if (frm) {
        disable = frm.$invalid;
        if (frm.$invalid && frm.$error && frm.$error.required) {
            frm.$error.required.forEach(function (error) {
                disableArray.push(error.$name + ' is required'); 
            });
        }
    }
    if (disableArray.length > 0) {
        vm.disableMessage = disableArray.toString();
    }

สำหรับแอปพลิเคชันของฉันฉันแสดงข้อผิดพลาดดังนี้:

<ul ng-repeat="errs in myForm.$error">
<li ng-repeat="err in errs">{{err.$name}}</li></ul>

หากคุณต้องการดูทุกอย่างเพียงแค่ผู้ใช้ 'err' ที่จะแสดงสิ่งนี้:

 "$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": { "required": true },
"$name": "errorfieldName",
"$options": {}

ไม่ใช่รูปแบบที่ดี แต่คุณจะเห็นสิ่งเหล่านี้ที่นั่น ...

หากคุณต้องการค้นหาฟิลด์ที่ทำให้ฟอร์มบน UI ไม่ถูกต้องโดยไม่ใช้โปรแกรมให้คลิกขวาที่ตรวจสอบ (เปิดเครื่องมือสำหรับนักพัฒนาในมุมมององค์ประกอบ) จากนั้นค้นหา ng-invalid ด้วย ctrl + f ภายในแท็บนี้ จากนั้นสำหรับแต่ละฟิลด์ที่คุณพบว่าคลาส ng-invalid สำหรับคุณสามารถตรวจสอบว่าฟิลด์ไม่ได้รับค่าใด ๆ ในขณะที่จำเป็นหรือกฎอื่น ๆ ที่อาจละเมิด (รูปแบบอีเมลที่ไม่ถูกต้องคำจำกัดความไม่อยู่ในช่วง / สูงสุด / นาที ฯลฯ ) . นี่เป็นวิธีที่ง่ายที่สุด