Angular2バリデーションの注意点

Angular2のバリデーションで躓いたのでメモ。 inputのerrorsプロパティはエラーの場合しかオブジェクトが生成されないため、 エラーメッセージを隠す際はngIfを使用する。

<form #form1="ngForm">
    <ion-grid>
        <ion-row>
            <ion-col>
                対象月：
                <input type="text"
                       [(ngModel)]="targetMonth"
                       [ngModelOptions]="{standalone: true}"
                       #t_month="ngModel"
                       pattern="^20(0[1-9]|[1-9][0-9])(0[1-9]|1[0-2])" ngModel />
                <p *ngIf="t_month.errors && t_month.errors.pattern" class="error">
                    値が不正です。西暦4桁＋月2桁を入力してください。（例：201612）
                </p>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col width-10>
                <button type="button" (click)="onSubmit()" [disabled]="!form1.form.valid">
                    データ取得
                </button>
            </ion-col>
        </ion-row>
    </ion-grid>
</form>