+5

Sự thú vị của Reactive Forms trong Angular với FormArray

Khi nào thì bạn cần FormArray:

Phần này là phần quyết định bạn có đọc tiếp bài viết của mình hay không này 😃
Giả sử trường hợp bây giờ bạn muốn có một form mà các trường trong form được thêm cách linh hoạt vào. Ví dụ bạn muốn nhập vào CV của mình nhiều project, bạn có nhiều cách để thực hiện việc này và bạn không nghĩ việc này là khó khăn nhưng bạn sẽ thấy dễ dàng hơn trong việc xử lý nó khi bạn dùng Reactive Form và FormArray.

FormArray là một control của Reactive Form, nó được sử dụng như một mảng chứa các FormControl, FormGroup hoặc các FormArray instances khác. Vì vậy FormArray cho sự linh hoạt để bạn có thể thêm hoặc set các fields vào form.

Import FormArray

Đầu tiền chúng ta không quên import ReactiveFormModule vào AppModule

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

import { AppComponent } from './app.component';

@NgModule({
  // ...
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule
  ],
  // ...
})
export class AppModule { }

và sau đó là khai báo trong component ta cần dùng FormArray các phụ thuộc từ Angular forms module.

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

Khởi tạo Form

Chúng ta khởi tạo form với FormBuilder trong ngOnInit hook. Trong ví dụ này chúng ta sẽ khởi tạo 1 form cho phép chúng ta thêm vào các project.

projectForm: FormGroup;
projects: FormArray;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.projectForm = this.formBuilder.group({
    projectInput: '',
    projects: this.formBuilder.array([])
  });
}

Note
Chúng ta có thể set giá trị khởi tạo cho projects thông qua this.formBuilder.array([])
Hiện tại giá trị khởi tạo sẽ là 1 mảng rỗng
Trong thực tế khi chúng ta get data trả về từ api thì chúng ta có thể set vào đó.

Chúng ta sẽ có hàm tạo 1 form group - chúng ta có thể hiểu như 1 phần tử được tạo mới để thêm vào FormArray

createProject(project): FormGroup {
  return this.formBuilder.group({
    id: project.id,
    name: project.name,
  });
}

Chúng ta có hàm lấy ra giá trị hiện tại của FormArray

get ProjectsList() {
   return this.orderForm.get('projects') as FormArray;
}

Hàm này sẽ được dùng trong template khi chúng ta render form.

Thêm mới vào FormArray

addProject(project): void {
  this.projectsList.push(this.createProject(project));
}

Khi chúng ta bấm button Add Project thì sẽ gọi đến addProject() controls được thêm vào FormArray

Template hiển thị FormArray

Chúng ta sử dụng formArrayName directive để bind dữ liệu trong FormArray ra template

<div formArrayName="projects"
  *ngFor="let project of projectsList.controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="name" placeholder="Project name">
  </div>
</div>

Chúng ta có thể thấy là việc bind dữ liệu cũng tương tự việc lặp mảng để lấy các đối tượng dựa vào chỉ số của chúng trong mảng.

Ngoài ra FormArray còn cung cấp cho chúng ta các phương thức xử lý tương tự như mảng push(), insert(), removeAt().
Còn có các phương thức khác để chúng ta tác động trực tiếp vào các controls trong form: setControl(), setValue()
Chi tiết phần này bạn có thể xem tại: Angular-FormArray

Hy vọng điều mình chia sẻ sẽ hữu ích với bạn đọc. Hẹn gặp các bạn trong bài viết sau. 😃


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí