[Angular JS: Up & Running] 04장_양식, 입력 및 서비스

24600 단어 angularjs【AngularJS:Up&Running 학습노트]

1ng-model의 사용


ng-model 명령어: 데이터의 양방향 귀속을 진행합니다
<input type="text" ng-model="ctrl.username">
You typed {{ctrl.username}}
angular.module('notesApp', [])
    .controller('MainCtrl', [function () {
        this.username = 'nothing';
}]);

2 양식 사용

"ctrl.submit();">
    type="text" ng-model="ctrl.user.username">
    type="password" ng-model="ctrl.user.password">
    type="submit" value="submit">

var self = this;
self.submit = function () {
    console.log('User clicked submit with ',
            self.user);
};

3 데이터 귀속 및 모델 사용


HTML: 
"ctrl.submit1();">
    type="text" ng-model="ctrl.username">
    type="password" ng-model="ctrl.password">
    type="submit" value="submit">



"ctrl.submit2();">
    type="text" ng-model="ctrl.user.username">
    type="password" ng-model="ctrl.user.password">
    type="submit" value="submit">

JS: 
var self = this;
self.submit1 = function () {
    // 
    var user = {username:self.username,password:self.password};
    console.log('First form submit with ',user);
};
self.submit2 = function () {
    console.log('Second form submit with ',self.user);
};

4 양식 상태 및 검증


HTML 
<form ng-submit="ctrl.submit();" name="myForm">
    <input type="text"
           ng-model="ctrl.user.username"
           required
           ng-minlength="4">
    <input type="password"
           ng-model="ctrl.user.password"
           required>
    <input type="submit"
           value="Submit"
           ng-disabled="myForm.$invalid">
form>

JS 
angular.module('notesApp', [])
    .controller('MainCtrl', [function () {
        var self = this;
        self.submit = function () {
            console.log('User clicked submit with ', self.user);
        };
    }]);

4.1 AngularJS의 양식 상태 속성


양식 상태 이름
작용
$invalid
인증이 통과되지 않은 경우 (필수 인증, 최소 길이 검증 등) AngularJS는 양식에 $invalid 속성을 설정합니다.
$valid
$invalid 상태와 정반대입니다. 모든 검증이 통과되었음을 나타냅니다.
$pristine
AngularJS의 모든 양식 상태는 $pristine입니다.이것은 사용자가 폼 요소를 입력하거나 수정했는지 여부를 나타낸다.가능한 용도: 폼이 $pristine 상태일 때reset 단추를 사용할 수 없게 하기 (disabe)
$dirty
$pristine와 반대로, 사용자가 데이터를 수정했음을 나타냅니다. (사용자는 수정 내용을 취소할 수 있으나dirty 속성은 설정되었습니다.)
$error
이것은 모든 폼에 다음과 같은 정보를 제공합니다. 어떤 입력 컨트롤에 오류가 발생했는지, 오류 형식이 발생했는지.

4.2 AngularJS 내장 인증기


검증기
작용
required
내용이 비어 있지 않은지 확인하십시오. 이 필드는 항상 $invalid라고 표시됩니다.
ng-required
required는 필드가 항상 비어 있지 않도록,ng-required는 표현식의 반환값에 따라 필드가 필수인지 여부를 결정합니다.
ng-minlength
최소 문자 길이
ng-maxlength
최대 문자 길이
g-pattern
필드는 정규 표현식과 일치해야 합니다
type=”email”
필드는 합법적인 메일 주소여야 합니다.
type=”number”
필드는 유효한 숫자여야 하며, min과 max 속성을 지정하여 숫자의 범위를 제한할 수 있습니다.
type=”date”
브라우저가 지원하면 이 필드는 HTML 날짜 선택기로 표시됩니다.지원하지 않으면 기본적으로 텍스트 입력 상자ng-model에 연결된 필드로 표시됩니다. 예를 들어 2016-09-23
type=”url”
필드는 올바른 URL 링크 주소여야 합니다.
상술한 검증기를 제외하고는 사용자도 사용자 정의 검증기를 작성할 수 있다.

5 오류 정보 표시


ng-show의 사용
<form ng-submit="ctrl.submit();" name="myForm">
    <input type="text"
           name="uname"
           ng-model="ctrl.user.username"
           required
           ng-minlength="4">
    <span ng-show="myForm.uname.$error.required">
 This is a required field
 span>
    <span ng-show="myForm.uname.$error.minlength">
 Minimum length required is 4
 span>
    <span ng-show="myForm.uname.$invalid">
 This field is invalid
 span>
    <input type="password"
           name="pwd"
           ng-model="ctrl.user.password"
           required>
    <span ng-show="myForm.pwd.$error.required">
 This is a required field
 span>
    <input type="submit"
           value="Submit"
           ng-disabled="myForm.$invalid">
