AngularJS: 폼이 유효하지 않은 필드를 판별할 수 있는 방법이 있습니까?

AngularJS: 폼이 유효하지 않은 필드를 판별할 수 있는 방법이 있습니까?

Angular에 다음 코드가 있습니다.ng-submit 함수에서 호출되는 컨트롤러 내부의 JS 어플리케이션.이 함수는 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가 있으면 javascript 콘솔에서 "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;
            ....
        }
    });
}

사용자가 긴 폼을 위아래로 스크롤하지 않고 비활성화된 이유를 알 수 있도록 비활성화된 Save 버튼 툴팁에 모든 오류를 표시하려고 했습니다.

참고: 폼의 필드에 이름 속성을 추가해야 합니다.

    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": {}

이렇게 포맷이 잘 되진 않았지만, 이런 것들을 보게 될 것입니다.

필드가 비활성화되어 있는 경우 해당 값을 가져오려고 하면 다음과 같이 됩니다.undefined.

텍스트 입력이 에 첨부되어 있다고 합니다.$scope.mynum이것은 숫자를 입력할 때만 유효하며, 입력이 끝난 경우입니다.ABC그 위에 올려놔요.

가치를 얻으려고 하면$scope.mynum,그건 그럴 것이다.undefined; 이 명령어는 반환하지 않습니다.ABC.

(아마 당신은 이 모든 것을 알고 있을 것입니다만, 어쨌든)

따라서 스코프에 추가한 검증이 필요한 모든 요소를 포함하는 어레이를 사용하고 필터(예를 들어 언더스코어.js)를 사용하여 어떤 요소가 다음과 같이 반환되는지 확인합니다.typeof undefined.

그리고 그것들은 무효 상태의 원인이 되는 필드입니다.

프로그래밍 없이 UI에서 폼을 비활성화하는 필드를 찾으려면 inspect(요소 보기에서 개발자 도구 열기)를 마우스 오른쪽 버튼으로 클릭한 다음 이 탭에서 ctrl+f를 사용하여 ng-invalid를 검색하십시오.그런 다음 ng-invalid 클래스를 찾은 각 필드에 대해 필드에 값이 지정되어 있지 않은지 또는 필드에 값이 지정되어 있지 않은지 확인할 수 있습니다(유효하지 않은 전자 메일 형식, 최대/최소 정의 제외 등).이게 제일 쉬운 방법이에요.

언급URL : https://stackoverflow.com/questions/18281752/angularjs-is-there-any-way-to-determine-which-fields-are-making-a-form-invalid