Angular7-フォーム

この章では、Angular7でフォームがどのように使用されるかを説明します。フォームを操作する2つの方法について説明します。

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

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

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

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

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service'; 
import { HttpClientModule } from '@angular/common/http'; 
import { ScrollDispatchModule } from '@angular/cdk/scrolling'; 
import { DragDropModule } from '@angular/cdk/drag-drop'; 
import { FormsModule } from '@angular/forms';

@NgModule({ 
   declarations: [
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule, 
      HttpClientModule, 
      ScrollDispatchModule, 
      DragDropModule, 
      FormsModule 
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

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

でフォームを作成しましょう app.component.html ファイル。

<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.component.html', 
   styleUrls: ['./app.component.css']
})
export class AppComponent { 
   title = 'Angular 7 Project!'; 
   constructor(private myservice: MyserviceService) { } 
   ngOnInit() { } 
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid); 
   }
}

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

ログインフォームのCSSはに追加されます app.component.css −

input[type = text], input[type = password] { 
   width: 40%; 
   padding: 12px 20px; 
   margin: 8px 0; 
   display: inline-block; 
   border: 1px solid #B3A9A9; 
   box-sizing: border-box; 
} 
input[type = submit] { 
   padding: 12px 20px; 
   margin: 8px 0; 
   display: inline-block; 
   border: 1px solid #B3A9A9; 
   box-sizing: border-box; 
}

これがブラウザの表示方法です-

フォームは次のようになります。データを入力すると、送信機能で次のようにメールIDが通知されます-

モデル駆動型フォーム

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

入る変化があります app.module.ts。

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service'; 
import { HttpClientModule } from '@angular/common/http'; 
import { ScrollDispatchModule } from '@angular/cdk/scrolling'; 
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule, 
      HttpClientModule, 
      ScrollDispatchModule, 
      DragDropModule, 
      ReactiveFormsModule 
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

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

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

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

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

これは、フォームUIでの値の表示方法です。

フォームデータを使用してフォーム値を初期化しました。フォームUIでも同じものを使用する必要がありますapp.component.html。

<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>

.htmlファイルでは、フォームに角括弧内のformGroupを使用しています。たとえば、[formGroup] =” formdata”。送信時に、関数が呼び出されますonClickSubmit そのために formdata.value 合格。

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

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

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

フォームの検証

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

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

Angularには次のような組み込みのバリデーターがあります mandatory field、 minlength、 maxlength、および pattern。これらには、Validatorsモジュールを使用してアクセスします。

特定のフィールドが必須かどうかをAngularに伝えるために必要なバリデーターまたはバリデーターの配列を追加するだけです。入力テキストボックスの1つ、つまり電子メールIDで同じことを試してみましょう。メールIDには、次の検証パラメータを追加しました-

Required
パターンマッチング

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

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   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.component.html、フォーム入力のいずれかが無効な場合、送信ボタンは無効になります。これは次のように行われます-

<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が無効な場合、ボタンは無効のままになり、ユーザーはボタンを送信できなくなります。

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

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

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

同じフォームでカスタム検証を試してみましょう。カスタム検証では、独自のカスタム関数を定義し、それに必要な詳細を追加できます。同じものについて、以下の例を見てみましょう。

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 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 < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

上記の例では、関数を作成しました passwordvalidation 同じことがformcontrolの前のセクションで使用されています- passwd: new FormControl("", this.passwordvalidation)。

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

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