Angularjs에서 ng-messages로 서버 오류를 표시하는 방법

Angularjs에서 ng-messages로 서버 오류를 표시하는 방법

저는 제 각진 앱이 가입 양식을 확인하고 있습니다.제출 시 서버는 데이터의 유효성도 검사합니다.ng-messages를 사용하여 에러 메시지를 각도로 출력하고 있습니다.

여기 지금까지 완벽하게 작동하는 제 폼의 단축 버전이 있습니다.

<form name="signUpForm" novalidate data-ng-submit="attemptSignUp()">
    <label for="firstName">First name</label>
    <input type="email" name="email" id="email" required data-ng-model="data.user.email" />
    <div class="error" data-ng-messages="signUpForm.email.$error" data-ng-show="signUpForm.$submitted" data-ng-cloak>
        <p data-ng-message="required">Please provide your email</p>
    </div>
</form>

서버는 전자 메일 주소가 고유한지 확인하고 그렇지 않은 경우 오류 배열과 함께 422 오류(Laravel 5에서)를 반환합니다.

[
    'email' => 'This email is already in use'
]

이 내용과 서버에서 해당 메시지로 다시 전송되는 다른 메시지를 병합하고 싶습니다.ng-messages어떻게 하면 해낼 수 있을까요?

간단한 해결책은 두 개의 어레이를 갖는 것입니다.하나는 클라이언트 측용이고 하나는 컨트롤러에 채워진 서버 측 오류용입니다.클라이언트 오류가 있는 경우 서버 측 오류를 숨기거나 이중 메시지를 방지할 수 있습니다.

양식 배열을 채우는 대신 두 개의 배열을 가지는 이유는 자바스크립트 컨트롤러가 HTML의 구조를 모르거나 의존해서는 안 되기 때문입니다. HTML AngularJS 템플릿은 반대가 아니라 컨트롤러에 바인딩되어야 합니다.

<form name="signUpForm" novalidate data-ng-submit="attemptSignUp()">
    <label for="email">E-mail
        <input type="email" name="email" id="email" required data-ng-model="data.user.email" />
        <div class="error" data-ng-messages="signUpForm.email.$error" data-ng-show="signUpForm.$submitted" data-ng-cloak>
            <p data-ng-message="required">Please provide your email</p>
        </div>
        <div class="error" data-ng-messages="serverErrors" data-ng-show="signUpForm.$submitted" data-ng-cloak>
            <p data-ng-message="emailexists">Email already exists</p>
        </div>
    </label
</form>

라벨에 있는 메모:화면 판독기를 사용하는 사용자는 오류 메시지를 라벨 안에 감싸지 않으면 오류 메시지를 큰 소리로 읽을 수 없습니다.

각 1.3.x의 비동기식 검증자를 활용한 다음 사용자 정의 검증 지침을 작성해야 하므로 이 솔루션은 가장 우수한 솔루션이 아닙니다.

자원.

http://plnkr.co/edit/s4jJAOqehBkFUC9osMsy?p=preview 이 남자가 게시물에서 발견했습니다.

아마도 여기 http://odetocode.com/blogs/scott/archive/2014/10/16/working-with-validators-and-messages-in-angularjs.aspx

그리고 물론 서류상으로도

그러나 이것은 어떤 식으로든 사용할 준비가 된 완전한 예가 아니기 때문에 주의해야 합니다.주로 데모 목적으로 제공되며 어디서부터 시작해야 할지에 대한 아이디어를 제공하기 위해 제공됩니다.이전의 오류를 제거하거나 양식을 다시 확인하거나 다른 유효성 확인 오류를 고려하지 않았습니다.

기막힌 일

컨트롤러가 이렇게 생겼다고 생각해 보십시오.

$scope.serverValidations = {};
$scope.attemptSignUp = function(){

    Api.validateEmail($scope.email).then(angular.noop, function(data){

      $scope.serverValidations = data
      for(prop in $scope.serverValidations){
          if($scope.signUpForm[prop]){
            angular.forEach($scope.serverValidations[prop],function(validation){
                $scope.signUpForm[prop].$setValidity(validation.type, false);
            });
          }
      }
    });
}

유효성 검사 오류가 포함된 응답 데이터는 다음과 같습니다.

{
  email:[
     {type:'unique', message:'This email is already in use'}
  ],
  name:[
     {type:'maxlength', message:'Your name is to long, get a new one :)'}
  ]
};

그러면 당신의 HTML에서는 이렇게 할 수 있습니다.

<div class="error" data-ng-messages="signUpForm.name.$error" data-ng-cloak="">
    <p data-ng-message="required">You don't have a name?</p>
    <p ng-repeat="validation in serverValidations['name']" ng-message="{{validation.type}}">{{validation.message}}</p>
</div>

http://codepen.io/anon/pen/yyzMgG?editors=101 제출을 누르면 2초 후(가짜 서버에 도달하는 데 걸리는 시간) 서버 유효성 검사가 표시됩니다.

를 .validity그리고.error messages

      $scope.formErrors = {};
      angular.forEach(errors, function(data, name) {
        if (!vm.register_form[name]) {
          return;
        }
        $scope.formErrors[name] = data.message;
        //this will set errors->server to invalid state
        $scope.register_form[name].$setValidity('server', false);
      });

다음 단계는 다음과 같이 렌더링하는 것입니다.ng-messages

      <div ng-messages="register_form.email.$error">
        <div ng-message="required">Email is required</div>
        <div ng-message="email">Invalid email</div>
        <div ng-message="server">{{formErrors.email}}</div>
      </div>

저도 비슷한 질문이 있었지만 해결책이 제게 맞지 않았습니다.제가 한 일은 해킹/해킹 작업이었고, 다른 오류 코드를 전송하고 사례 설명문을 설정하는 것이었습니다.

언급URL : https://stackoverflow.com/questions/28157377/how-to-display-server-errors-in-angularjs-with-ng-messages