Tôi biết câu trả lời đã được đưa ra nhưng tôi muốn đưa ra một câu trả lời ngắn gọn về cách cập nhật giá trị của một biểu mẫu để những người mới khác có thể có được một ý tưởng rõ ràng.
cấu trúc biểu mẫu của bạn rất hoàn hảo để sử dụng nó làm ví dụ. vì vậy, trong suốt câu trả lời của tôi, tôi sẽ biểu thị nó dưới dạng.
this.form = this.fb.group({
'name': ['', Validators.required],
'dept': ['', Validators.required],
'description': ['', Validators.required]
});
vì vậy biểu mẫu của chúng tôi là một loại đối tượng Formgroup có ba FormControl .
Có hai cách để cập nhật giá trị mô hình:
Sử dụng phương thức setValue () để đặt giá trị mới cho một điều khiển riêng lẻ. Phương thức setValue () tuân thủ nghiêm ngặt cấu trúc của nhóm biểu mẫu và thay thế toàn bộ giá trị cho điều khiển.
Sử dụng phương thức patchValue () để thay thế bất kỳ thuộc tính nào được xác định trong đối tượng đã thay đổi trong mô hình biểu mẫu.
Các kiểm tra nghiêm ngặt của phương thức setValue () giúp bắt lỗi lồng nhau ở các dạng phức tạp, trong khi patchValue () không âm thầm với các lỗi đó.
Từ tài liệu chính thức của Angular tại đây
vì vậy, khi cập nhật giá trị cho một thể hiện của nhóm biểu mẫu có chứa nhiều điều khiển, nhưng bạn chỉ có thể muốn cập nhật các phần của mô hình. patchValue () là một trong những bạn đang tìm kiếm.
để xem ví dụ. Khi bạn sử dụng patchValue ()
this.form.patchValue({
dept: 1
});
//here we are just updating only dept field and it will work.
nhưng khi bạn sử dụng setValue (), bạn cần cập nhật mô hình đầy đủ vì nó tuân thủ nghiêm ngặt cấu trúc của nhóm biểu mẫu. vì vậy, nếu chúng ta viết
this.form.setValue({
dept: 1
});
// it will throw error.
Chúng ta phải vượt qua tất cả các thuộc tính của mô hình nhóm biểu mẫu. như thế này
this.form.setValue({
name: 'Mr. Bean'
dept: 1,
description: 'spome description'
});
nhưng tôi không sử dụng phong cách này thường xuyên. Tôi thích sử dụng cách tiếp cận sau đây để giúp giữ cho mã của tôi sạch hơn và dễ hiểu hơn.
Những gì tôi làm là, tôi khai báo tất cả các điều khiển như một biến riêng biệt và sử dụng setValue () để cập nhật điều khiển cụ thể đó.
Đối với mẫu trên, tôi sẽ làm một cái gì đó như thế này.
get companyIdentifier(): FormControl {
return this.form.get('name') as FormControl;
}
get dept(): FormControl {
return this.form.get('dept') as FormControl;
}
get description(): FormControl {
return this.form.get('description') as FormControl;
}
Khi bạn cần cập nhật điều khiển biểu mẫu, chỉ cần sử dụng thuộc tính đó để cập nhật nó. Trong ví dụ, người hỏi đã cố cập nhật điều khiển biểu mẫu khi người dùng chọn một mục từ danh sách thả xuống.
deptSelected(selected: { id: string; text: string }) {
console.log(selected) // Shows proper selection!
// instead of using this.form.controls['dept'].setValue(selected.id), I prefer the following.
this.dept.setValue(selected.id); // this.dept is the property that returns the 'dept' FormControl of the form.
}
Tôi đề nghị nên xem API Formgroup để biết cách tất cả các thuộc tính và phương thức của Formgroup.
Bổ sung : để biết về getter xem tại đây