การใช้งาน Reactive Form ด้วย FormBuilder ใน Angular

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

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';
import { StaffDetailComponent }  from './components/staff-detail.component';

@NgModule({
  imports:      [ 
    BrowserModule,
    ReactiveFormsModule
  ],
  declarations: [ 
    AppComponent,
    StaffDetailComponent
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Component } from '@angular/core';
 
@Component({
  selector: 'my-app',
  template: `
  <div class="container">
    <h1>Reactive Forms</h1>
    <staff-detail></staff-detail>
  </div>
  `,
})
export class AppComponent  {

}

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

@Component({
  selector: 'staff-detail',
  templateUrl:'/app/components/staff-detail.component.html'
})
export class StaffDetailComponent  {
    name = new FormControl();
}

import { FormControl } from '@angular/forms';

templateUrl:'/app/components/staff-detail.component.html'

export class StaffDetailComponent  {
    name = new FormControl();
}

<h2>Staff Detail</h2>
<h3><i>Just a FormControl</i></h3>
<label class="center-block">Name:
  <input class="form-control" [formControl]="name">
</label>

import { Component } from '@angular/core';
import { FormControl,FormGroup } from '@angular/forms';

export class StaffDetailComponent  {
    staffForm = new FormGroup ({
      name: new FormControl()
    });    
}

<h2>Staff Detail</h2>
<h3><i>FormControl in a FormGroup</i></h3>
<form [formGroup]="staffForm" novalidate>
  <div class="form-group">
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>
</form>

<h2>Staff Detail</h2>
<h3><i>FormControl in a FormGroup</i></h3>
<form [formGroup]="staffForm" novalidate>
  <div class="form-group">
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>
</form>
<p>Form value: {{ staffForm.value | json }}</p>
<p>Form status: {{ staffForm.status | json }}</p>

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

export class StaffDetailComponent  {
  staffForm: FormGroup; // <--- staffForm is of type FormGroup

  constructor(private fb: FormBuilder) { // <--- inject FormBuilder
    this.createForm();
  }

  createForm() {
    this.staffForm = this.fb.group({
      name: '', // <--- the FormControl called "name"
    });
  }    

}

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

    this.staffForm = this.fb.group({
      name: ['',Validators.required], 
    });

    this.staffForm = this.fb.group({
      name: ['',[
              Validators.required,
              Validators.minLength(4)
            ]
      ], 
    });