Angular4入門_Vol.13
参考サイト
https://www.codingforentrepreneurs.com/projects/try-angular-v4/
ngForm Basics
- navbarのformにngFormを使う準備をする。まず通常のformで実装するときのコードを確認する。search.component.htmlに追記する。
<!-- methodとactionを追加 --> <form class="navbar-form navbar-left" method="get" action="/search/"> <div class="form-group"> <!-- name="q"に変更 --> <input type="text" class="form-control" placeholder="Search" name='q' [(ngModel)]='searchQuery' > </div> <button type="submit" class="btn btn-default"><span *ngIf='!searchQuery'>Search</span><span *ngIf='searchQuery'>Search for... {{ searchQuery }}</span></button> </form>
- ngSubmitを使ってみる。search.component.htmlに追記する。
<form class="navbar-form navbar-left" (ngSubmit)='submitSearch($event)'> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" name='q' [(ngModel)]='searchQuery' > </div> <button type="submit" class="btn btn-default"><span *ngIf='!searchQuery'>Search</span><span *ngIf='searchQuery'>Search for... {{ searchQuery }}</span></button> </form>
- submitSearch をsearch.component.tsに定義する。
submitSearch(event){ console.log(event) }
submitをクリックしたときに、consoleにeventの内容が表示されれば成功!
ngFormをhtmlタグ内で、挿入して、submitSearchメソッドの引数として設定する。
<form #searchForm=(ngForm) class="navbar-form navbar-left" (ngSubmit)='submitSearch($event, searchForm)'>
- search.component.ts にngFormの内容を、formDataという引数で受けるように、追記する。
submitSearch(event, formData){ console.log(event) console.log(formData) }
1点errorが発生!
#searchForm='ngForm'
に修正(間違えて、(ngform)
と設定してしまっていた。)consoleに表示する内容を、formData.valueに設定してみる。
submitSearch(event, formData){ console.log(event) console.log(formData.value) }
Object {q: "ddd"} q:"ddd"
と、formData(ngForm)のObjectが表示される。input tagのnameはここででてくるのか!例えば、
<input type='hidden' name='loc' value='Newport Beach' [(ngModel)]='searchLocation'/>
というように別のnameの ngModelを挿入してみる。認識はしたが、loc: undefinedになってしまう。。。searchLocation のdefault valueは、search.component.tsで設定する必要あり。
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'search', templateUrl: './search.component.html', styleUrls: ['./search.component.css'] }) export class SearchComponent implements OnInit { searchLocation = 'Newport Beach' searchQuery = "New Search" constructor() { } ngOnInit() { } submitSearch(event, formData){ console.log(event) console.log(formData.value) } }
これで無事、searchLocationがconsoleに表示されるようになる。
Object {loc: "Newport Beach", q: "Search"}
といった具合。changeメソッドを使ってみる。
<input type="text" class="form-control" placeholder="Search" name='q' [(ngModel)]='searchQuery' (change)='searchQueryChange()'>
- changeメソッドに代入するsearchQueryChangeを定義する。
searchQueryChange(){ this.searchLocation = 'California' // searchLocationの内容を変更するだけ }
- これを実行すると、
Object {loc: "California", q: "ddd"}
という感じで、two way bindingで、locの内容を書き換えできる!
まとめ
- ngSubmit, ngModel, ngForm, change のangularのmethodを使うと、two way bindingな formが作れる!
<!-- ngFormで、formの内容を取得 > ngSubmitで、submitしたときに、formの内容を引数としたfunctionを実行できる --> <form #searchForm='ngForm' class="navbar-form navbar-left" (ngSubmit)='submitSearch($event, searchForm)'> <!-- ngModelで、dataの双方向のやりとりが可能になる --> <!-- changeで、変更があったときに、実行するメソッドを指定できる。 --> <input type='hidden' name='loc' [(ngModel)]='searchLocation'/> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" name='q' [(ngModel)]='searchQuery' (change)='searchQueryChange()'> </div> <!-- {{}}で、ngModelで定義した変数の中身を表示できる。 --> <button type="submit" class="btn btn-default"><span *ngIf='!searchQuery'>Search</span><span *ngIf='searchQuery'>Search for... {{ searchLocation }}{{ searchQuery }}</span></button> </form>