Hướng dẫn dùng formarray JavaScript - sử dụng JavaScript formaray

Trong bài viết này chúng ta sẽ tìm hiểu khi nào và cách sử dụng

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

8, cả trong Component và trong Template, ngoài ra chúng ta sẽ xem cách để custom validation cho nó.

Lưu ý: Để bài viết đem lại hiệu quả nhất, thì hãy tự trang bị cho mình thêm 1 chút kiến thức cơ bản về

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

9 và

@Component({ template: '' })
export class SkillsComponent {
  skills = new FormArray([]);

  addSkill() {
    this.skills.push(new FormControl(''));
  }
}

0 nhé.

Vì sao chúng ta cần sử dụng { controls: [], valid: true, disabled: false, value: [], invalid: false, ... } 8

Có thể bạn đã biết, khi chúng ta tạo một

@Component({ template: '' })
export class SkillsComponent {
  skills = new FormArray([]);

  addSkill() {
    this.skills.push(new FormControl(''));
  }
}

2 như

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

9 hay

@Component({ template: '' })
export class SkillsComponent {
  skills = new FormArray([]);

  addSkill() {
    this.skills.push(new FormControl(''));
  }
}

0, chúng ta có thể sử dụng mảng như một giá trị. Ví dụ

@Component({ template: '' })
export class SkillsComponent {
  control = new FormControl(['some', 'value']);

  group = new FormGroup({
    skills: ['some', 'value']
  });
}

Tuy nhiên, cách khai báo này sẽ gây khó khăn để sử dụng Angular API cho từng phần tử trong mảng, cũng như đồng bộ giá trị hay sử dụng API validate. Đó là khi ta cần dùng đến

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

8

{ controls: [], valid: true, disabled: false, value: [], invalid: false, ... } 8 là gì

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

8 có trách nhiệm quản lý một tập hợp các

@Component({ template: '' })
export class SkillsComponent {
  skills = new FormArray([]);

  addSkill() {
    this.skills.push(new FormControl(''));
  }
}

2, có thể là

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

9,

@Component({ template: '' })
export class SkillsComponent {
  skills = new FormArray([]);

  addSkill() {
    this.skills.push(new FormControl(''));
  }
}

0 hoặc

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

8 khác.

Cũng giống như

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

9, nhóm các đối tượng

@Component({ template: '' })
export class SkillsComponent {
  skills = new FormArray([]);

  addSkill() {
    this.skills.push(new FormControl(''));
  }
}

2 trong một đối tượng,

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

8 cũng làm tương tự nhưng trong một mảng. Angular có các API cụ thể để giúp bạn quản lý tập hợp này mà chúng ta sẽ nói rõ hơn ở phần sau. Giờ hãy xem cách sử dụng nó.

Làm việc với { controls: [], valid: true, disabled: false, value: [], invalid: false, ... } 8

Giả sử chúng ta muốn hiển thị một form mà người dùng có thể thêm, sửa, xóa từ một danh sách kĩ năng

@Component({ template: '' })
export class SkillsComponent {
  skills = new FormArray([]);
}

Chúng ta tạo một

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

8 với giá trị khởi tạo là một mảng rỗng. Giờ hãy xem các thuộc tính của

  ...

7:

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

Giống như

@Component({ template: '' })
export class SkillsComponent {
  skills = new FormArray([]);

  addSkill() {
    this.skills.push(new FormControl(''));
  }
}

0 hay

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

9,

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

8 cũng được kế thừa từ class

@Component({ template: '' })
export class SkillsComponent {
  skills = new FormArray([]);

  addSkill() {
    this.skills.push(new FormControl(''));
  }
}

2, nên cũng có nhiều thuộc tính giống nhau, như

2,

3,

4,... Ngoài ra, nó có thêm 1 thuộc tính

5 để chứa mảng các phần tử của

@Component({ template: '' })
export class SkillsComponent {
  skills = new FormArray([]);

  addSkill() {
    this.skills.push(new FormControl(''));
  }
}

2.

GIờ hãy thêm 1 skill:

@Component({ template: '' })
export class SkillsComponent {
  skills = new FormArray([]);

  addSkill() {
    this.skills.push(new FormControl(''));
  }
}

Mỗi lần gọi đến phương thức

7, chúng ta sẽ thêm 1

@Component({ template: '' })
export class SkillsComponent {
  skills = new FormArray([]);

  addSkill() {
    this.skills.push(new FormControl(''));
  }
}

0 mới vào mảng

5. Giờ hãy sử dụng nó trong template. Đầu tiên, chúng ta cần một vòng lặp cho thuộc tính

5 của

{
  controls: [],
  valid: true,
  disabled: false,
  value: [],
  invalid: false,
  ...
}

8:

  ...

Giờ, chúng ta thêm vào mỗi control directive

@Component()
export class SkillsComponent {
  skills = new FormArray([]);

  removeSkill(index: number) {
    this.skills.removeAt(index);
  }
}

2 để đồng bộ mỗi control với phần tử tương ứng.

Nguồn: https://netbasal.com/angular-reactive-forms-the-ultimate-guide-to-formarray-3adbe6b0b61a