AngularJS 사용자 지정 양식 유효성 검사 오류 메시지

AngularJS 사용자 지정 양식 유효성 검사 오류 메시지

커스텀 폼 검증에서 에러 메시지를 전달할 수 있는 방법이 있습니까?

예를 들어 사용자 이름을 확인하는 지침이 있습니다.세 가지 결과가 있을 수 있습니다.

1. 유효합니다
2. 올바른 사용자 이름("this.is-filename")이 아니므로 유효하지 않습니다.
3. 이미 사용 중이므로 유효하지 않습니다.

다음과 같은 지시가 있습니다(간소화된 의사 html).

<input type="text" namecheck></input><span ng-show="name.$error.namecheck">You had an error {{ error }}</span>

그리고 제 커스텀 디렉티브에서는

// check for a conflict and valid name here
ngModel.$setValidity("namecheck",false);

그러나 문제가 충돌 또는 비활성 이름인지 나타내는 오류 메시지를 전달하려면 어떻게 해야 합니까?이런 게 있나요?ngModel.$setValidityErrorMessage()?

제가 댓글에 써놓은 거 보니까 알 것 같아요.다른 유효 플래그를 사용하면 됩니다.에서 같은 키를 사용해야 한다고는 할 수 없습니다.$setValidity()명령어 이름으로!

<span ng-show="name.$error.nameinvalid">This is not a valid username, it must be alphanmueric</span>
<span ng-show="name.$error.nametaken">Sorry, the username {{ name }} is already taken</span>

그리고 지시문에는

// if I got a 409
ngModel.$setValidity("nametaken",false);
// if I got a 400
ngModel.$setValidity("nameinvalid",false);

의 이름$error 에러 메시지입니다!

아니요. 폼 요소에 유효성을 설정하면 적절한 클래스가 요소에 추가되기만 하면 됩니다.이 클래스를 사용하여 요소를 스타일링하여 오류를 나타낼 수 있습니다.요소가 비활성화된 이유를 나타내는 오류 메시지는 없습니다.앵글은 그런 지원을 해주지 않아요.

에 표시되는 에러 메세지가 있는 경우가 있습니다.required비어있는 필드?크롬으로 "이 필드를 기입해 주세요"라고 말합니다.이것들은 브라우저에 따라 다르며 각도와는 전혀 관련이 없습니다.

에러 메시지 서비스를 직접 도입해야 합니다.같은 것을 사용할 수 있습니다.ng-invalid클래스에서는 폼 요소가 유효하지 않은 경우 확인하고 이를 기반으로 오류 메시지를 표시하지만 Angular에서는 즉시 사용할 수 없습니다.

각도 문서(여기 참조)에는 이를 수행할 수 있는 한 가지 방법이 나와 있습니다.

갱신:

Angular 1.3에서 현재, 이 기능은ngMessage그리고.ngMessages명령어를 참조해 주세요.이러한 새로운 디렉티브에서는 폼 검증과 에러 메세징의 번거로움이 경감됩니다.이 지시들에 대한 각진 문서는 여기 있습니다.자세한 내용은 링크를 참조하십시오.

제 생각에 당신의 세 가지 규칙에는 클라이언트와 서버의 검증이 모두 포함되어 있습니다.클라이언트 측에서 처음 두 규칙을 확인하고 서버 측에서 마지막 규칙을 확인합니다.사용자 이름은 중복 여부에 관계없이 서버에 게시할 때까지 취득됩니다.제 연습은 다음과 같습니다.

 <div class="col-md-offset-3 col-md-9" ng-show="detailForm.$error && detailForm.name.$invalid && (detailForm.name.$touched || detailForm.$submitted)"
                     ng-messages="detailForm.name.$error">
          <div class="error-message" ng-message="required">the field is required </div>
          <div class="error-message" ng-message="maxlength">you are too lang</div>
          <div class="error-message" ng-message="pattern">your format is incorrect </div>
 </div>
 <div class="col-md-offset-3 col-md-9" ng-show="serverError && serverError.name">
          <div class="error-message">{{serverError.name}}</div>
 </div>

언급URL : https://stackoverflow.com/questions/19521177/angularjs-custom-form-validation-error-message