PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

16 April 2017 By
formbuilder reactive form formcontrol validators formgroup


Reactive form เป็นเทคนิคที่ใช้ในการสร้าง form ด้วยรูปแบบ reactive ซึ่งเป็นอีกวิธีหนึ่งที่ใช้งาน
ในการจัดรูปแบบของ form ใน Angular เราเคยได้ใช้รูปแบบก่อนหน้าที่ชื่อ Template-driven form
มาแล้ว ลองทบทวนบทความเกี่ยวกับ Template-driven form ได้ที่
 
"ทบทวนบทความ คลิก"
Template-driven form
 

ทำความรู้จัก Reactive Form

Angular จัดเตรียมเทคนิคหรือวิธีการในการสร้าง form มาให้ใช้งานอยู่ 2 รูปแบบ คือ Reactive Form และ 
Template-driven form โดยทั้งสองวิธีจะมี class ที่ต้องใช้งานอยู่ในไลบรารี่ @angular/forms เหมือนกัน
    โดยในแต่ละรูปแบบมีความแตกต่างแยกกันอย่างเห็นได้ชัด ไม่ว่าจะเป็นรูปแบบการเขียนหรือเทคนิควิธี
ต่างๆ รวมทั้ง มีการใช้งาน module เฉพาะตัวของแต่ละอันด้วย ในรูปแบบ Reactive form จะเรียกใช้งาน 
ReactiveFormsModule ส่วนในรูปแบบ Template-driven form จะเรียกใช้งาน FormsModule.

รูปแบบ Reactive Form

การใช้งาน reactive form จะอำนวนความสะดวกในการเขียนโปรแกรมโต้ดตอบกันระหว่างข้อมูลที่ส่งมาจากฝั่ง
server กับส่วนติดต่อผู้ใช้ ในรูปแบบฟอร์มที่เก็บสภาวะและค่าการจัดการ HTML ในการแสดงผล
    โดยจะใช้วิธีการสร้างโครงสร้างของ form control object ไว้ใน component class แล้วทำการเชื่อมโยงกับ
form control element พื้นฐานเดิม ที่อยู่ใน component template
    การสร้างและจัดการ form control object โดยตรงใน component class นั้นก็เหมือนกับว่า component class
เข้าถึงแบบจำลองข้อมูล data model และ โครงสร้างของ form control ทั้งสองส่วนนี้ได้ในทันที  โดยเราสามารถ
ใส่ค่าแบบจำลองข้อมูลเข้าไปใน form control และก็ดึงค่าข้อมูลที่เปลี่ยนแปลงกลับออกมา  ซึ่ง component จะ
คอยสังเกตการเปลี่ยนแปลงสภาวะของ form control แล้วโต้ตอบการเปลี่ยนที่เกิดขึ้นนั้นๆ
    ข้อได้เปรียบอย่างหนึ่งของการจัดการกับ form control object โดยตรงก็คือ ค่าและความถูกต้องของข้อมูลที่
มีการเปลี่ยนแปลงจะเกิดขึ้นพร้อมๆ กันและเราสามารถควบคุมได้ 
    การดูแลข้อมูลในแบบฉบับ reactive  นั้น component จะคงการไม่ให้เปลี่ยนแปลงค่าได้ ของข้อมูลไว้ โดยให้ถือ
ว่าเป็นค่าข้อมูลดั่งเดิมอย่างแท้จริง  component เอาค่าการเปลี่ยนแปลงแยกออกมาแล้วส่งต่อ
ไปยัง component ภายนอก หรือส่งต่อไปยัง service มากกว่าที่จะทำการเปลี่ยนแปลงค่าของข้อมูลโดยตรง 
ยกตัวอย่าง เช่น ทำการบันทึกข้อมูล และส่งค่าข้อมูลใหม่นั้นไปยัง component ที่มีผล จากการเปลี่ยนแปลง
ข้อมูลนั้นๆ 
 
 

รูปแบบ Template-driven form

การใช้งานรูปแบบ Template-driven form นั้น เราใช้วฺิธีใส่ HTML form control (อย่างเช่น <input> และ <select>)
เข้าไปใน component template และทำการเชื่อมโยงข้อมูลกับค่า component property โดยใช้ ngModel directive
    เราไม่จำเป็นต้องสร้าง form control object เอง Angular directive จะสร้างส่วนนี้ให้โดยใช้ข้อมูลการเชื่อมโยง
ที่เรากำหนดไว้  เราไม่ต้องทำคำสั่งเพื่อใส่ข้อมูลเข้าไปหรือนำข้อมูลออกมา   Angular จะจัดการทั้งหมดนี้ด้วยการใช้
งาน ngModel โดยจะทำการอัพเดทค่าข้อมูลที่สามารถเปลี่ยนแปลงได้เมื่อมีการเปลี่ยนแปลงค่าเกิดขึ้น ด้วยรูปแบบดัง
กล่าวนี้ จึงเป็นเหตุที่ว่า ngModel directive ไม่ได้อยู่เป็นส่วนหนึ่งของ ReactiveFormsModule
    ในขณะที่ไม่มีการกำหนดโค้ดไว้ใน compoennt class รูปแบบ template-driven forms จึงเป็นลักษณะการทำงาน
ไม่ได้เกิดขึ้นพร้อมกัน ซึ่งอาจจะทำให้เกิดความยุ่งยากซับซ้อนในสถานการณ์การใช้งานที่มีระดับสูงขึ้น
 
 

การทำงานที่เกิดขึ้นไม่พร้อมกัน และเกิดขึ้นพร้อมกัน - Async vs. sync

Reactive form เป็นแบบ synchronous. 
Template-driven form เป็นแบบ asynchronous 
 
ใน reactive form เราสร้างรายการโครงสร้าง form control ไว้ในโค้ด  ดังนั้นเราสามารถที่จะจัดการอัพเดทค่า
หรือแม้แต่ทำการเข้าไปดูรายการ form control ต่างๅ ด้านในได้จาก form หลัก 
 
ส่วน Template-driven form จะอาศัยตัวแทนในการสร้าง form control ไปไว้ใน directive เพื่อหลีกเลี่ยงการ
เปลี่ยนแปลงค่า หลังจากมีการตรวจสอบความถูกต้องของข้อมูลแล้ว ดังนั้น directive จึงมีวัฐจักรวนมากกว่าหนึ่ง
ครั้งในการสร้างโครงสร้าง form control  นั่นหมายความว่า เราอาจจะต้องรออีกสักประมาณ 1 วินาทีก่อนที่จะสามารถ
จัดการการควบคุมต่างภายใน component class
 
 

ระหว่าง Reactive form และ Template-driven form ควรเลือกแบบไหน

ด้วยต้นแบบสถาปัตยกรรมที่แตกต่างกัน มีจุดแข็งจุดอ่อนในตัวของมันเอง เราจึงไม่สามารถบอกได้ว่า
วิธีไหนดีกว่ากัน  ดังนั้นให้เราเลือกใช้ให้เหมาะสมกับรูปแบบการทำงานที่สอดคล้องกับรูปแบบที่เราได้
อธิบายไปแล้วด้านบน ซึ่งบางครั้งเราอาจจะใช้ทั้งสองรูปแบบใน App ของเราก็ได้
 
 

เตรียมพร้อมก่อนใช้งาน Reactive form

เนื่องจากเราจะมีการใช้งานฟอร์ม และเพื่อให้การแสดงผลการทดสอบมีการแสดงผลหน้าตาที่ดูง่าย มีระเบียบ
เราจะใช้งาน bootstrap css ไฟล์มาช่วยจัดการ ดังนั้นในไฟล์ index.html ให้เราเพิ่มส่วนของการ
เรียกใช้ไฟล์ css เข้าไปในส่วนของ <head> ดังนี้
 
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
 
แทรกโค้ดด้านบนไปไว้ใน <head> ของไฟล์ index.html
 
ต่อมาให้เราทำการ Import the ReactiveFormsModule เข้ามาใช้งานใน App ของเราก่อน โดยให้แก้ไขไฟล์
app.module.ts เป็นดังนี้
 

