Angular JS의 양식에 대한 사용자 입력 유효성 검사

AngularJS 단일 페이지 응용 프로그램에서 사용자 입력 유효성 검사에 어려움을 겪는 초급 개발자를 종종 보았습니다. 이 게시물에서는 AngularJS의 유효성 검사에 대한 빠르고 유용한 소개를 제공합니다. 이 게시물을 추가 학습을 수행할 수 있는 기본 학습 문서로 간주하십시오.

Dhananjay Kumar Last Updated Feb 20, 2025 8min read

아래 이미지와 같은 예부터 시작하겠습니다. 다음과 같은 제한 사항이 있는 세 개의 필드가 있는 등록 양식이 있습니다.

이름: 필수
이메일: 필수 및 이메일 유형
암호: 필수, 암호 및 최소 길이 6을 입력합니다.

클라이언트 측에서 위에서 언급한 규칙의 유효성을 검사하려고 합니다. AngularJS 기반 단일 페이지 응용 프로그램에서 클라이언트 측 유효성 검사를 수행할 수 있는 두 가지 방법이 있습니다.

HTML5 유효성 검사 사용
Using the AngularJS validation directives
둘의 조합

HTML5 Validation

여기서는 아래 나열된 마크업을 사용하여 위에 표시된 사용자 추가 양식을 만들었습니다.

  <div class="row">
                <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               required
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               required
                               name="email"
                               ng-model="useremail"
                               class="form-control"                              
                               placeholder="Email">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               required
                               ng-model="userpassword"
                               name="password"                             
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" class="form-control btn btn-info">
                       </button>
                    </div>
                </form>
            </div>

HTML 5 유효성 검사를 사용하여 필요한 모든 사용자 유효성 검사를 적용하고 있습니다. 유효하지 않은 사용자 데이터가 포함된 양식을 제출하면 HTML5는 아래와 같이 오류를 반환합니다.

유효하지 않은 사용자 데이터가 포함된 양식을 제출하면 HTML5에서 다음과 같이 오류가 반환됩니다

UI의 이 오류는 HTML5에서 반환됩니다. HTML5 유효성 검사는 HTML5를 지원하지 않는 브라우저에서 작동하지 않습니다. 유효성 검사 기술에 대한 몇 가지 사항은 다음과 같습니다.

HTML5를 지원하지 않는 브라우저에서는 유효성 검사가 작동하지 않습니다.
잘못된 사용자 입력에 대해 HTML 5 오류(위 이미지 참조)가 표시됩니다.
유효하지 않은 사용자 입력은 컨트롤러에서 정의되지 않은 값으로 설정됩니다.

이제 컨트롤러에서 사용자 입력의 값을 읽어 보겠습니다. 양식에 컨트롤러를 연결하는 것을 잊지 마십시오.

console.log('user name : ' + $scope.userfullName);
console.log('user email : ' +$scope.useremail);
console.log('user password :' +$scope.userpassword);

여기에서는 HTML 5 유효성 검사를 사용하여 양식 및 사용자 입력의 유효성을 검사합니다. 일부 입력이 유효하지 않은 경우에도 양식을 제출할 수 있습니다. 유효하지 않은 입력 값은 컨트롤러에서 undefined로 설정됩니다. 아래 이미지에서 볼 수 있듯이 이메일 필드의 경우 입력이 유효하지 않고 컨트롤러에서 유효하지 않은 이메일 값이 undefined로 설정됩니다.

위의 검증 기술에서 두 가지 중요한 관찰 결과를 도출할 수 있습니다.

양식이 유효하지 않은 경우에도 양식을 제출할 수 있었습니다
유효하지 않은 입력의 경우 컨트롤러에서 값이 undefined로 설정되었습니다.

양식이 유효하지 않을 때 제출되지 않기를 원하면 버튼을 ng-click하는 대신 양식 자체에 ng-submit 지시문을 사용합니다.

 <div class="row">
                <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               required
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               required
                               name="email"
                               ng-model="useremail"
                               class="form-control"                              
                               placeholder="Email">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               required
                               ng-model="userpassword"
                               name="password"                             
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" class="form-control btn btn-info">
                       </button>
                    </div>
                </form>
            </div>

ng-submit에서 formname.$valid 매개 변수를 사용하여 컨트롤러에서 AddUser 함수를 호출합니다. 이 submit 함수는 양식이 유효한 경우, 즉 양식의 모든 사용자 입력이 유효한 경우에만 호출됩니다. 이 경우 양식이 유효하지 않으면 from이 제출되지 않습니다. 이전 예제에서는 양식이 유효하지 않더라도 양식을 제출할 수 있었고 유효하지 않은 입력 필드의 경우 정의되지 않은 값이 컨트롤러에 전달되는 것을 확인했습니다. 그러나 여기에서 유효하지 않은 양식을 제출할 수 없습니다.

AngularJS Validation

또 다른 옵션은 AngularJS 지시문을 사용해서만 사용자 입력의 유효성을 검사하는 것입니다. AngularJS 유효성 검사만 사용하려면 다음 작업을 수행해야 합니다.

