Một FormGroup tổng hợp các giá trị của mỗi FormControl con thành một đối tượng, với mỗi tên điều khiển là khóa.
const form = new FormGroup({
first: new FormControl('Nancy', Validators.minLength(2)),
last: new FormControl('Drew')
});
Một FormArray tổng hợp các giá trị của mỗi FormControl con thành một mảng.
const arr = new FormArray([
new FormControl('Nancy', Validators.minLength(2)),
new FormControl('Drew')
]);
Khi nào nên sử dụng cái này thay cho cái kia?
Câu trả lời:
FormArray là một biến thể của FormGroup. Sự khác biệt chính là dữ liệu của nó được tuần tự hóa dưới dạng một mảng (trái ngược với việc được tuần tự hóa thành một đối tượng trong trường hợp của FormGroup). Điều này có thể đặc biệt hữu ích khi bạn không biết có bao nhiêu điều khiển sẽ hiện diện trong nhóm, chẳng hạn như biểu mẫu động.
Hãy để tôi cố gắng giải thích bằng một ví dụ nhanh. Giả sử, bạn có một biểu mẫu ghi lại đơn đặt hàng Pizza của khách hàng. Và bạn đặt một nút để cho phép họ thêm và xóa bất kỳ yêu cầu đặc biệt nào. Đây là phần html của thành phần:
<section>
<p>Any special requests?</p>
<ul formArrayName="specialRequests">
<li *ngFor="let item of orderForm.controls.specialRequests.controls; let i = index">
<input type="text" formControlName="{{i}}">
<button type="button" title="Remove Request" (click)="onRemoveSpecialRequest(i)">Remove</button>
</li>
</ul>
<button type="button" (click)="onAddSpecialRequest()">
Add a Request
</button>
</section>và đây là lớp thành phần xác định và xử lý các yêu cầu đặc biệt:
constructor () {
this.orderForm = new FormGroup({
firstName: new FormControl('Nancy', Validators.minLength(2)),
lastName: new FormControl('Drew'),
specialRequests: new FormArray([
new FormControl(null)
])
});
}
onSubmitForm () {
console.log(this.orderForm.value);
}
onAddSpecialRequest () {
this.orderForm.controls
.specialRequests.push(new FormControl(null));
}
onRemoveSpecialRequest (index) {
this.orderForm.controls['specialRequests'].removeAt(index);
}FormArray cung cấp tính linh hoạt hơn FormGroup theo nghĩa là dễ dàng thao tác với FormControls bằng cách sử dụng "push", "insert" và "removeAt" so với sử dụng "addControl", "removeControl", "setValue" của FormGroup, v.v. Các phương thức FormArray đảm bảo các điều khiển được theo dõi thích hợp trong phân cấp của biểu mẫu.
hi vọng điêu nay co ich.
Để tạo một biểu mẫu phản ứng, phải có cha mẹ FormGroup. Điều này FormGroupcó thể chứa thêm formControls, con formGroupshoặcformArray
FormArraycó thể chứa thêm mảng của formControlshoặc formGroupchính nó.
Khi nào chúng ta nên sử dụng formArray?
Vui lòng đọc bài đăng tuyệt đẹp này giải thích cách sử dụngformArray
Ví dụ thú vị trong blog đó là về các chuyến đi formGroup
Cấu trúc của các chuyến đi formGroupsử dụng formControlvà formArraysẽ trông giống như sau:
this.tripForm = this.fb.group({
name: [name, Validators.required],
cities: new FormArray(
[0] ---> new FormGroup({
name: new FormControl('', Validators.required),
places: new FormArray(
[0]--> new FormGroup({
name: new FormControl('', Validators.required),
}),
[1]--> new FormGroup({
name: new FormControl('', Validators.required),
})
)
}),
[1] ---> new FormGroup({
name: new FormControl('', Validators.required),
places: new FormArray(
[0]--> new FormGroup({
name: new FormControl('', Validators.required),
}),
[1]--> new FormGroup({
name: new FormControl('', Validators.required),
})
)
}))
})
Đừng quên chơi với DEMO này , và lưu ý việc sử dụng mảng cho citiesvà placescủa một chuyến đi.
Từ: Anton Moiseev Sách “Phát triển góc cạnh với chữ viết, ấn bản thứ hai.” :
Khi bạn cần thêm (hoặc xóa) các điều khiển vào biểu mẫu theo chương trình , hãy sử dụng FormArray . Nó tương tự như FormGroup nhưng có một biến độ dài . Trong khi FormGroup đại diện cho toàn bộ biểu mẫu hoặc một tập hợp con cố định của các trường của biểu mẫu , FormArray thường đại diện cho một tập hợp các điều khiển biểu mẫu có thể phát triển hoặc thu nhỏ .
Ví dụ: bạn có thể sử dụng FormArray để cho phép người dùng nhập một số lượng email tùy ý.
Từ tài liệu góc, bạn có thể thấy rằng
FormArray là một giải pháp thay thế cho FormGroup để quản lý bất kỳ số lượng điều khiển không tên nào. Cũng như với các trường hợp nhóm biểu mẫu, bạn có thể tự động chèn và xóa các điều khiển khỏi các trường hợp mảng biểu mẫu và giá trị cá thể mảng biểu mẫu và trạng thái xác thực được tính toán từ các điều khiển con của nó. Tuy nhiên, bạn không cần xác định khóa cho mỗi điều khiển theo tên, vì vậy đây là một lựa chọn tuyệt vời nếu bạn không biết trước số lượng giá trị con.
Hãy để tôi cho bạn xem ví dụ của họ và cố gắng giải thích cách tôi hiểu điều này. Bạn có thể xem nguồn tại đây
Hãy tưởng tượng một phù thủy hình thức có các trường sau
profileForm = this.fb.group({
firstName: ['', Validators.required],
lastName: [''],
address: this.fb.group({
street: [''],
city: [''],
state: [''],
zip: ['']
}),
aliases: this.fb.array([
this.fb.control('')
])
});
Ở đây chúng ta có firstName, lastName, addressvà aliasestất cả các lĩnh vực cùng là nhóm mẫu để chúng tôi quấn tất cả mọi thứ trong group. Đồng thời addressgiống như một nhóm con nên chúng ta bọc nó vào một cái khác group(Bạn có thể xem qua template để hiểu rõ hơn)! Mọi điều khiển biểu mẫu ở đây đều keyngoại trừ aliasesvà điều đó có nghĩa là bạn có thể đẩy vào đó các giá trị tùy thích như mảng đơn giản bằng cách sử dụng formBuildercác phương thức như push.
Đây là cách tôi hiểu nó, hy vọng nó sẽ giúp một ai đó.