Djangoroidの奮闘記

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

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>