Angular 4フォームクイックスタート

9925 ワード
主な内容
  • 第1節-最も簡単な入力ボックス
    • を作成します.
  • 第2節-簡単な検証機能を追加
  • 第3節-検証に失敗したエラーメッセージを表示する
  • 第4節-フォーム
    • の作成
  • 第5節-ngModelGroup概要
  • 第6節-フォーム追加検証ステータススタイル
  • 第7節-フォームコントロールのステータス
  • 第8節-ラジオコントロール
    • を使用
  • 第9節-複数選択コントロール
    • を使用
    読書の心得
    このチュートリアルの開発環境と開発言語:
  • Angular 4 +
  • Angular CLI
  • TypeScript

    • 基礎知識
    Angular CLI基本使用
  • Angular CLI(オプション)
    • をインストール
    npm install -g @angular/cli
  • 新規プロジェクトの作成
    • ng new PROJECT-NAME
  • ローカルサーバ
    • を起動
    cd PROJECT-NAME
ng serve

    Angular Formsの概要
    Angular 4には2つのフォームがあります.
  • Template Driven Forms-テンプレート駆動フォーム(AngularJS 1.xのフォームと同様)
  • Reactive Forms-レスポンスフォーム
    • ここでは主にTemplate Driven Forms(テンプレート駆動フォーム)の基礎知識を紹介し、関連する知識点は問答形式で紹介します.
    セクション1-最も簡単な入力ボックスの作成
    双方向バインドを実現するにはどうすればいいですか?
    Angularフォームでは,ngModel命令により双方向バインディングを実現した.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    
    {{username}}
  `,
})
export class AppComponent {
  username = 'semlinker';
}

    セクション2-簡単な検証機能の追加
    フォームコントロールに検証機能を追加するにはどうすればいいですか?
    現在、Angularがサポートしている内蔵validatorsは以下の通りです.
  • required-フォームコントロールの値が空でない
    • を設定します.
  • email-フォームコントロールの値を設定するフォーマットはemail
    • です.
  • minlength-フォームコントロール値の最小長を設定する
  • maxlength-フォームコントロール値の最大長
    • を設定します.
  • pattern-フォームコントロールの値を設定するにはpattern対応モード
    • に一致する必要があります.
    次に、最も簡単な 検査を追加します.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    
    {{username}}
  `,
})
export class AppComponent {
  username = 'semlinker';
}

    フォームコントロールが検証されたかどうかを判断するにはどうすればいいですか?
    Angularでは、#userName="ngModel"でngModelオブジェクトを取得し、userName.validでフォームコントロールが検証されたかどうかを判断できます.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    
    {{userName.valid}}
  `,
})
export class AppComponent {
  username = 'semlinker';
}

    セクション3-検証に失敗したエラーメッセージを表示
    検証に失敗したエラーメッセージを表示するにはどうすればいいですか?
    Angularでは、#userName="ngModel"方式でngModelオブジェクトを取得し、そのオブジェクトのerrors属性を通じて、対応する検証ルール(required,minlengthなど)の検証状態を取得することができる.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    
    
    
    
           
    
    
    
                 {{userName.errors?.minlength.requiredLength}}，      
        {{userName.errors?.minlength.actualLength}}
    
    
  `,
})
export class AppComponent {
  username = 'semlinker';
}

    セクション4-フォームの作成
    フォームの使用方法
    Angularでは、よく知られているラベルを使用してフォームを作成できます.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  
    
    
    
    
           
    
    
    
                 {{userName.errors?.minlength.requiredLength}}，      
        {{userName.errors?.minlength.actualLength}}
    
    
    
  
  `,
})
export class AppComponent {
  username = 'semlinker';
}
    ラベルを使用すると、username入力ボックスにnameプロパティを追加する必要があります.
    フォームのコミット値を取得するにはどうすればいいですか?
    Angularでは、#loginForm="ngForm"でngFormオブジェクトを取得し、loginForm.valueでフォームの値を取得できます.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  
    
    
    
    
           
    
    
    
                 {{userName.errors?.minlength.requiredLength}}，      
        {{userName.errors?.minlength.actualLength}}
    
    
    
    {{loginForm.value | json}}
  
  `,
})
export class AppComponent {
  username = 'semlinker';

