ProAngularJS Ch.12 폼 활용

※ 실행결과: http://study.jeju.onl/directives3.html

이번 장에서는 폼 컨트롤과 다양한 입력 양식을 설명한다.
다음은 주요 내용이다.

  • select 엘리먼트
    : ng-model, ng-options
  • textarea 엘리먼트
    : ng-model, ng-required, ng-minlength, ng-maxlength, ng-pattern
  • checkbox 엘리먼트
    : ng-model, ng-change, ng-true-value, ng-false-value
  • input 엘리먼트
    : ng-model, ng-required, ng-minlength, ng-maxlength, ng-pattern
  • 폼 유효성 검증 피드백 전달
    : CSS를 활용한 피드백 전달, 특수변수를 활용한 피드백 전달
  • 기본적인 폼 유효성 검증
    : $pristine, $dirty, $valid, $invalid, $error
  • form 엘리먼트의 양방향 데이터 바인딩
    : ng-model

출력출력다음은 예제의 실행 결과이다.

select options을 그룹핑하여 출력
ProAngularJS-ch12-Form4

텍스트상자 입력의 다양한 유효성을 테스트
체크박스 입력 테스트테스트테스트
ProAngularJS-ch12-Form3

입력에 대한 유효성 검사와 사용자 알림 기능 구현
ProAngularJS-ch12-Form2

폼과 양방향 바인딩 테스트
ProAngularJS-ch12-Form1

이에 대한 코드는 다음과 같다.

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
  <title>Directives3 - ProAngularJS</title>
  <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
  <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" />

  /node_modules/angular/angular.js
  /node_modules/angular/angular-route.js
  

    angular.module("exampleApp", [])
      .controller("defaultCtrl", function($scope, $location) {

        $scope.todos = [
          { id: 101, place: "Store", action: "Get groceries", complete: false },
          { id: 102, place: "Home", action: "Call plumber", complete: false },
          { id: 151, place: "Office", action: "Buy running shoes", complete: true },
          { id: 201, place: "Home", action: "Buy flowers", complete: false },
          { id: 412, place: "Store", action: "Call family", complete: false }
        ];
        $scope.newTodo = {};

        $scope.addNewItem = function(newItem) {

          // push 오류를 방지하기 위해 값의 존재를 사전에 확인한다.
          if( angular.isDefined(newItem) && angular.isDefined(newItem.action)
            && angular.isDefined(newItem.location)) {

            $scope.todos.push({
              action: newItem.action + " (" + newItem.location + ")",
              complete: false
            });
            $scope.newTodo = {};
          }
        };

        $scope.addUser = function(userDetails) {
          // 빈번한 유효성 검사를 피하기 위해 클릭시 오류 출력을 하도록 했다
          if( $scope.myForm.$valid ){
            $scope.message = userDetails.name + " (" + userDetails.email
                + ") (" + userDetails.agreed + ")";
          } else {
            $scope.showValidation = true;
          }
        };
        $scope.message = "Ready";

        $scope.getError = function(error) {
          if( angular.isDefined(error) ) {
            if( error.required ){
              return "Please enter a value";
            } else if( error.email ){
              return "Please enter a valid email address";
            }
          }
        };

        $scope.requireValue = true;
        $scope.matchPattern = new RegExp("^[a-z]");

      });


  
  <!-- style을 통해 유효성 검사의 결과를 사용자에게 알려준다 -->
  <style>
    form .ng-invalid-required.ng-dirty { background-color: lightpink; }
    form .ng-invalid-email.ng-dirty { background-color: lightgoldenrodyellow; }
    form .ng-valid.ng-dirty { background-color: lightgreen; }
    span.summary.ng-invalid { color: red; font-weight: bold; }
    span.summary.ng-valid { color: green; }
    div.error { color: red; font-weight: bold; }

    form.validate .ng-invalid-required.ng-dirty { background-color: lightpink; }
    form.validate .ng-invalid-email.ng-dirty { background-color: lightgoldenrodyellow; }
  </style>
</head>
<body>
  

To do List {{ (todos | filter: {complete: 'false'}).length }}

#ActionDone
{{ $index + 1 }} {{ item.action }}
<hr /> <!-- =================================================== --> <!-- ==== * class와 style 제어 ==== --> <!-- =================================================== -->
Action:
Location: Home Office Mail
<button class="btn btn-primary btn-block" ng-click="addNewItem(newTodo)"> Add </button> </div> </div> </div> <hr /> <!-- =================================================== --> <!-- ==== * class와 style 제어 ==== --> <!-- =================================================== -->
Name:
Email: -->
{{ getError(myForm.userEmail.$error) }}
</div>
I agreed to the terms and conditions
<!-- 폼 유효성 검사 결과에 따라 버튼이 활성/비활성화 된다 --> <button type="submit" class="btn btn-primary btn-block"> <!-- <button type="submit" class="btn btn-primary btn-block" ng-disabled="myForm.$invalid"> --> OK </button> </div>
Message: {{ message }}
Valid: {{ myForm.$valid }}
<!-- 유효성 검증 변수들 : $pristine, $dirty, $valid, $invalid, $error 유효성 검증에서 사용하는 클래스 : ng-pristine, ng-dirty, ng-valid, ng-invalid --> </div> </form> </div> <hr /> <!-- =================================================== --> <!-- ==== * class와 style 제어 ==== --> <!-- =================================================== -->
Text:
</div>

Required Error: {{ myForm2.sample.$error.required }}

Min Length Error: {{ myForm2.sample.$error.minlength }}

Max Length Error: {{ myForm2.sample.$error.maxlength }}

Pattern Error: {{ myForm2.sample.$error.pattern }}

Element Valid: {{ myForm2.sample.$valid }}

</form> </div>
This is a checkbox
</div>

Model Value: {{ inputValue3 }}

</form> </div>
</div>

Required Error: {{ myForm4.sample.$error.required }}

Min Length Error: {{ myForm4.sample.$error.minlength }}

Max Length Error: {{ myForm4.sample.$error.maxlength }}

Pattern Error: {{ myForm4.sample.$error.pattern }}

Element Valid: {{ myForm4.sample.$valid }}

</form> </div>
Select an Action: (Pick One)
</div>

Selected Value: {{ selectValue || 'None' }}

</form> </div> </div> </body> </html>

 

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: