Angular2 Form

NgForm - ts - API

↑のサンプルどおりに作ればOK

<div class="container">
  <h1>Artist Form</h1>
  <form #artistForm="ngForm" (ngSubmit)="onSubmit(artistForm)">
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" ng-control="name" id="name" name="name" required ngModel #name="ngModel">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
    {{name.value}}
</div>

• name属性は必要
• #artistForm というのは変数名 artistForm に "ngForm" を入れるという意味
• "ngForm" は ngForm ディレクティブ ?

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-artist-form',
  templateUrl: './artist-form.component.html',
  styleUrls: ['./artist-form.component.css']
})
export class ArtistFormComponent implements OnInit {

  constructor(
  ) { }

  ngOnInit() {
  }

  onSubmit(f: NgForm) {
    console.log('----------------', f.value)
  }

}

Angular CLI

Angular CLIによるAngular2入門 / Angular2アプリを爆速開発 - Qiita