form>

6 상태에 따라 양식 스타일 수정


6.1 양식 상태 CSS class


양식 상태
CSS 클래스
$invalid
ng-invalid
$valid
ng-valid
$pristine
ng-pristine
$dirty
ng-dirty

6.2 입력 컨트롤 상태 CSS class


입력 컨트롤 상태
CSS 클래스
$invalid
ng-invalid
$valid
ng-valid
$pristine
ng-pristine
$dirty
ng-dirty
required
ng-valid-required or ng-invalid-required
min
ng-valid-min or ng-invalid-min
max
ng-valid-max or ng-invalid-max
minlength
ng-valid-minlength or ng-invalid-minlength
maxlength
ng-valid-maxlength or ng-invalid-maxlength
pattern
ng-valid-pattern or ng-invalid-pattern
url
ng-valid-url or ng-invalid-url
email
ng-valid-email or ng-invalid-email
date
ng-valid-date or ng-invalid-date
number
ng-valid-number or ng-invalid-number

6.3 입력 컨트롤을 다른 방식으로 강조 표시


HTML: 
"ctrl.submit();" name="myForm">
    type="text"
           class="username"
           name="uname"
           ng-model="ctrl.user.username"
           required
           ng-minlength="4">
    type="submit"
           value="Submit"
           ng-disabled="myForm.$invalid">

CSS: 
<style>
        .username.ng-valid{
            background-color: green;
        }
        .username.ng-dirty.ng-invalid-required{
            background-color: red;
        }
        .username.ng-dirty.ng-invalid-minlength{
            background-color: lightpink;
        }
    style>

JS: 
angular.module('notesApp', [])
            .controller('MainCtrl', [function () {
                var self = this;
                self.submit = function () {
                    console.log('User clicked submit with ', self.user);
                };
            }]);

7 ng-form 및 내장 폼


AngularJS는 g-form 지령을 제공했는데 이것은 form과 매우 가깝고 내장 기능을 제공했다. 그러면 우리는 표의 일부 필드를 조합하여 하나의 빠른 처리로 삼을 수 있다.
<form novalidate name="myForm">
    <input type="text"
           class="username"
           name="uname"
           ng-model="ctrl.user.username"
           required=""
           placeholder="Username"
           ng-minlength="4" />
    <input type="password"
           class="password"
           name="pwd"
           ng-model="ctrl.user.password"
           placeholder="Password"
           required="" />
    <ng-form name="profile">
        <input type="text"
               name="firstName"
               ng-model="ctrl.user.profile.firstName"
               placeholder="First Name"
               required>
        <input type="text"
               name="middleName"
               placeholder="Middle Name"
               ng-model="ctrl.user.profile.middleName">
        <input type="text"
               name="lastName"
               placeholder="Last Name"
               ng-model="ctrl.user.profile.lastName" required>
        <input type="date"
               name="dob"
               placeholder="Date Of Birth"
               ng-model="ctrl.user.profile.dob" required>
    </ng-form>
    <span ng-show="myForm.profile.$invalid">
        Please fill out the profile information
    </span>

    <input type="submit"
           value="Submit"
           ng-disabled="myForm.$invalid">
</form>
  • 1 ng-form 명령을 통해 하위 메뉴를 만듭니다. 사용자는 이 폼에 이름을 할당하여 그 자체와 상태를 가져오는 데 사용할 수 있습니다
  • 2 하위 폼의 상태는 (하위 폼 이름.valid)를 통해 직접 접근할 수도 있고, 부모 폼을 통해 접근할 수도 있다
  • 3 폼의 모든 요소는 일반적인 방식(폼 이름.firstName.$error.required)을 통해 접근할 수 있습니다
  • 4 하위 폼과 내장 폼은 외부 폼에 영향을 줍니다(myForm.$invalid는true입니다.required를 사용했기 때문입니다.)

    • 8 기타 양식 컨트롤

    
    <textarea ng-model="ctrl.user.address" required>textarea>
    
    <input type="checkbox"
           ng-model="ctrl.user.agree"
           ng-true-value="YES"
           ng-false-value="NO">
    
    <div ng-init="user = {gender:'female'}">
        <input type="radio"
               name="gender"
               ng-model="user.gender"
               value="male">
        <input type="radio"
               name="gender"
               ng-model="user.gender"
               value="female">
    div>
    
    <div ng-init="location = 'India'">
        <select ng-model="location">
            <option value="USA">USAoption>
            <option value="India">Indiaoption>
            <option value="Other">None of the aboveoption>
        select>
    div>
    python 환경 학습 구축 이론 및 실시
    Leetcode 7 Reverse Integer

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage