Angular Webアプリ開発入門12

はじめに

リアクティブフォームにバリデータを設定する。リアクティブフォームの場合、バリデータの設定をテンプレートではなくて、コンポーネントの方に記述する。

FormControlオブジェクトを作るときに指定する

バリデータを設定するには、いくつかやり方があるが、そのうち簡単な方法のひとつして挙げられるのが、FormControlオブジェクトを作るときに指定する方法である。

this.calcForm =newFormGroup({

“fieldOne”:newFormControl(“0”),

“fieldTwo”:newFormControl(“0”)

});

FormControlをつくるときの括弧の中には、「”0″」が指定してあり、これが初期値である。バリデータを設定するときは、この後ろにさらにバリデータを設定する。バリデータの設定はValidatorクラスにあり、たとえば「Validators.required」は「必須であること」という。バリデータを複数指定することも可能である。その場合は「[」と「]」で囲み、カンマで区切って入れるの書式を指定する。たとえば、Validatorには、文字数の上限・下限を設定するmaxLength、minLengthがあり、制限する文字数を引数で指定する。

赤字が追記している部分である。

import {Component,OnInit }from‘@angular/core’;

import {FormGroup,FormControl,Validators }from‘@angular/forms’;

@Component({

selector:‘app-better-form’,

templateUrl:‘./better-form.component.html’,

styleUrls: [‘./better-form.component.css’]

})

exportclassBetterFormComponentimplementsOnInit {

calcForm:FormGroup;

result:string =“足し算しましょう”

constructor() { }

ngOnInit() {

this.calcForm = new FormGroup({

“fieldOne”: new FormControl(‘0’, Validators.required),

“fieldTwo”: new FormControl(‘0’, [Validators.required, Validators.maxLength(5)])

});

}

getfieldOne(){returnthis.calcForm.get(“fieldOne”);}

getfieldTwo(){returnthis.calcForm.get(“fieldTwo”);}

addAnyway() {

lettext1:string =this.fieldOne.value;

lettext2:string =this.fieldTwo.value;

letresultStr:string =“”;

if (Number.isNaN(Number(text1)) ||Number.isNaN(Number(text2))) {

resultStr =text1 +text2;

}else {

resultStr =`${text1}+${text2} =${Number(text1) +Number(text2)}`;

}

this.result =resultStr;

}

}

入力エラーがあるときはボタンがクリックされないようにする

未入力のときや右側のテキストボックスに6文字以上入力した場合、ボタンがクリックできなくするには下記のようにする。

<form[formGroup]=“calcForm”>

<inputformControlName=“fieldOne”>

+

<inputformControlName=“fieldTwo”>

<button(click)=“addAnyway()”[disabled]=”calcForm.invalid”>Calc</button>

</form>

<div>{{result}}</div>

条件付きのCSSクラス

前回バリデータに成功していないときは赤の下線、成功しているときは緑の下線を表示した。
今回のリアクティブフォームでもこれを実装する。

.input-valid {

border-bottom:2pxsolid green;

}

.input-invalid {

border-bottom:2pxsolid red;

}

AngularではHTMLタグの次の書式の属性を記述すると、条件が成り立ったときにだけ、そのクラスが適用されるようになる。この指定を条件付きのCSSクラスという。

<form[formGroup]=“calcForm”>

<inputformControlName=“fieldOne”

[class.input-invalid]=”fieldOne.invalid”

[class.input-valid]=”fieldOne.valid”>

+

<inputformControlName=“fieldTwo”

[class.input-invalid]=”fieldTwo.invalid”

[class.input-valid]=”fieldTwo.valid”>

<button(click)=“addAnyway()”[disabled]=“calcForm.invalid”>Calc</button>

</form>

<div>{{result}}</div>

 

エラーメッセージを表示する

前回学んだ「*ngif」の構文を使用する。

<div *ngif=”fieldOne.invalid”>左側のメッセージが空白です</div>

基本的には上記でよいが、右側のテキストボックスには、バリデータの「必須」と「最大長が5文字」までという2つのバリデータを設定している為、この「invalid」という書き方ではどちらのバリデータに失敗したかどうかが判断できない。そこで、「.erros」というプロパティを調べる。.errorsプロパティは、そのうしろにバリデータ名をつけると、そのバリデータにエラーがあったかどうかを示すことが出来る。

<form[formGroup]=“calcForm”>

<inputformControlName=“fieldOne”

[class.input-invalid]=“fieldOne.invalid”

[class.input-valid]=“fieldOne.valid”>

+

<inputformControlName=“fieldTwo”

[class.input-invalid]=“fieldTwo.invalid”

[class.input-valid]=“fieldTwo.valid”>