ไฟล์ app.module.ts

 

 
 
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 ReactiveFormsModule และมีการกำหนดค่าใน @NgModule และเนื่องจาก
ตัวอย่างประกอบการอธิบายเรา จะสร้างฟอร์มให้กับ staff เป็นแบบจำลองในการทดสอบประกอบ เราจะมีการ
สร้าง staff-detail.component.ts  ดังนั้น ให้เราทำการ import class StaffDetailComponent พร้อมกับ
ประกาศใช้งานใน declarations ตามโค้ดด้านบนไว้ก่อนได้เลย
 
จากนั้นไปที่ไฟล์ app.component.ts อย่างที่บอกว่าเราจะมีการใช้ <staff-detail> directive ให้เราปรับไฟล์
เป็นดังนี้

ไฟล์ app.component.ts

 

 
 
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  {

}
 
สังเกตในส่วนของ template เรามีการใช้ css class ที่ชื่อ container ซึ่งเป็นชื่อ class ของ bootstrap css
ดังนั้น ถ้าเราเจอการใช้งาน css class ใดๆ ในตัวอย่าง ให้เข้าใจว่านั้นคือส่วนของ css class ของ bootstrap
ไม่มีผลใดๆ ต่อค่าตัวแปร หรือ การใช้งาน กับ reactive form 
 
 

การสร้าง reactive form component

ไฟล์ staff-detail.component.ts ไว้ในโฟลเดอร์ components ดังนี้ 
 

ไฟล์ staff-detail.component.ts

 
 
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();
}
 
เนื่องจากเราจะมีการใช้งาน FormControl class มาใช้ในการจัดการกับ form control ต่างๆ 
เราจึงต้องทำการ import class เข้ามาใช้งาน รายละเอียดเกี่ยวกับ class ต่างๆ นั้นจะอธิบาย
ในลำดับต่อไป 
 
import { FormControl } from '@angular/forms';
 
ใน StaffDetailComponent นี้เราจะใช้ template เป็นแบบไฟล์แยก ดังนั้นจึงกำหนด templateUrl 
เป็น path ของไฟล์ template ที่เราจะสร้าง สังเกตการกำหนด path แบบใหม่ที่ใช้ใน Angular v4
จะใช้เป็นแบบ Absolute parth ดังนี้
 
templateUrl:'/app/components/staff-detail.component.html'
 
ส่วนต่อมาคือส่วนของการกำหนด StaffDetailComponent class
 
export class StaffDetailComponent  {
    name = new FormControl();
}
 
เรามีการกำหนดการใช้งาน FormControl โดย FormControl class จะเป็น directive ที่จะทำให้เราสามารถ
สร้างหรือจัดการต่างๆกับตัว FormControl ได้โดยตรง
 
จากตัวอย่างด้านบน เราสร้าง FormControl ที่ชื่อว่า "name"  ซึ่งเราจะใช้งานใน template ผูกเชื่อมไว้กับ
HTML input element เพื่อกำหนดสำหรับชื่อของ staff หรือพนักงาน
 
จากนั้นให้เราสร้างไฟล์ template ชื่อ staff-detail.component.html ไว้ในโฟลเดอร์ components
 

ไฟล์ staff-detail.component.html

 

 
<h2>Staff Detail</h2>
<h3><i>Just a FormControl</i></h3>
<label class="center-block">Name:
  <input class="form-control" [formControl]="name">
</label>
 
จากโค้ดสังเกตว่า เรามี FormControl แค่ตัวเดียว (เราไม่ต้องสนใจชื่อ css class ของ bootstrap ไม่มีผลใดๆ)
ดังนั้นเข้าใจอย่างง่าย FormControl ก็หมายถึงตัวที่ใช้จัดการกับ form element ต่างๆ ไม่ว่าจะเป็น <input> 
<select> <textarea> เหล่านี้เป็นต้น
    และเพื่อให้ Angular รู้ว่าเราต้องการเชื่อมโยงข้อมูลของ <input> element กับ "name"  FormControl ใน
component class เราจึงกำหนดการเชื่อมโยงโดยใช้รูปแบบ  [formControl]="name" เข้าไปใน template
ในส่วนของ <input> element 
 
ผลลัพธ์เมื่อรัน App เบื้องต้นจะได้เป็นดังนี้
 
 

 
 
และก่อนจะลงไปในรายละเอียดเพิ่มเติม เรามาดู class ที่เราจะใช้งานหรือจำเป็นต้องใช้ ในการใช้งานรูปแบบ 
Reactive Form ว่าประกอบด้วยอะไรบ้าง
 

Form class ที่จำเป็นในการใช้งาน

ส่วนนี้จะเป็นส่วนอธิบายย่อยให้การให้ความเข้าใจเบื้องต้นของ class ต่างที่จะใช้งาน
AbstractControl คือ class หลักที่เป็นสาระสำคัญ ที่ใช้สร้าง form control class อื่นๆ ได้แก่ FormControl
FormGroup และ FormArray 
 
FormControl ใช้ติดตามค่าของ form control แต่ละตัว รวมทั้งติดตามสถานะความถูกต้องของข้อมูล
หรือค่านั้นๆ ด้วย โดยจะรับผิดชอบในส่วนของ HTML form control อย่างเช่น <input> <selelct> 
เหล่านี้เป็นต้น
 
FormGroup ใช้ติดตามค่าและความถูกต้องของข้อมูลสำหรับกลุ่มของ AbstractControl หรือกลุ่มของ FormControl
ที่แยกย่อยรวมกันเป็นกลุ่ม เราสามารถใช้ FormGroup จัดกลุ่มย่อยไว้ในกลุ่มหลักได้ และฟอร์มที่ระดับสูงสุดก็เป็น
FormGroup  (ส่วนนี้ถ้าอ่านแล้วยังไม่เข้าใจ ให้ดูรายละเอียดเพิ่มเติมให้ข้อถัดไปได้)
 
FormArray ใช้ติดตามค่าและความถูกต้องของข้อมูลที่เป็น array ของ AbstractControl หรือกลุ่มของ 
FormControl ที่แยกย่อยรวมกันเป็นกลุ่ม (อาจจะได้เห็นรายละเอียดในบทความตอนหน้า)
 

 

การใช้งาน FormGroup

จากรูปแบบการใช้งาน FormControl ของตัวอย่างเบื้องต้นที่ผ่านมา มีการใช้งาน FormControl เพียงตัวโดย
ดังนั้นเราอาจจะไม่จำเป็นต้องใช้งาน FormGroup ก็ได้  แต่ในความเป็นจริง และส่วนใหญ่แล้ว App จะมีการใช้งาน
FormControl มากกว่าหนึ่ง และเพื่อที่จะจัดให้รายการ FormControl แต่ละอันมารวมกันนั้นเราจึงต้องใช้ FormGroup
มาจัดการ เบื่องต้นให้เรา import class เพิ่มเติมเข้าไปใน StaffDetailCompoennt ดังนี้
 

ไฟล์ staff-detail.component.ts (บางส่วน)

import { Component } from '@angular/core';
import { FormControl,FormGroup } from '@angular/forms';
 
จากนั้นส่วนของ class ให้ทำการคลุม FormControl ด้วย FormGroup อีกที โดยกำหนดชื่อ FormGroup ว่า 
"staffForm" จะได้เป็นดังนี้
 

ไฟล์ staff-detail.component.ts (บางส่วน)

export class StaffDetailComponent  {
    staffForm = new FormGroup ({
      name: new FormControl()
    });    
}
 
หลังจากที่เราแก้ไขส่วนของ class แล้ว ให้ทำการแก้ไขไฟล์ template ชื่อไฟล์ staff-detail.component.html 
เป็นดังนี้
 

ไฟล์ staff-detail.component.html 

<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>
 
สังเกตในส่วนของ <form> element มีการใช้ "novalidate" attribute เพื่อต้องการกำหนดให้ <form> element
ไม่ให้ทำการใช้งานการตรวจสอบความต้องของข้อมูลโดยใช้รูปแบบพื้นฐานเดิมของ HTML
 
จากโค้ดเราจะเห็นว่า ตอนนี้เรามีการเรียกใช้งาน FormGroup class  ดังนั้นเราจึงต้องทำการอัพเดทโครงสร้างของ
template ให้สอดคล้องกัน โดยจากเดิมเราใช้ <input> element ให้สัมพันธ์กับ FormControl class โดยที่ไม่มี
การใช้งาน FormGroup ในรูปแบบ [formControl]="name"  เป็นรูปแบบการใช้งาน FormControl เดียว จึงสามารถ
ทำงานได้แม้ไม่มีการใช้ FormGroup  แต่กรณีนี้เรามีการใช้งาน FormGroup เราจำเป็นต้องเปลี่ยนเป็นแบบนี้แทน
formControlName=name เพื่อให้สอดคล้องกับรูปแบบ FormControl ที่ใช้งานใน class รูปแบบใหม่
    การกำหนดในลักษณะดังกล่างข้างต้น เป็นการบอกให้ Angular ไปดูที่ FormGroup หลัก ในที่นี้ก็คือ "staffForm"
จากนั้นค่อยเข้าไปดูภายในของกลุ่มเพื่อมองหา FormControl ที่มีชื่อว่า "name" 
 
เรามาดูผลลัพธ์เมื่อใช้งาน FormGroup กัน
 
 

 
 
เราจะได้รูปแบบฟอร์มทีเราต้องการ แต่ตอนนี้เราไม่รู้ว่ามันทำงานได้หรือไม่ ถ้าเมื่อเราทำการกรอกข้อมูลลงไป
แล้วค่าจะเป็นค่า ค่าจะไปแสดงได้อย่างไร หัวข้อต่อไปเราจะมาดูการอ้างอิงค่าต่างๆ กัน

 

ตรวจสอบค่าต่างๆ ผ่าน Form model

ค่าต่างๆ ที่ได้จากการสร้างฟอร์มในรูปแบบ Reactive Form จะสามารถอ้างอิงค่าผ่าน form model โดยให้เราเพิ่ม
บรรทัดต่อไปในลงไปในไฟล์ template 
 

ไฟล์ staff-detail.component.html 

<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>
 
จะได้ผลลัพธ์เป็น
 
 

 
 
และเมื่อเราทดสอบกรอกข้อมูลเข้าไป ก็จะได้เป็น
 
 

 
 
ค่าของ staffForm.value จะได้เป็น Array ของ object ของ FormControl ภายใน FormGroup และจากตัวอย่างเรามี
FormControl อยู่ตัวเดียว ค่าที่ได้จริงมีแค่ { "name": "Jubjang" }
"name" คือ property ของ object "Jubjang" คือค่าของมันกรณีเรากรอกข้อมูล
 
ค่าเริ่มต้นของ "name" property นั้นเป็น string ค่าว่าจึงมีค่าเป็น null เมื่อยังไม่ได้กรอกข้อมูลใดๆ 
 
ส่วนค่าของ staffForm.status เป็นค่าแสดงสถานะของความถูกต้องของข้อมูล และเนื่องจากรูปแบบฟอร์ม
ข้างต้น เราไม่ได้มีการตรวจสอบความถูกต้องใดๆของข้อมูล ดังนั้นผลที่ไดค่า staffForm.status  เป็น "VALID"
 

 

แนะนำการใช้งาน FormBuilder

จากรูปแบบการใช้งาน FormControl ภายใน FormGroup กรณีข้างต้นเรามีเพียง FormControl เพียงแค่ตัวเดียว
อาจจะไม่มีปัญหาใดๆ แต่กรณีเราต้องมี FormControl หลายๆ อัน ซึ่งปกติแล้ว ฟอร์มก็จะมี form element ต่างๆ
มากกว่าหนึ่ง เช่นมี <input> <select> <textarea> เหล่านี้ เมื่อเรากำหนดใน FormGroup เราจะต้องทำการทำ
การกำหนด new FormControl()  ซ้ำๆ หลายๆ อัน ดังนั้นจึงเปลี่ยนใช้งาน FormBuilder ในการจัดการดังนี้
 

ไฟล์ staff-detail.component.ts (บางส่วน) 

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
 
เราทำการ import FormBuilder เข้ามาใช้งาน แทน FormControl เดิม เพราะเราจะใช้ FormBuilder
ทำการสร้าง FormControl แต่ละอันให้เราแทน ดังโค้ดในส่วนของ class
 

