Giới thiệu Form trong Angular 2

Như các bạn đã biết, trong bất kì application, web, web application thì Form là một thành phần không thể thiếu. Chính vì vậy, trong bài viết hôm nay thì mình và các bạn cùng nhau tìm hiểu về Form trong Angular 2 nhé !

Angular 2 hỗ trợ những loại Form nào, việc sử dụng các rule ra sao hay việc customize rule có khó không thì thông qua bài viết này hi vọng các bạn có thể hiểu phần nào về Form trong Angular 2

Angular 2 support phần Form linh hoạt hơn so với Angular 1, ta không bị giới hạn bởi việc chỉ dựa vào ngModel. Tùy vào mục đích sử dụng mà Angular 2 hỗ trợ 2 dạng sau đây:

• Template-Driven Forms: sử dụng các directive được build sẵn để tạo nên các Form đơn giản, không phức tạp
• FormBuilder: Sử dụng các API đã cung cấp sẵn để tạo những form phức tạp và handle được phần validation của Form

Trong bài viết này chúng ta cùng nhau tìm hiểu Form Builder nhé . Ok, let's go!

I. Giới thiệu cơ bản

1. Khai báo thư viện

• Trước khi chúng ta sử dụng các Feature của Form thì ta cần khai báo các thư viện cần thiết để Angular biết và hỗ trợ các tính năng của các thư viện đó khi ta cần
• Trong Module gốc ta cần import các thư viện sau: FormsModule, ReactiveFormsModule, Validators
• Tiếp đó khai báo chúng vào phần import của file app.module
• Demo:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
import { MyApp } from './components'

@ NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [MyApp],
  bootstrap: [MyApp]
})
export class MyAppModule {

}

platformBrowserDynamic().bootstrapModule(MyAppModule)

2. Input label

<label for="name">Name</label>
<input type="text" name="username" id="name">

Như các bạn thấy phần lớn Form HTML5 sử dụng label theo kiểu này. Nhưng, Angular 2 hoàn toàn có thể biến đoạn code HTML trên trở nên đơn giản hơn bằng cách lược bỏ phần label và thuộc tính id của Input trong HTML

• Ví dụ:

<label>
  Name
  <input type="text" name="username">
</label>

II/ Tìm hiểu Form Builder

1. Form Builder Basic

• Trước tiên, để dễ hiểu phần này thì các bạn chịu khó xem qua ví dụ dưới đây nhé:

• Giả sử ta có file: app/login-form.component.ts và file app/login-form.component.html có nội dung như sau

• File app/login-form.component.ts

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

@Component({
  selector: 'login-form',
  templateUrl: 'app/login-form.component.html',
})

export class LoginForm {
  loginForm: FormGroup;
  username: FormControl;
  password: FormControl;

  constructor (builder: FormBuilder) {
    this.username = new FormControl(', []);
    this.password = new FormControl(', []);
    this.loginForm = builder.group({
      username: this.username,
      password: this.password
    });
  }

  login () {
    console.log(this.loginForm.value);
    // Attempt Logging in...
  }
}

• File app/login-form.component.html

<form [formGroup]="loginForm" (ngSubmit)="login()">
  <label for="username">username</label>
  <input type="text" name="username" id="username" [formControl]="username">

  <label for="password">password</label>
  <input type="password" name="password" id="password" [formControl]="password">

  <button type="submit">log in</button>
</form>

(Link code demo: https://plnkr.co/edit/o1Gfqg?p=preview )

Qua ví dụ trên, mình xin giải thích một số điểm chính thế này:

class FormControl trong method constructor của class LoginForm này để làm gì:

• Class này giúp chúng ta khởi tạo các giá trị ban đầu cho Form. Chính là ở param thứ nhất truyền vào. FormControl('inital_value', [])

• Tạo các rules để validate form. Chính là ở param thứ 2. Param này được truyền vào dạng mảng nên các bạn có thể đưa nhiều rule vào. new FormControl(', [', [Validators.required, Validators.maxLength(7)]])

• Một điểm cần ghi nhớ nữa là method group của class FormBuilder phải được gán cho input có cùng tên(giống tên như khai báo)

• Ví dụ: ở đây ta có thuộc tính username thì ngoài temlate chúng ta cũng cần một input có name là username. Angular2 quản lý việc này bằng việc sử dụng một method là formControlName. Ví dụ:

<div class="col-md-4">
<input formControlName="username" [(ngModel)]="user.username" class="form-control input-circle" size="16" type="text"/>
</div>

• Điểm lưu ý tiếp theo là:

Nếu không có giá trị khởi tạo(giá trị mặc định) cho class FormControl thì chỉ cần truyền vào giá trị rỗng vào param đầu tiên, ví dụ: new FormControl(', [])

Tương tự với các rule cho phần validator, new FormControl(', [])

2. Tìm hiểu Validating FormBuilder

• Qua ví dụ ở phần đầu tiên, chúng ta có thể hình dung được phần nào về khởi tạo rule, rule cơ bản trong Angular 2 rồi đúng không nào.

• Ở phần này chúng ta tiếp tục tìm hiểu về một số rule trong Angular

• Để hiểu hơn thì chúng ta tiếp tục đến với ví dụ tiếp theo nha(lol, đối với mình thì ví dụ là quan trọng nhất nên hơi nhiều ví dụ