<button(click)=“addAnyway()”[disabled]=“calcForm.invalid”>Calc</button>

<div *ngIf=”fieldOne.invalid && fieldOne.errors.required”>左側のフィールドが空白です</div>

<div *ngIf=”fieldTwo.invalid && fieldTwo.errors.required”>右側のフィールドが空白です</div>

<div *ngIf=”fieldTwo.invalid && fieldTwo.errors.maxlength”>右側のフィールドの最大は5文字</div>

</form>

<div>{{result}}</div>

 

文字入力されたときに計算結果を消す

テキストボックスに新しい文字を入力したら、計算結果が消えるようする処理をいれる。
いくつか実装方法はあるが、今回は、テキストボックス上でキー入力されたタイミングで計算結果をクリアするようにする。

<form[formGroup]=“calcForm”>

<inputformControlName=“fieldOne” (keyup)=”clearResult()”

[class.input-invalid]=“fieldOne.invalid”

[class.input-valid]=“fieldOne.valid”>

+

<inputformControlName=“fieldTwo”(keyup)=”clearResult()”

[class.input-invalid]=“fieldTwo.invalid”

[class.input-valid]=“fieldTwo.valid”>

<button(click)=“addAnyway()”[disabled]=“calcForm.invalid”>Calc</button>

<div*ngIf=“fieldOne.invalid && fieldOne.errors.required”>左側のフィールドが空白です</div>

<div*ngIf=“fieldTwo.invalid && fieldTwo.errors.required”>右側のフィールドが空白です</div>

<div*ngIf=“fieldTwo.invalid && fieldTwo.errors.maxlength”>右側のフィールドの最大は5文字</div>

</form>

<div>{{result}}</div>

 

次にコンポーネントにclearResultメソッドを実装し、その中処理でで計算結果をクリアするようにする。clearResultメソッドでは、this.result「””」に設定している。「””」を設定することにより、計算結果が消える。

 

import {Component,OnInit }from‘@angular/core’;

import {FormGroup,FormControl,Validators }from‘@angular/forms’;

@Component({

selector:‘app-better-form’,

templateUrl:‘./better-form.component.html’,

styleUrls: [‘./better-form.component.css’]

})

exportclassBetterFormComponentimplementsOnInit {

calcForm:FormGroup;

result:string =“足し算しましょう”

constructor() { }

ngOnInit() {

this.calcForm =newFormGroup({

“fieldOne”:newFormControl(“0”,Validators.required),

“fieldTwo”:newFormControl(“0”, [Validators.required,Validators.maxLength(5)])

});

}

getfieldOne(){returnthis.calcForm.get(“fieldOne”);}

getfieldTwo(){returnthis.calcForm.get(“fieldTwo”);}

addAnyway() {

lettext1:string =this.fieldOne.value;

lettext2:string =this.fieldTwo.value;

letresultStr:string =“”;

if (Number.isNaN(Number(text1)) ||Number.isNaN(Number(text2))) {

resultStr =text1 +text2;

}else {

resultStr =`${text1}+${text2} =${Number(text1) +Number(text2)}`;

}

this.result =resultStr;

}

clearResult(){

this.result=””;

}

}

終わりに

リアクティブフォームのまとめ

①リアクティブフォームとは
FormGroupやFormControlなどをコンポーネント側に持つ仕組みのこと。これらのオブジェクトはプロパティとして公開しておく。

②テンプレートとリアクティブフォームとの連結
FormGrpupやFormControlとの連結は、次のように①で用意したプロパティを参照する形で記述する。

<Form [formGroup]=”プロパティ名”>
<input formControlName=”プロパティ名”>

③入力された値の取得
入力された値は、①のオブジェクトのプロパティ名で参照する。例えばfieldOneというプロパティで示されるFormControl
オブジェクトに入力された値は、次のように参照する。

let text1:string this.filedOne.value;

④バリデータの設定
バリデータはFormControlオブジェクトを作るときに設定する。
FormControl(“0”, Validators.required)
複数指定したい場合は、「[]]で囲んでカンマ区切り、配列にする。
FormControl(“0”,Validators.required, ValidatorsmacLength(5)])

⑤条件つきのCSSクラス
「[class.クラス名=条件式]」という書式を使うと、その条件が成り立つときだけ、指定したクラスが適用されるようになる。そうすることでバリデータが成功した時や失敗したときに、追加のクラスを出力できるように構成できる。

⑥キーボードイベント
入力コントロールで「(keyup)=”メソッド名()”のように記述すると、キーボードが放されたときに、指定したメソッドを実行できるようになる。


次回は、チェックボックスやラジオボタン、ドロップダウンリストなど、テキスト以外の入力コントロールの使い方について学ぶ。

 

コメント