【Angular2】簡単なWebアプリ制作(その2)
10cmです｡こんにちは｡
前回に続きとなります｡
GitHabはこちらになります｡
開発環境は以下の用になっています
今回は､追加する画面を作成しました｡以下のような感じになっています｡
ではでは､上記の画面でちょっと手こずったところを記載していきます｡
チェック処理
この追加画面では､2つのチェックを行っています｡1つはバリデーションチェック､もう1つはnullなどの空のチェックです｡バリデーションは'min'と'max'属性でやれないかなって思ったんですが､なんかうまくできなかったため渋々スクリプトで更新しています｡
空チェックは､入力項目がすべて入力､選択された場合に追加ボタンを謳歌できるようにしています｡
Templateは以下のようになりました｡
<!-- カテゴリ --> <div class="btn-group input-span"> <button class="btn btn-default" [ngClass]="{active: category.active}" *ngFor="let category of categoryList" (click)="categoryClickEvent(category)">{{category.name}}</button> </div> <!-- 金額 個数 日付 --> <div class="input-group input-span" *ngFor="let input of inputList"> <span class="input-group-addon">{{input.label}}</span> <input class="form-control" [type]="input.type" [placeholder]="input.placeholder" [(ngModel)]="input.value" (blur)="updateInputValue(input)"> </div> <!-- 追加ボタン --> <div style="float: right"> <button class="btn btn-primary" (click)="submitButtonClickEvent()" [disabled]="checkInputValue()" >追加</button> </div>
バリデーションチェック
バリデーションチェックは､各inputタグの(blur)のタイミングで行っています｡(blur)は､入力エリアからフォーカスアウトすると､設定しているメソッドなどを実行してくれます｡今回の場合は､"updateInputValue(input)"が実行されます｡
"updateInputValue"は以下のようになっています｡
updateInputValue(input):void { // 入力値が､設定値より小さい場合 if(input.value < input.min) input.value = input.min; // 入力値が､設定値より大きい場合 if(input.value > input.max) input.value = input.max; }
inputオブジェクトごとにあらかじめ"min"と"max"を設けており､それを超えたら丸める､っといった流れです｡
追加ボタン押下OKチェック
追加ボタンには､すべての入力項目のチェックを行い､入力漏れがない場合のみ押下できるようにします｡[disabled]に対して"checkInputValue()"を設定しています｡
こういったイベントの発火タイミングとかはキチンと決まっているんでしょうかね?(Componentに関する値が更新されたら軒並み動くのかな?)
以下､チェック処理です｡
checkInputValue():boolean { var disabled = ( !this.selectedCategory || !this.inputList[0].value || !this.inputList[1].value || !this.inputList[2].value ) return disabled; }
まぁ､解説するまでもないですね｡すべての値がnullや空文字でなければdisabledをtrueにして押下できなくなるようにします｡