ไฟล์ staff-detail.component.ts (บางส่วน) 

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"
    });
  }    

}
 
 
จากโค้ดแก้ไขด้านบน เราทำการเปลี่ยนองค์ประกอบต่างๆ ให้เขียนและอ่านง่ายขึ้น
  • เริ่มต้นที่การประกาศประเภทตัวแปรของ "staffForm" เป็น FormGroup" 
  • นำเข้า "FormBuilder" เข้าไปในคำส่ง constructor เพื่อใช้งานผ่านตัวแปรชื่อ "fb"
  • สร้างฟังก์ชั่นคำสั่งชื่อว่า "createForm()" เพื่อเรียกใช้งาน "FormBuilder" สำหรับกำหนดค่าให้กับ "staffForm"
  • เรียกใช้คำสั่ง createForm() ภายใน constructor
 
FormBuilder.group เป็นคำสั่งที่ใช้ในการสร้าง FormGroup  ทำงานคล้ายๆ กับคำสั่ง
new FormGroup() จากหัวข้อการใช้งาน FormGroup ที่ผ่านมา  โดย FormBuilder.group จะใช้ key และ
value ซึ่งก็คือ ชื่อและค่าของ FormControl ในตัวอย่าง "name" control มีค่าเริ่มต้นเป็นข้อความค่าว่าง
 
จะได้ผลลัพธ์เป็นดังนี้
 
 
 

 

ตรวจสอบความถูกต้องของข้อมูลด้วย Validators

กรณีที่เราต้องการตรวจสอบความถูกต้องของข้อมูล เราจะต้องทำการ import "Validators" เข้ามาใช้งานด้วย
สมมติเราต้องการกำหนด "name" จะต้องไม่เป็นค่าว่าง สามารถทำได้ดังนี้
 
เริ่มต้นด้วยการ import "Validators" class เข้ามาใช้งาน
 

ไฟล์ staff-detail.component.ts (บางส่วน) 

 
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
เพื่อต้องการใช้ "name" FornControl มีการตรวจสอบความถูกต้อง ในกรณีนี้คือจำเป็นต้องกรอกข้อมูลนี้
ให้ทำการเปลี่ยนแปลงค่าของ "name" property เป็นรูปแบบ array โดยค่าแรกเป็นค่าเริ่มต้น ของ "name"
property ส่วนค่าที่สองเป็นค่า การตรวจสอบความถูกต้องของข้อมูล ในที่นี้ใช้ "Validators.required" เพื่อ
ต้องการให้ "name" property นี้จำเป็นจะต้องมีข้อมูลไม่เป็นค่าว่าง จะได้เป็น
 

ไฟล์ staff-detail.component.ts (บางส่วน) 

 
    this.staffForm = this.fb.group({
      name: ['',Validators.required], 
    });
 
สังเกตผลลัพธ์
 


 
 
เราจะเห็นว่าส่วนของ Form status กลายเป็น "INVALID" ทั้งนี้ก็เพราะว่าค่าเริ่มต้นของ "name" property เป็น
ค่าว่าง การตรวจสอบข้อมูลคือ "name" property จะต้องไม่เป็นค่าว่าง ดังนั้นเมื่อยังไม่กรอกข้อมูลใด status จึง
กลายเป็น "INVALID" การตรวจสอบความถูกต้องของข้อมูลฟอร์มด้วย Validators เราจะได้กล่าวเพิ่มเติมในลำดับ
ต่อๆ ไป แต่ก่อนไปหัวข้อใหม่ เอาตัวอย่างกรณีเรามีการตรวจสอบความถูกต้องหลายเงื่อนไขพร้อมกัน เราจะกำหนด
ส่วนที่สองให้อยู่ใสรูปแบบ array กรณีตัวอย่างเพิ่มเติมต่อไปนี้ เราต้องการให้ "name" property จำเป็นต้องกรอก
ข้อมูลและต้องมีความยาวอย่างน้อย 4 ตัวอักษร จะได้เป็น
 

ไฟล์ staff-detail.component.ts (บางส่วน) 

 
    this.staffForm = this.fb.group({
      name: ['',[
              Validators.required,
              Validators.minLength(4)
            ]
      ], 
    });
 
 
ติดตามการใช้งาน Reactive Form หัวข้อต่อไปได้ต่อในตอนหน้า รอติดตาม
 




อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: reactive form formgroup formcontrol formbuilder validators






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง