AngularJS : 모든 양식 오류 프로그램

AngularJS : 모든 양식 오류 프로그램

---

배경 : 현재 탭이있는 응용 프로그램을 작업하고 있습니다. 사용자가 오른쪽 탭에서 오류를 찾도록 지시하기 위해 유효성 검사에 실패한 필드 / 섹션을하고 싶습니다.

그래서 저는 그렇게 노력했습니다 form.$error. 아직 완전히 작동하지 않습니다.

내부에서 유효성 검사 오류가 발생하는 경우 ng-repeat예 :

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

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

{ "필수": [
  {
    "inumber": {}
  },
  {
    "inumber": {}
  }
]}

반면에 유효성 검사 오류가 외부에서 발생하는 경우 ng-repeat:

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

form.$error다음을 포함합니다

{ "필수": [{}]}

그러나 나는 다음을 기대합니다.

{ "필수": [{ 'iname': {}}]}

요소 이름이 누락 된 이유에 대한 유전자 유전자가 있습니까?

실행중인 plunkr는 http://plnkr.co/x6wQMp 에서 사용할 수 있습니다.

---

따라 @의 c0bra이하여 의견에서 지적 된 form.$error표현이 채워집니다.

반복 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);
  }
};

---

Brett DeWoody의 대답이 맞습니다. 그래도 컨트롤러에서 로직을 수행하고 싶었습니다. 그래서 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