Angular7-forms
Angular7-フォーム
この章では、Angular 7でフォームがどのように使用されるかを見ていきます。 フォームを操作する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 をインポートし、強調表示されたコードに示すように、インポート配列に同じものが追加されます。
*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 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をインポートし、インポート配列で同じものを使用する必要があります。
*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}* 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 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で値が表示されます。
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 に渡されます。
[ログイン]をクリックすると、上記のスクリーンショットに示すように値が表示されます。
フォーム検証
次に、モデル駆動型フォームを使用したフォーム検証について説明します。 組み込みのフォーム検証を使用することも、カスタム検証アプローチを使用することもできます。 フォームで両方のアプローチを使用します。 前のセクションで作成したのと同じ例を続けます。 Angular 7では、以下に示すように @ angular/forms から Validators をインポートする必要があります-
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が有効でない場合、ボタンは無効のままになり、ユーザーは送信できません。
ブラウザでこれがどのように機能するかを見てみましょう-
上記の場合、入力したメール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 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未満の場合、上記のようにpasswd trueで戻ります-return \ {"passwd":true};。 文字が5文字以上の場合、有効と見なされ、ログインが有効になります。
これがブラウザでどのように表示されるか見てみましょう-
パスワードに3文字しか入力していないため、ログインは無効になっています。 ログインを有効にするには、5文字以上が必要です。 有効な文字の長さを入力して確認しましょう。
メールIDとパスワードの両方が有効であるため、ログインが有効になります。 ログインすると、メールが下部に表示されます。