Angular 4-フォーム

この章では、Angular 4でフォームがどのように使用されるかを見ていきます。フォームを操作する2つの方法-テンプレート駆動型とモデル駆動型について説明します。

テンプレート駆動型フォーム

テンプレート駆動フォームでは、ほとんどの作業はテンプレートで行われます。モデル駆動型のフォームでは、ほとんどの作業はコンポーネントクラスで行われます。

次に、テンプレート駆動型フォームでの作業を検討してみましょう。簡単なログインフォームを作成し、メールID、パスワードを追加して、フォームにボタンを送信します。開始するには、次のように app.module.ts で行われる @ angular/core からFormsModuleにインポートする必要があります-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot([
         {path: 'new-cmp',component: NewCmpComponent}
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})

export class AppModule { }

したがって、 app.module.ts でFormsModuleをインポートし、強調表示されたコードに示すように、インポート配列に同じものが追加されます。

*app.componentl* ファイルにフォームを作成しましょう。

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" >
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel>
   <br/>
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel>
   <br/>
   <input type = "submit" value = "submit">
</form>

電子メールID、パスワード、および送信ボタンを持つ入力タグを持つ単純なフォームを作成しました。タイプ、名前、プレースホルダーを割り当てました。

テンプレート駆動フォームでは、 ngModel ディレクティブと name 属性を追加して、モデルフォームコントロールを作成する必要があります。したがって、Angularにフォームのデータにアクセスさせたい場合は、上記のようにそのタグにngModelを追加します。ここで、emailidとpasswdを読み取る必要がある場合は、ngModelを追加する必要があります。

ご覧の場合、ngFormも*＃userlogin に追加しています。 *ngForm ディレクティブは、作成したフォームテンプレートに追加する必要があります。また、関数 onClickSubmit を追加し、それに userlogin.value を割り当てました。

*app.component.ts* に関数を作成し、フォームに入力された値を取得しましょう。

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid);
   }
}

上記の app.component.ts ファイルでは、onClickSubmit関数を定義しています。フォーム送信ボタンをクリックすると、コントロールは上記の機能になります。

これは、ブラウザが表示される方法です-

onClickSubmit Login

フォームは次のようになります。データを入力して、submit関数に電子メールIDがすでに入力されています。

入力されたログインメール

上のスクリーンショットに示すように、メールIDが下部に表示されます。

モデル駆動型

モデル駆動型フォームでは、@ angular/formsからReactiveFormsModuleをインポートし、インポート配列で同じものを使用する必要があります。

app.module.ts。*に変更があります

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { MyserviceService } from './myservice.service';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

*app.component.ts* では、モデル駆動型フォームのいくつかのモジュールをインポートする必要があります。 たとえば、 *import \ {FormGroup、FormControl} from '@ angular/forms'* 。

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.formdata = new FormGroup({
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

変数formdataはクラスの開始時に初期化され、上記のようにFormGroupで初期化されます。変数emailidおよびpasswdは、フォームに表示されるデフォルト値で初期化されます。必要に応じて空白にしておくことができます。

これにより、フォームUIで値が表示されます。

フォームUI

formdataを使用してフォームの値を初期化しました。これをUI app.componentl の形式で使用する必要があります。

<div>
   <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type="text" class="fortextbox" name="emailid" placeholder="emailid"
         formControlName="emailid">
      <br/>

      <input type="password" class="fortextbox" name="passwd"
         placeholder="passwd" formControlName="passwd">
      <br/>

      <input type="submit" class="forsubmit" value="Log In">
   </form>
</div>
<p>
   Email entered is : {{emailid}}
</p>

lファイルでは、フォームの角括弧でformGroupを使用しています。たとえば、[formGroup] =” formdata”などです。送信時に、関数は onClickSubmit と呼ばれ、 formdata.value が渡されます。

入力タグ formControlName が使用されます。 app.component.ts ファイルで使用した値が与えられます。

[送信]をクリックすると、コントロールは app.component.ts ファイルで定義されている関数 onClickSubmit に渡されます。

スクリーンショットonClickSubmitイベント

[ログイン]をクリックすると、上記のスクリーンショットに示すように値が表示されます。

フォーム検証

次に、モデル駆動型フォームを使用したフォーム検証について説明します。組み込みのフォーム検証を使用することも、カスタム検証アプローチを使用することもできます。フォームで両方のアプローチを使用します。前のセクションで作成したのと同じ例を続けます。 Angular 4では、以下に示すように @ angular/forms からバリデーターをインポートする必要があります-

import { FormGroup, FormControl, Validators} from '@angular/forms'

Angularには、必須フィールド、minlength、maxlength *、 *pattern などのバリデーターが組み込まれています。これらはValidatorsモジュールを使用してアクセスします。

特定のフィールドが必須かどうかをAngularに伝えるために必要なバリデータまたはバリデータの配列を追加するだけです。

入力テキストボックスの1つ、つまり電子メールIDで同じことを試してみましょう。電子メールIDについては、次の検証パラメータを追加しました-

必須
パターンマッチング

これは、コードが app.component.ts で検証を受ける方法です。

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

*Validators.compose* では、入力フィールドで検証するもののリストを追加できます。 現在、有効なメールのみを取得するために *required* および *pattern matching* パラメーターを追加しました。

*app.componentl* では、フォーム入力のいずれかが無効な場合、送信ボタンは無効になります。 これは次のように行われます-

<div>
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid"
         formControlName = "emailid">
      <br/>
      <input type = "password" class = "fortextbox" name = "passwd"
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      <input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit"
         value = "Log In">
   </form>
</div>

<p>
   Email entered is : {{emailid}}
</p>

送信ボタンについては、角括弧内に無効化された値を追加しました-*！formdata.valid *です。したがって、formdata.validが有効でない場合、ボタンは無効のままになり、ユーザーは送信できません。

ブラウザでこれがどのように機能するかを見てみましょう-

！formdata.validイベント出力

上記の場合、入力したメールIDは無効であるため、ログインボタンは無効になっています。有効なメールIDを入力して、違いを確認してみましょう。

無効なログインボタン

これで、入力したメールIDは有効です。したがって、ログインボタンが有効になっていることがわかり、ユーザーはそれを送信できるようになります。これにより、入力したメールIDが下部に表示されます。

同じフォームでカスタム検証を試してみましょう。カスタム検証では、独自のカスタム関数を定義し、必要な詳細を追加できます。同じ例が表示されます。

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length &lt'; 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

上記の例では、関数 password validation を作成しました。これはformcontrolの前のセクションで使用されています-* passwd：new FormControl（ ""、this.passwordvalidation）*。

作成した関数では、入力した文字の長さが適切かどうかを確認します。文字が5未満の場合、上記のようにpasswdをtrueにして戻ります- return \ {"passwd"：true}; 。文字が5文字以上の場合、有効と見なされ、ログインが有効になります。

これがブラウザでどのように表示されるか見てみましょう-

パスワードに入力された3文字

パスワードに3文字しか入力していないため、ログインは無効になっています。ログインを有効にするには、5文字以上が必要です。有効な文字の長さを入力して確認しましょう。

有効なIDパスワードによりログインが可能

メールIDとパスワードの両方が有効であるため、ログインが有効になります。ログインすると、メールが下部に表示されます。

Angular4-forms

目次

Angular 4-フォーム

テンプレート駆動型フォーム

モデル駆動型

フォーム検証