양식에서 novalidate를 사용하여 HTML 유효성 검사를 비활성화합니다.
Instead of HTML validations use AngularJS validation directives.

아래 목록과 같이 AngularJS 유효성 검사 지시문만 사용하여 필요한 사용자 유효성 검사가 있는 양식을 만들 수 있습니다.

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"                              
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               ng-required="true"
                               name="email"
                               ng-model="useremail"
                               class="form-control"                             
                               placeholder="Email">
                                            </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               ng-required="true"
                               ng-model="userpassword"
                               name="password"
                              ng-minlength="5"
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" ng-click="AddUser()" class="form-control btn btn-info">
                          Register
                        </button>
                    </div>
                </form>

novalidate 속성을 사용하여 HTML5 유효성 검사를 비활성화하고 다음 사용자 입력의 유효성을 검사합니다.

모든 필드는 필수입니다.
암호 필드의 최소 길이는 6입니다.

양식을 제출하면 AngularJS 유효성 검사 지시문을 사용하여 사용자 입력의 유효성이 검사됩니다. 사용자가 이름에 대한 값을 제공하지 않거나 암호 필드에 6자 미만을 제공하는 경우 잘못된 사용자 입력에 대해 undefined 값으로 양식이 제출됩니다.

눈치채셨겠지만 HTML 5 유효성 검사를 사용하지 않고 AngularJS 유효성 검사에 의존할 때 두 가지 일이 발생합니다.

모든 사용자 입력이 유효하지 않은 경우에도 양식이 제출됩니다.
잘못된 사용자 입력에 대한 오류 메시지는 표시되지 않습니다.

Disable Submit button If Form is Not Valid(양식이 유효하지 않은 경우 제출 버튼 비활성화)

양식이 유효하지 않거나 사용자 입력이 유효하지 않은 경우 제출 버튼을 비활성화할 수 있습니다. AngularJS$valid 속성을 사용하여 양식이 유효하지 않은 경우 제출 버튼을 비활성화 해 보겠습니다.

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"                              
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               ng-required="true"
                               name="email"
                               ng-model="useremail"
                               class="form-control"                             
                               placeholder="Email">
                                            </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               ng-required="true"
                               ng-model="userpassword"
                               name="password"
                              ng-minlength="5"
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" ng-disabled="!adduser.$valid" ng-click="AddUser()" class="form-control btn btn-info">
                          Register
                        </button>
                    </div>
                </form>

여기서는 ng-disabled 지시문을 사용하여 버튼을 비활성화합니다. 아래 이미지에서 볼 수 있듯이 $valid 속성은 양식이 유효한지 여부를 확인하는 데 사용됩니다. adduser가 양식의 이름이라는 것을 잊지 마십시오.

오류 메시지 표시

HTML5 유효성 검사 규칙과 달리 기본적으로 AngularJS 유효성 검사 지시문은 잘못된 사용자 입력에 대한 오류 메시지를 표시하지 않습니다. 그러나 아래 목록과 같이 오류 메시지를 표시할 수 있습니다. $valid 및 $pristine 속성을 사용하여 오류 메시지를 표시합니다.

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                        <span class="help-block"
                               ng-show="adduser.name.$invalid && !adduser.name.$pristine">
                            You name is required.
                        </span>
                  </div>

오류 메시지는 아래 이미지와 같이 표시됩니다.

오류 메시지 및 입력 컨트롤 스타일 지정

$valid 및 $pristine 속성을 사용하여 오류 메시지를 표시하고 아래 목록을 사용하여 오류 메시지에 대한 스타일을 만들 수 있습니다.

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg" ng-class="{ 'has-error' : adduser.name.$invalid && !adduser.name.$pristine }">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                        <span class="help-block"
                               ng-show="adduser.name.$invalid && !adduser.name.$pristine">
                            You name is required.
                        </span>
                  </div>

이제 오류 메시지가 아래 이미지와 같은 스타일로 표시됩니다.

컨트롤러에서 유효성 검사 속성 읽기Reading validation properties in the controller

컨트롤러에서 양식 이름의 $valid 속성을 사용하여 양식이 유효한지 여부를 읽을 수 있습니다. 모든 사용자 입력이 유효하면 $valid 속성 true 값을 얻게 됩니다. 양식이 유효한지 여부는 아래 목록과 같이 컨트롤러에서 확인할 수 있습니다.

if ($scope.adduser.$valid) {
   alert('all inputs are valid ');
}
else {
   alert('all inputs are not valid ');
}

AngularJS Validation Properties

AngularJS 유효성 검사로 작업하는 동안 중요한 속성은 다음과 같습니다.

AngularJS 유효성 검사를 사용하는 동안 중요한 속성은 다음과 같습니다

양식 이름과 함께 이러한 속성을 사용하여 다양한 유효성 검사 작업을 수행할 수 있습니다.

그래서 당신은 그것을 가지고 있습니다! HTML5 유효성 검사와 AngularJS 유효성 검사 지시문의 조합을 사용하여 AngularJS에서 양식 및 사용자 입력의 유효성을 검사하는 방법을 살펴보았습니다. 이 게시물이 유용하기를 바랍니다 – 읽어 주셔서 감사합니다!

Angular How To