noteに投稿を始めました。今回はその過程で一番最後に開発したangularの話について
@angular/formsとは
angularでフォーム入力をバインドする時に使うモジュールです。
angularドキュメントが非常に充実しているので、詳しくは下のリンク参照
github
ここで実装しています
実装の仕方
↑のgithubのsourceに沿って紹介
入力フォームのモデル生成
画像の入力に合わせて入力フォームのモデルを生成するために以下のコマンドを実行
ng generate class User
「src/app/user.ts」が生成されるので、中身を以下に修正
■ src/app/user.ts
export class User { constructor( public name: string, public genderCode: number ) {} }
入力フォームのモデルをコンポーネントに追加
■ src/app/app.component.ts
import { Component, OnInit } from "@angular/core"; import { User } from "./user"; // ← 追加 @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent implements OnInit { model = new User("", 1); // ← 追加 (以下略)
@angular/formsをモジュールに追加
■ src/app/app.module.ts
import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; // ←追加 import { HttpClientModule } from "@angular/common/http"; import { FormsModule } from "@angular/forms"; import { AppComponent } from "./app.component"; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, HttpClientModule, FormsModule // ←追加 ], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
htmlにバインドを追加
上記で追加した @angular/forms を使って入力フォームのモデルにバインドしていく
テキスト入力のバインド
テキスト入力とmodel.nameをバインドさせる
■ src/app/app.component.html
名前: <input name="name" placeholder="name" [(ngModel)]="model.name" />
ラジオボタン入力のバインド
テキスト入力とmodel.genderCodeをバインドさせる
■ src/app/app.component.html
性別: <input type="radio" id="male" name="genderCode" [value]="1" [(ngModel)]="model.genderCode" [checked]="model.genderCode === 1" /> <label for="male" style="padding-right:8px">男性</label> <input type="radio" id="female" name="genderCode" [value]="2" [(ngModel)]="model.genderCode" [checked]="model.genderCode === 2" /> <label for="female">女性</label>
(最後)バインドしたモデルを参照する
入力したモデルの値を参照する
■ src/app/app.component.ts
import { Component, OnInit } from "@angular/core"; import { User } from "./user"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent implements OnInit { model = new User("", 1); onClick() { // ← 追加 console.log(this.model) }
追加した値参照用のメソッドを呼ぶ
■ src/app/app.component.html
<button (click)="onClick()">ログ確認</button>
ここまでバインド & 参照完了