  onSubmit(value) {
    console.dir(value);
  }
}

    第五節-ngModelGroupの概要
    ngModelGroupはどんな役割を果たしていますか?
    ngModelGroup命令はAngularフォームで提供されるもう一つの特殊な命令であり、フォームの入力内容をグループ化することができ、意味的に異なる性質の入力を区別するのに便利である.例えば連絡先の情報には名前と住所が含まれており、現在は名前と住所を細かく情報収集する必要があり、名前は姓と名前に細かくすることができ、住所は都市、区、街などに細かくすることができる.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  
    
   
    
    
    
    
    
           
    
    
    
                 {{userName.errors?.minlength.requiredLength}}，      
        {{userName.errors?.minlength.actualLength}}
    
    
    
   
    
    
    
    
    {{loginForm.value | json}}
  
    
  `,
})
export class AppComponent {
  username = 'semlinker';

  onSubmit(value) {
    console.dir(value);
  }
}

    以上のコードが正常に実行された後、{{loginForm.value | json}}の出力結果:
    { "user": { "username": "semlinker", "password": "123" } }

    セクション6-フォームの検証ステータススタイルの追加
    フォームに検証ステータススタイル情報を追加するにはどうすればいいですか?
    Angularフォームでは、検証が通過するとフォームコントロールにng-validクラスが追加され、検証に失敗するとng-invalidクラスがフォームコントロールに追加されます.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styles: [`
   input.ng-invalid {
       border: 3px solid red;
    }
   input.ng-valid {
       border: 3px solid green;
    }
  `
  ],
  template: `
  
    
   
    
    
    
    
    
           
    
    
    
                 {{userName.errors?.minlength.requiredLength}}，      
        {{userName.errors?.minlength.actualLength}}
    
    
    
   
    
    
    
    
    {{loginForm.value | json}}
  
    
  `,
})
export class AppComponent {
  username = 'semlinker';

  onSubmit(value) {
    console.dir(value);
  }
}

    セクション7-フォームコントロールのステータス
    フォームコントロールには、validのステータスに加えて、どのようなステータスが含まれていますか?
    Angularではフォームコントロールには以下の6つの状態があり,#userName="ngModel"方式でngModelオブジェクトを取得し,さらにコントロールの状態情報を取得することができる.具体的な状態は以下の通りです.
  • valid-フォームコントロール有効
  • invalid-フォームコントロールが無効な
  • pristine-フォームコントロール値は
    • に変更されていません.
  • dirty-フォームコントロールの値が
    • に変更されました.
  • touched-フォームコントロールは
    • にアクセスされました.
  • untouched-フォームコントロールは
    • にアクセスされていません.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styles: [`
   input.ng-invalid {
       border: 3px solid red;
    }
   input.ng-valid {
       border: 3px solid green;
    }
  `
  ],
  template: `
  
    
   
    
    
    
    
    
    Name   valid  ：{{userName.valid}} -       
    
    
    Name   invalid  ：{{userName.invalid}} -       
    
    
    Name   pristine  ：{{userName.pristine}} -         
    
    
    Name   dirty  ：{{userName.dirty}} -         
    
    
    Name   touched  ：{{userName.touched}} -          
    
    
    Name   untouched  ：{{userName.untouched}} -          
    
    
           
    
    
    
                 {{userName.errors?.minlength.requiredLength}}，      
        {{userName.errors?.minlength.actualLength}}
    
    
    
   
    
    
    
    
    {{loginForm.value | json}}
  
    
  `,
})
export class AppComponent {
  username = 'semlinker';

  onSubmit(value) {
    console.dir(value);
  }
}

    セクション8-ラジオコントロールの使用
    ラジオコントロールを追加する方法
    Angularでは、でラジオコントロールを追加します.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  
    
    Angular  ：
    
    
        
         
      
    
    
    
    {{loginForm.value | json}}
  
    
  `,
})
export class AppComponent {
  versions = ['1.x', '2.x', '3.x'];
}

    セクション9-複数選択コントロールの使用
    複数選択コントロールを追加するにはどうすればいいですか?
    Angularでは {{loginForm.value | json}} `, }) export class AppComponent { versions = ['1.x', '2.x', '3.x']; } 必須検証を追加するにはどうすればいいですか?
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styles: [`
   select.ng-invalid + label:after {
      content: '
    Angular  ：
    
    
      
      
    
    
    
    {{loginForm.value | json}}
  
  `,
})
export class AppComponent {
  versions = ['','1.x', '2.x', '3.x'];
}
    すべての空白文字、スペース、全角スペース、改行などをフィルタし、関数をカスタマイズします.
    国内環境でkubeadmインストールを使用してkubernetesを導入