AngularJ: 모든 폼 오류 나열

AngularJ: 모든 폼 오류 나열

배경:탭이 있는 어플리케이션에서 현재 작업을 하고 있습니다.오른쪽 탭에서 오류를 찾기 위해 검증에 실패한 필드/섹션을 나열하고 싶습니다.

그래서 저는 이 모든 것을form.$error아직 제대로 작동하지 않습니다.

내부 검증 오류가 발생한 경우ng-repeat예:

<div ng-repeat="url in urls" ng-form="form">
  <input name="inumber" required ng-model="url" />
  <br />
</div>

값이 비어 있으면form.$error다음을 포함합니다.

{ "필수": [{"인넘버": {}},{"인넘버": {}}] }

한편, 이 이외의 검증 에러가 발생했을 경우는,ng-repeat:

<input ng-model="name" name="iname" required="true" />

그form.$errorobject에는 다음이 포함됩니다.

{ "필수": [ { } ] }

하지만 다음 사항을 예상합니다.

{ " required " : [ { ' iname ' : { } } } }

원소 이름이 왜 없어졌는지 짐작 가는 거 없어?

실행 중인 plunkr은 http://plnkr.co/x6wQMp 에서 찾을 수 있습니다.

@c0bra가 댓글에서 지적했듯이form.$error오브젝트가 채워져 있기 때문에 JSON으로 덤프되는 것을 좋아하지 않습니다.

루프 스루form.$errors그러나 중첩된 개체는 원하는 결과를 얻을 수 있습니다.

<ul>
  <li ng-repeat="(key, errors) in form.$error track by $index"> <strong>{{ key }}</strong> errors
    <ul>
      <li ng-repeat="e in errors">{{ e.$name }} has an error: <strong>{{ key }}</strong>.</li>
    </ul>
  </li>
</ul>

모든 공은 c0bra에 있습니다.

또 다른 옵션은 이 질문의 솔루션 중 하나를 사용하여 동적으로 생성된 입력에 고유한 이름을 할당하는 것입니다.

저는 당신이 양식을 건네주는 기능을 만들었습니다.폼 오류가 있는 경우 콘솔에 해당 오류가 표시됩니다.사물을 보여 주기 때문에 볼 수 있습니다.저장 기능에 넣었어요.

function formErrors(form){
  var errors = [];
  for(var key in form.$error){
    errors.push(key + "=" + form.$error);
  }
  if(errors.length > 0){
    console.log("Form Has Errors");
    console.log(form.$error);
  }
};

브렛 드우디의 답은 정확하다.하지만 나는 내 컨트롤러로 논리를 하고 싶었다.그래서 user5045936의 답변을 바탕으로 아래와 같이 작성했습니다.이것은 컨트롤러 루트로 이동하려는 일부 사용자에게도 도움이 될 수 있습니다.덧붙여서, 나는 토스터 디렉티브를 사용하여 나의 사용자 확인 메시지를 보여준다.

 if (!vm.myForm.$valid) {
            var errors = [];

            for (var key in vm.myForm.$error) {
                for (var index = 0; index < vm.myForm.$error[key].length; index++) {
                    errors.push(vm.myForm.$error[key][index].$name + ' is required.');
                }
            }

            toaster.pop('warning', 'Information Missing', 'The ' + errors[0]);

            return;
        }

중첩된 양식이 있는 경우 다음과 같이 하십시오.

 function touchErrorFields(form) {
    angular.forEach(form.$error, function (field) {
      angular.forEach(field, function(errorField) {
        if (!errorField.hasOwnProperty('$setTouched')) {
          touchErrorFields(errorField);
        } else {
          errorField.$setTouched();
        }
      })
    });
  }

언급URL : https://stackoverflow.com/questions/22322925/angularjs-list-all-form-errors