ngmessages를 사용하여 AngularJS의 쉬운 형식 검증

보시다시피, 우리는 신청에 주입하기 전에 각도를로드하고 ngmessages 모듈을로드하고 있습니다. 집에서 Folow를 원하는 사람들을 위해이 튜토리얼의 코드는 Github에서 제공됩니다. 참을성이없는 경우 기사 끝에서 데모로 건너 뛸 수도 있습니다. . 다음에 우리는 다음 필드와 함께 양식을 만들 것입니다 :

이름

성 이메일 주소 전화 번호

메시지

나는 모든 필드에 필수 속성을 추가 할 것입니다 (강제적이기 때문에) NG- 모델 지침을 사용하여 현재 범위의 속성에 바인딩합니다.
1. ngmessages를 입력하십시오 이제 코드에 뛰어 들어 NGMessages를 통해 간단한 양식 유효성 검사를 위해 입력에 지정된 속성을 사용할 수있는 방법을 확인하십시오.
필수 필드 가장 먼저 주목해야 할 것은 양식이 exampleform이라는 것입니다. ng-messages 지침을 사용할 때, 우리는 키/값 객체 (일반적으로 ngmodel 인스턴스의 $ 오류 개체)로 평가하는 각도 표현식을 전달합니다. 우리의 경우 이것은 양식의 이름으로, 각 양식 필드의 이름 속성에 묶여 있으며, 앞서 언급 한 $ 오류 객체에 묶여 있습니다.
2. 일단 완료되면, 당신은 ngmessages div 내부에 ng-message 속성이 포함 된 div를 중첩하면됩니다. NG 메시지 속성에 전달 된 값은 입력 필드에 추가 한 지시문에 따라 다릅니다. 이 경우 값이 필요합니다.
그것은 우리에게 줄 것입니다 :
4. 이메일 다음으로, 사용자가 유효한 이메일 주소를 입력하는지 확인하려고합니다. 운 좋게도 HTML5는 이것을 매우 쉬운 일입니다. 이전 예에서 입력 필드의 이름 속성은 텍스트 값을 가져 왔지만 이메일 주소는 이메일 값을 가져옵니다. 위의 예와 마찬가지로 오류 메시지를 활성화하기 위해 양식 이름, 입력 이름 및 오류 유효성 검사기를 환니다. 그런 다음 이메일 값을 가져 오는 NG 메시지 속성이 포함 된 추가 DIV를 추가 할 수 있습니다. 그렇게함으로써 필요한 값을 타겟팅하는 것처럼 이메일 값을 타겟팅 할 수 있습니다.
5. 정규 표현 계속 진행하면서 NG-PATCING DIGHTIVE를 사용하여 사용자의 전화 번호를 검증 할 것입니다. NG-Pattern에 익숙하지 않은 사람들의 경우 입력 필드가 속성에 전달되는 정규 표현식과 일치하는 데 사용됩니다. 이 경우 다음 regex를 ng-pattern 속성으로 전달하여 사용자의 전화 번호를 확인합니다.

   <form name="exampleForm"  required>
     <label>First Name:</label>
     <input type="text" name="userFirstName" ng-model="firstName" required />
   
     <label>Last Name:</label>
     <input type="text" name="userLastName" ng-model="lastName" required />
   
     <label>Email Address:</label>
     <input type="email" name="userEmail" ng-model="email" required />
   
     <label>Phone Number:</label>
     <input type="email" name="userPhoneNumber" ng-model="phoneNumber" required />
   
     <label>User Message:</label>
     <textarea type="text" name="userMessage" ng-model="message" required></textarea>
   </form>
   

   이것은 다음 형식과 일치합니다 (유효한 10 자리 전화 번호를 수락하십시오) :

   ng-pattern 오류 메시지는 패턴 값을 ng-message로 전달하여 활성화되며, 아래 코드에서 볼 수 있습니다.

   정규식으로 전화 번호를 검증하는 것은 약간 까다로운 주제입니다 (정직하게 말하면 더 간단한 것은 종종 더 좋습니다). 이에 대한 자세한 내용은이 itepoint 기사 또는이 스택 오버플로 스레드를 확인할 수 있습니다. 일반적으로 정규식에 대한 자세한 내용은 Mozilla Developer Network 에서이 기사를 읽을 수 있습니다.

   <div ng-messages="exampleForm.userFirstName.$error">
   

   minlength and maxlength 우리가하고 싶은 마지막 일은 사용자의 메시지를 검증하는 것입니다. 이 필드의 이름은 usermessage이며 위의 예와 마찬가지로 필요합니다. 그러나 이번에는 Ng-minlength 및 ng-maxlength 속성을 사용합니다. 이 두 속성 모두 정해진 수의 문자와 동일한 정수 값을 취합니다. NG-Minlength 속성은 사용자가 제한되는 문자 수를 설정하는 데 사용되는 반면 NG-Maxlength 속성은 사용자가 사용자가 한 최대 수의 문자 수를 설정합니다. 입력 할 수 있습니다.

   아래의 예에서는 오류 메시지를 최소 길이와 최대 길이 값으로 전달하고 있음을 알 수 있습니다. 이렇게하면 사용자가 원하는 문자 수에 도달 할 때까지 최소 값의 오류 메시지가 나타납니다. 또한 MaxLength에 정의 된 오류 메시지는 사용자가 NG-Maxlength 속성에 전달 된 문자 수를 능가하면 나타납니다.

   이제 필요한 모든 필드를 검증 했으므로 양식의 입력 태그를 기반으로 원하는 메시지를 표시하는 완전히 기능적인 양식이 있어야합니다!

   First Name:
   
   <div ng-messages="exampleForm.userFirstName.$error">
     
   This field is required
   

   Last Name:
   This field is required
   로그인 후 복사

