AngularJS : 어떤 필드가 양식을 유효하지 않게 만드는지 확인할 수있는 방법이 있습니까?

컨트롤러 내부의 AngularJS 응용 프로그램에 다음 코드가 있습니다.이 코드는 이름이있는 양식에 속하는 ng-submit 함수에서 호출됩니다 profileForm.

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

이 함수 내에서 어떤 필드가 전체 양식을 유효하지 않게 호출하는지 알아내는 방법이 있습니까?

각 입력 name의 유효성 검사 정보는 form의 이름에 속성으로 노출됩니다 scope.

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", /*..*/}] }

오류가있는 각 규칙은 $ error에 노출됩니다.

다음은 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에서 양식을 무효화하는 필드를 찾으려면 inspect (요소보기에서 개발자 도구 열기)를 마우스 오른쪽 버튼으로 클릭 한 다음이 탭에서 ctrl + f를 사용하여 ng-invalid를 검색하세요. 그런 다음 ng-invalid 클래스를 찾은 각 필드에 대해 필요한 동안 필드에 값이 제공되지 않았는지 또는 위반할 수있는 다른 규칙 (잘못된 이메일 형식, 범위 초과 / 최대 / 최소 정의 등)을 확인할 수 있습니다. . 이것이 가장 쉬운 방법입니다.