สร้าง From component

สร้าง component ใหม่ขึ้นมาหนึ่งตัว ชื่อว่า friendlist-form

ng generate component friendlist-form

ทำการสร้าง Form ขึ้นมาในไฟล์ friendlistform.component.html

<div>
  <form #f="ngForm" (ngSubmit)="onSubmit(f.value)" class="ui form">

    <div>
      <label for="name">Friend's name</label>
      <input type="text" id="nameInput" placeholder="your friend's name" name="name" ngModel>
    </div>

    <button type="submit" class="ui button">Submit</button>
  </form>
</div>

เรียกใช้งาน Form ใน Component

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

@Component({
  selector: 'friendlistform',
  templateUrl: './friendlistform.component.html',
  styleUrls: ['./friendlistform.component.css']
})
export class FriendlistformComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  onSubmit(f){
    console.log(f);
  }

}

ลองทดสอบง่ายๆก่อนด้วยการดูค่าใน console