การใช้งาน Form กับ การเชื่อมข้อมูลแบบสองทาง ใน Angular เบื้องต้น

    <link rel="stylesheet"
          href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">  

styleUrls:  ['./staff-form.component.css']  

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

@Component({
  moduleId: module.id,
  selector: 'staff-form',
  templateUrl: `./staff-form.component.html`
})
export class StaffFormComponent  { 
  
}

export class StaffFormComponent  { 
  staff = ['John Smoke','Linda Pink','Lisa Mour'];
}

export class StaffFormComponent  { 
  staff = [
      new Staff(1,'John Smoke','IT Support'),
      new Staff(2,'Linda Pink','Accounting'),
      new Staff(3,'Lisa Mour','Marketing')
  ];
}

export class Staff {

  constructor(
    public id: number,
    public name: string,
    public department: string,
    public age?: number
  ) {  }

}

 new Staff(3,'Lisa Mour','Marketing') 

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

import { Staff } from './staff';

@Component({
  moduleId: module.id,
  selector: 'staff-form',
  templateUrl: `./staff-form.component.html`
})
export class StaffFormComponent  { 
    // กำนหด array เก็บแผนกของ staff
    departments = [
        'Accounting','IT Support','Marketing'
        ];
    // กำหนดตัวแปร model สร้าง staff ใหม่
    model = new Staff(
            6,'John Smoke', this.departments[1],27
        );
    // ตัวอย่างเป็นสร้าง staff ที่มี id = 6 name = 'John Smoke'
    // department = 'IT Support' (ใช้ค่าจากตัวแปร array)        
    // และ age = 27

}

<div class="container">
  <div>
    <h1>Staff Form</h1>
    <form>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" 
            required >
      </div>
      <div class="form-group">
        <label for="age">Age</label>
        <input type="text" class="form-control" id="age">
      </div>
      <div class="form-group">
        <label for="department">Department</label>
        <select class="form-control" id="department"
            required >
          <option></option>
        </select>
      </div>
      <button type="submit" class="btn btn-success">Submit</button>
    </form>
  </div>

get diagnostic() { return JSON.stringify(this.model); }

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

import { Staff } from './staff';

@Component({
  moduleId: module.id,
  selector: 'staff-form',
  templateUrl: `./staff-form.component.html`
})
export class StaffFormComponent  { 
    // กำนหด array เก็บแผนกของ staff
    departments = [
        'Accounting','IT Support','Marketing'
        ];
    // กำหนดตัวแปร model สร้าง staff ใหม่
    model = new Staff(
            6,'John Smoke', this.departments[1],27
        );
    // ตัวอย่างเป็นสร้าง staff ที่มี id = 6 name = 'John Smoke'
    // department = 'IT Support' (ใช้ค่าจากตัวแปร array)        
    // และ age = 27
    get diagnostic() { return JSON.stringify(this.model); }
}

<div class="container">
  <div>
    <pre>{{diagnostic}}</pre>
    <form>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" 
            required [(ngModel)]="model.name" name="name" >
      </div>
      <div class="form-group">
        <label for="age">Age</label>
        <input type="text" class="form-control" id="age"
            [(ngModel)]="model.age" name="age">
      </div>
      <div class="form-group">
        <label for="department">Department</label>
        <select class="form-control" id="department"
            required [(ngModel)]="model.department" name="department">
          <option *ngFor="let department of departments" 
          [value]="department">{{department}}</option>
        </select>
      </div>
      <button type="submit" class="btn btn-success">Submit</button>
    </form>
  </div>

<pre>{{diagnostic}}</pre>

        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" 
            required [(ngModel)]="model.name" name="name" >

        <label for="department">Department</label>
        <select class="form-control" id="department"
            required [(ngModel)]="model.department" name="department">
          <option *ngFor="let department of departments" 
          [value]="department">{{department}}</option>
        </select>

*ngFor="let department of departments" 

 [value]="department" 

[target]="expression" 

<input [value]="department" >
<input value="{{department}}" >

{{expression}}
[target]="expression"
bind-target="expression"

<pre>{{diagnostic}}</pre>

<img bind-src="staffImageUrl">

<option [value]="department"></option>

<div [ngClass]="classes"></div>
<div [class.special]="isSpecial">Special</div>

<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

(target)="statement"
on-target="statement"

<button (click)="clickMe()">Click ME!!</button>
<button on-click="onSave()">On Save</button>

[(target)]="expression"
bindon-target="expression"

<input [(ngModel)]="name">