フォームの新しい検証タイミング
従来、Angularのフォームは入力内容が変更されるごとに検証が行われていましたが、Angular 5ではフォーカスが外れたタイミングや、サブミットしたタイミングで検証を行えるようになりました。
フォーカスが外れたタイミングの検証
フォーカスが外れたタイミングでの検証について、図5のサンプルで説明します。2個のテキストボックスは両方とも、4文字以上入力しないと検証エラーになりますが、上のテキストボックスはフォーカスが外れるまでは検証が実行されず、エラーが表示されません。下のテキストボックスは内容が変更されるごとに検証され、エラーが表示されます。
図5の上のテキストボックスに対応するinputタグはリスト10です。（1）のngModelOptions属性に「updateOn:'blur'」を指定すると、フォーカスが外れたタイミングで検証を実行するようになります。
<input class="form-control" type="text" name="name1"
ngModel minlength="4" #name1="ngModel"
[ngModelOptions]="{updateOn: 'blur'}"><!-- （1） -->
サブミットしたタイミングの検証
サブミットしたタイミングでの検証について、図6のサンプルで説明します。テキストボックスに4文字以上入力しないと検証エラーになりますが、上のフォームではサブミットボタンを押すまで検証が実行されません。下のフォームではテキストボックスの内容が変更されるごとに検証され、エラーが表示されます。
図6の上のフォームに対応するformタグはリスト11です。（1）のngFormOptions属性に「updateOn:'submit'」を指定すると、サブミットしたタイミングで検証を実行するようになります。
<form [ngFormOptions]="{updateOn: 'submit'}"><!-- （1） -->
そのほかの変更点
Angular 5では、ほかにも以下の変更が行われました。
ルーターのライフサイクルイベントが追加
遷移するかどうかの判定開始から、遷移後画面の表示完了までの処理を追跡できる、新しいライフサイクルイベントが追加されました。処理中表示やパフォーマンス測定に利用できます。
Angular Universalの改善
サーバーサイドでAngularを動作させるAngular Universalで、アプリケーション状態をサーバー側とクライアント側で共有する実装を、より簡単に実現できるようになりました。
exportAsの複数指定
コンポーネントやディレクティブをエクスポートする名前を指定するexportAs属性に、カンマ区切りで複数の名前が指定できるようになりました。過去互換性を確保しながら名前を変えることができます。
プロジェクトをAngular 5対応に更新する方法
既存のプロジェクトをAngular 5に更新する方法は、Angular Update Guideで案内されています。アップデート前後のAngularバージョンとアプリの複雑さなどを指定すると、アップデート方法が表示されます。
Angular Update Guideで案内される、アプリの複雑さが単純（Basic）なアプリのアップデート方法を説明します。Angular 5で非推奨になった「template」タグを、Angular 4で導入された「ng-template」に変更して、上述のPipesに関する調整を行ったあと、リスト12のコマンドでAngularとTypeScriptを更新します。更新後、上述のHttpClientへ対応する修正を行います。
npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2' npm install typescript@2.4.2 --save-exact
Angular 5以降の見通し
Angular 5は2017年11月にリリース後、マイナーアップデートが行われて、2018年2月現在はバージョン5.2になっています。変更の詳細はAngular公式ブログ（5.1／5.2）で案内されています。
次のメジャーアップデートとなるバージョン6（Angular 6）も開発が進んでいます。2018年2月現在はベータ版の状態で、そう遠くないうちにリリースされる見込みです。
まとめ
本記事では、2017年11月にリリースされたAngular 5について、主な変更点や追加機能を説明しました。速度改善やサイズ縮小を実現する修正や、便利な機能追加が行われました。今後も定期的なメジャーアップデートが行われる見込みです。
次回は、Angularアプリの作成に欠かせなくなったコマンドラインツール「Angular CLI」について説明していきます。