Codepen에서 sitepoint (@sitepoint)에 의해 ngmessages를 사용하여 Angularjs에서 펜 쉬운 양식 검증을 참조하십시오. 최종 조정

ngmessages와 일반적으로 각도에 대한 가장 좋은 점 중 하나는 서로 다른 지시문을 함께 활용할 수있는 능력입니다. 예를 들어, ng-messages 지시문 이후에 ng-if = "exampleform.inputname. $ dirty를 추가하여 오류 메시지를 숨길 수 있습니다.이 작업이 어떻게 수행되는지 보여주기 위해 NG-IF 문을 usermessage에 추가했습니다. 우리가 방금 만든 양식의 섹션은 필드가 닿을 때까지 오류 메시지가 없습니다.

<form name="exampleForm"  required>
  <label>First Name:</label>
  <input type="text" name="userFirstName" ng-model="firstName" required />

  <label>Last Name:</label>
  <input type="text" name="userLastName" ng-model="lastName" required />

  <label>Email Address:</label>
  <input type="email" name="userEmail" ng-model="email" required />

  <label>Phone Number:</label>
  <input type="email" name="userPhoneNumber" ng-model="phoneNumber" required />

  <label>User Message:</label>
  <textarea type="text" name="userMessage" ng-model="message" required></textarea>
</form>

결론 지금까지 NGMessages API에 대한 확고한 파악과 양식 검증을 쉽게 수행하는 데 사용되는 방법을 갖추고 있습니다. 우리가 여기서 본 것 외에도, 당신이 할 수있는 다른 많은 트릭이 있습니다. 예를 들어, Angular를 사용하면 NGMESSAGES 및 NGAIMATE 지시문을 함께 묶고 사용자 정의 오류 메시지를 공개하고 숨기는 사용자 정의 애니메이션을 만들 수 있습니다. 이 새로운 기능을 Angular에서 활용하고 가능한 한 편안하게 활용하는 것이 좋습니다. NGMessages 모듈은 포기하고 싶지 않은 양식 데이터를 처리 할 때 다양한 기능을 제공합니다!

질문이 있거나이 기술에 대한 귀하의 의견을 공유하고 싶다면 의견에 자유롭게 연락하십시오.

. ngmessages를 사용한 Angularjs에서 쉬운 양식 검증에 대한 자주 묻는 질문 (FAQ) angularjs에서 오류 메시지를 사용자 정의 할 수 있습니까?

angularjs 양식에서 오류 메시지를 사용자 정의하는 것은 매우 간단합니다. ngmessages 모듈을 사용하여 고유 한 오류 메시지를 만들 수 있습니다. 먼저 응용 프로그램에 ngmessages 모듈을 포함시켜야합니다. 그런 다음 HTML 양식에서 NG-Message 지시문을 사용하여 각 유형의 유효성 검사 오류에 대한 오류 메시지를 지정할 수 있습니다. 예를 들어, 필요한 필드가 비어있을 때 사용자 정의 메시지를 표시하려면 다음과 같이 할 수 있습니다. >

이 필드가 필요합니다.

이 코드에서 "form.field. $ error"는 오류 객체입니다. 필드와 "필수"입니다 유효성 검사 오류 유형. “이 필드가 필요하다”는 교체 할 수 있습니다. 자신의 사용자 정의 메시지를 사용하여 AngularJS에서 한 번에 여러 필드를 한 번에 검증 할 수 있습니까?

AngularJS는 NGMESSAGES 모듈을 사용하여 여러 필드를 한 번에 검증하는 방법을 제공합니다. NG-Messages-Multiple Directive를 사용하여 한 번에 여러 오류 메시지를 표시 할 수 있습니다. 예는 다음과 같습니다.

이 필드

이 필드는 너무 짧습니다.

이 코드에서 필드가있는 경우. 비어 있고 너무 짧은 두 오류 메시지가 동시에 표시됩니다.
동적 오류 메시지와 함께 ngmessages를 어떻게 사용할 수 있습니까?

ngmessageExp 지시문을 사용하여 동적 오류 메시지를 표시 할 수 있습니다. 이 지침을 사용하면 AngularJS 표현식을 사용하여 표시 할 오류 메시지를 결정할 수 있습니다. 예는 다음과 같습니다.

이 필드는 {{입니다. errormessage}}. 오류. 오류 메시지는 "이 필드가 필요합니다"입니다. 필드가 비어 있으면“이 필드는 너무 짧습니다.” 필드가 너무 짧은 경우. 폼 필드는 사용자가 양식과 상호 작용할 때까지 오류 메시지를 숨기려면. 사용자가 필드와 상호 작용 한 경우 $ Dirty 속성은 사실이며 사용자가 필드를 떠난 경우 $ 터치 된 속성이 참입니다. 예는 다음과 같습니다.

이 필드가 필요합니다.

이 코드에서는 사용자가 필드.
angularjs에 제출하기 전에 양식을 검증하려면 어떻게해야합니까?
제출하기 전에 양식의 $ 유효한 속성을 사용하여 유효성을 검사 할 수 있습니다. 양식의 모든 필드가 유효한 경우 $ 유효한 속성은 참입니다. 예는 다음과 같습니다.

양식의 모든 필드가 유효하지 않으면 양식> 이 코드에서 제출 () 함수는 호출되지 않습니다.

위 내용은 ngmessages를 사용하여 AngularJS의 쉬운 형식 검증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!