Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

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することが可能!