[MUSIC]
Chúng tôi vừa hoàn thành việc học về các mẫu theo hướng mẫu theo
góc cạnh trong bài học trước đó.
Angular cũng hỗ trợ một cách khác để thiết kế các dạng được gọi là dạng
phản ứng, các dạng phản ứng sử dụng kiểu lập trình phản ứng cho các dạng hỗ trợ.
Chúng ta sẽ nói về lập trình phản ứng một cách ngắn gọn trong
một trong những bài học sau này trong mô-đun này.
Nhưng ngay bây giờ, chúng ta sẽ đối phó với các dạng phản ứng và
xem làm thế nào chúng ta có thể thiết kế các dạng phản ứng theo góc cạnh và
những đặc điểm độc đáo của việc làm các dạng phản ứng theo góc cạnh tiếp theo là gì.
Phong cách phản ứng của lập trình chủ trương quản lý rõ ràng
dữ liệu chảy giữa mô hình dữ liệu phi UI và mô hình
hình dạng định hướng UI và đây là cách tiếp cận mà các dạng phản ứng lấy trong Angular.
Bây giờ điều đó có thể không có ý nghĩa gì với bạn tại thời điểm này nhưng khi chúng tôi hoàn thành
bài tập này và bài giảng, nó sẽ trở nên rõ ràng hơn với bạn
tại sao phương pháp phản ứng phù hợp với thiết kế hình thức đó trong một số ngữ cảnh nhất định.
Bây giờ trong cách tiếp cận phản ứng, chúng ta tạo ra một cây của các
đối tượng điều khiển dạng góc cạnh, bên trong lớp thành phần.
Bây giờ trong mẫu định hướng mà bạn đã thấy trước đó,
chúng tôi thiết kế các hình thức bằng cách sử dụng cách tiếp cận mẫu HTML, vì vậy
tất cả các điều khiển biểu mẫu chúng tôi được đưa vào mẫu đó trong mẫu HTML và
chúng tôi chủ yếu quản lý dữ liệu và chúng tôi được gắn vào
đối tượng thành phần của họ thông qua các mô hình NG trực tiếp.
Trong cách tiếp cận này, chúng tôi sẽ tạo ra cấu trúc hình thức đó trong thành phần của chúng tôi và
sau đó buộc cấu trúc hình thức vào các điều khiển vững chắc trong mẫu của chúng tôi, vì vậy
chúng tôi sẽ liên kết các hình thức cây mà chúng tôi
tạo ra trong lớp thành phần của chúng tôi để các
yếu tố hình thức bản địa trong tập tin mẫu của chúng tôi ở đó.
Vì vậy, trong cách tiếp cận này lớp thành phần có
quyền truy cập ngay lập tức đến cả mô hình dữ liệu cũng như cấu trúc điều khiển hình thức và vì vậy
chúng ta có thể lấy mô hình dữ liệu và đẩy nó vào cấu trúc điều khiển hình thức và
tương ứng lấy thông tin ra khỏi cấu trúc điều khiển hình thức và
sau đó ánh xạ nó vào mô hình dữ liệu.
Vì vậy, mô hình dữ liệu đến từ cuối trở lại có thể được ánh xạ vào
cấu trúc điều khiển hình thức được phản ánh trong quan điểm thông qua mẫu đó
và cầu nối giữa chúng được thực hiện trong lớp thành phần
bằng cách tạo ra cấu trúc hình thức bên trong lớp thành phần.
Bây giờ, điều này không có ý nghĩa
gì với bạn tại thời điểm này, nhưng khi chúng tôi thực hiện bài tập, nó sẽ trở nên rõ ràng hơn với bạn cách
ràng buộc này giữa mô hình dữ liệu và cấu trúc điều khiển công ty có thể được thực hiện
bên trong lớp thành phần trong mã kịch bản kiểu của các thành phần lớp học.
Vì vậy, đây là nơi chúng ta sẽ tận dụng các mô hình phản ứng, kiểm tra và
xác nhận để có lợi thế lớn, vì vậy
cách tiếp cận dạng phản ứng này hỗ trợ các mô hình phản ứng của lập trình, như tôi đã nói, chúng ta sẽ nói về
lập trình phản ứng phản ứng hơn một chút sau đó trong mô-đun này.
Ngoài ra, thực tế là chúng ta tạo ra các hình thức trong mã
có nghĩa là việc kiểm tra và đánh giá các hình thức trở nên dễ dàng hơn rất nhiều.
Mẫu điều khiển biểu mẫu là rất khó để kiểm tra
bởi vì phần lớn cấu trúc nằm trong mã mẫu, vì vậy
cách tiếp cận phản ứng cho bản thân nó tốt hơn nhiều để kiểm tra đơn vị và
cũng cho xác nhận hình thức như chúng ta sẽ thấy một chút sau đó trong bài tập.
Hãy suy nghĩ ngắn gọn về một số ưu điểm của việc sử dụng các hình thức phản ứng.
Một trong những ưu điểm là các giá trị ở dạng mà các phần tử
có sẵn ngay lập tức và đồng bộ với mã trừu tượng.
Trong mẫu điều khiển nó mất trên chu kỳ cho
bất kỳ thay đổi được viết mẫu để được phản ánh vào mã của bạn
ở đó, nhưng trong cách tiếp cận phản ứng, bit đồng bộ, dữ liệu và
quan điểm được duy trì chặt chẽ.
Thứ hai, các dạng phản ứng, như tôi đã đề cập,
dễ dàng hơn để thực hiện kiểm tra đơn vị và điều này trở nên rất quan trọng
khi bạn đang thiết kế một bản sao góc rất phức tạp.
Các hình thức phản ứng được hỗ trợ cho một số
lớp học có sẵn cho các hình thức góc thư viện.
Một trong số đó là lớp FormControl mà quyền kiểm soát hình thức cá nhân là
chúng tôi bao gồm trong hình thức của chúng tôi các yếu tố cá nhân và cũng cho phép chúng tôi theo
dõi giá trị của những giới hạn và thực hiện xác nhận các yếu tố đó.
FormGroup là một nhóm FormControl, vì vậy
khi bạn muốn tổ chức FormControls với nhau như một nhóm và
sau đó theo dõi thông tin về những nhóm như một toàn thể, sau đó FormGroup
cho phép bạn kết hợp một nhóm FormControls với nhau.
Ngoài ra, chúng tôi cũng có một lớp AbstractControl là một lớp
dựa trừu tượng cho các lớp FormControl, cũng có thể được sử dụng để lợi thế của chúng
tôi mặc dù chúng tôi muốn nhìn thấy chúng cụ thể trong bài tập sau này,
nhưng chúng tôi sẽ trở lại để sử dụng chúng vào một thời điểm sau.
Và chúng tôi cũng có một lớp FormArray cho phép bạn xác định
một mảng số lập chỉ mục của trường hợp AbstractControl, một
lần nữa, cả AbstractControl và FormArray, chúng tôi sẽ không rõ ràng kiểm tra
trong bài học cụ thể này, nhưng chúng tôi sẽ thấy chúng sau này trong khóa học.
Một khía cạnh thú vị khác của các hình thức phản ứng
là sự sẵn có của FormBuilder.
Lớp FormBuilder cho phép sử dụng để tạo ra các biểu mẫu trong mã TypeScript của chúng tôi và
sau đó có thể buộc chúng với các điều khiển mẫu đó ở đó.
Vì vậy, để sử dụng Form Builder Class bạn nhập Form Builder từ các
hình thức góc cạnh và sau đó sau khi bạn có thể sử dụng các Form Builder để xây dựng các hình thức,
như nếu bạn sử dụng và làm mà các lớp chuyển đổi Form và nhóm Form
class như chúng ta đã thấy trong slide trước đó mã là một phức tạp hơn một chút.
Nhưng bằng cách sử dụng lớp FormBuilder, nó làm giảm sự lặp đi lặp lại inclitic của
mã của bạn và làm cho nó nhỏ gọn hơn rất nhiều để xác định phông chữ.
Chúng tôi sẽ sử dụng lớp FormBuilder như cách tiếp cận để
xây dựng các hình thức trong bài tập mà sau đó và
ví dụ này được bắt nguồn từ bài tập mà bạn sẽ làm ngay sau bài giảng này.
Vì vậy, ở đây bạn có thể thấy rằng chúng tôi đã xây dựng một hình thức, như một nhóm các
yếu tố điều khiển hình thức và mỗi người trong số họ có tên cụ thể và cũng có giá trị được trao cho họ.
Bằng cách tạo mô hình biểu mẫu trong mã typescript của chúng tôi,
bạn không tự động điền vào mô hình biểu mẫu, bạn cần phải điền riêng
mô hình biểu mẫu đặc biệt nếu bạn lấy dữ liệu trong mô hình dữ liệu,
sau đó mô hình dữ liệu cần phải được ánh xạ vào mô hình biểu mẫu của bạn để điền vào các giá trị,
vì vậy biểu mẫu mô hình và mô hình dữ liệu được giữ riêng biệt trong các hình thức phản ứng.
Trong các mẫu điều khiển mẫu bạn thấy rằng chúng tôi đang trực tiếp cố gắng vào các
đối tượng dữ liệu từ tập tin mẫu để mã trừu tượng của chúng tôi.
Vì vậy, trong trường hợp này các hình thức và mô hình dữ liệu được giữ riêng biệt, vì vậy
bất kỳ thay đổi mà bạn thực hiện cho các
phần tử DOM trong biểu mẫu của bạn sẽ chảy vào mô hình biểu mẫu và
bạn phải phản ánh rõ ràng dữ liệu biểu mẫu trở lại
mô hình dữ liệu đó ngay cả thông qua một dịch vụ hoặc bất cứ điều gì có nghĩa là bạn chọn,
vì vậy sự tách biệt này giúp chúng ta thiết kế mã của chúng tôi tốt hơn nhiều, như chúng ta sẽ thấy sau này.
Hai phương pháp có sẵn cho chúng tôi để điền vào một mô hình biểu mẫu từ một mô hình dữ liệu.
Chúng tôi có phương pháp setValue (), cho phép chúng tôi gán mọi điều khiển biểu mẫu
cho một giá trị cụ thể từ mô hình dữ liệu hoặc chúng tôi có một PatchValue (),
cho phép bạn cập nhật chỉ một số điều khiển trong mô hình biểu mẫu của bạn.
Vì vậy, một khi bạn có được mô hình dữ liệu từ phía sau, từ mô hình dữ liệu,
bạn có thể vá các giá trị vào mô hình biểu mẫu của bạn hoặc ánh xạ các giá trị từ
mô hình dữ liệu của bạn vào mô hình biểu mẫu của bạn, rất thường xuyên, chúng tôi sẽ tạo ra mô hình dữ liệu,
mà một cách hợp lý phản chiếu cấu trúc của biểu mẫu.
Trong bài tập mà sau bạn sẽ thấy rằng tôi có một mô hình dữ liệu
mà là dựa trên một lớp học,
mà phản ánh rất chặt chẽ các mô hình hình thức mà chúng tôi sử dụng trong ví dụ của chúng tôi có.
Với sự hiểu biết nhanh chóng về các hình thức phản ứng, bây giờ chúng ta hãy tiến hành bài tập
nơi chúng ta sẽ tăng gấp đôi một hình thức phản ứng trong ứng dụng góc cạnh
của chúng ta và trên đường đi củng cố
một số thuật ngữ và một số ý tưởng mà chúng ta vừa khám phá trong bài học này.
[ NHẠC]