Angular入門 5日目

社内ツールをバックエンドをGo(goa)で、フロントエンドをAngularで作ることにした。

5日目。 ちょっと忙しくてあまり時間が取れなかった。

金曜日にやったこと

バリデーション

inputタグにpatternという属性を指定すると良いみたい。ngModelでバインディングしておく必要があるかもしれない。

<input type="text" id="code"
    name="code" [(ngModel)]="project.code"
    #code="ngModel" pattern="PJ-[0-9]{6}">

こんな感じで正規表現が使える。

バリデーションのメッセージ

invalidな時にエラーメッセージを出すには以下のようにする。

<div [hidden]="code.valid">
    <span class="help is-danger">
        codeはPJ-で始まる6桁の数字です
    </span>
</div>

hiddenはCSSで display: none を付けるようなので、他のCSSのスタイルと競合しないように注意する必要がある。

もしかしたら ngIf を使った方が良いかもしれない。

フォームの見た目

inputタグなどを赤くしたいような時には、規定のCSSクラスを定義する。

例えはinvalidな時には、 ng-invalid というクラスが付与されるので、form.cssなどを作って置いてそこに必要なスタイルを書いてHTMLから参照する。

.ng-invalid {
    border-color: #F00;
}

app.component.css に書けば良いのでは？と思ってたけど、違った。cssはcomponentごとに独立しているらしい。