Angular4入門_Vol.12
参考サイト
https://www.codingforentrepreneurs.com/projects/try-angular-v4/
Two Way Data Binding
search機能を実装する。
$ ng g component search
でsearch componentを作成する。search.component.tsの、selectorを、searchに変更する。
また、app.component.htmlの、navbar formの箇所をコメントアウトする。
<search></search> <!-- <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> -->
無事search works!が表示された!
次にコメントアウトしたformのhtmlをsearch.component.htmlに移動させる。
<form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
これで無事、search boxが表示された(^o^)
two way bindingを試してみる。まずは, ngModelを指定する。
<form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" [(ngModel)='searchQuery']> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
- error 発生!
Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
とのことなので、他のフォームと区別するために、name attributeの設定が必要ぽい。
<form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" name='searchQuery' [(ngModel)]='searchQuery' > </div> <button type="submit" class="btn btn-default">Submit</button> </form>
- searchQueryを、
{{ searchQuery }}
で挿入すると、inputされた文字列などがそこに反映される。すごい!!
<form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" name='searchQuery' [(ngModel)]='searchQuery' > </div> <button type="submit" class="btn btn-default">Submit {{ searchQuery }}</button> </form>
まとめ
- two way bindingめっちゃ便利ぽいな。ngModelを指定 > 入力された値をngModelで指定した変数?に代入 > 指定した変数は、{{}} でcallすることが可能!