Chúng tôi vừa tìm hiểu về sự hỗ trợ Angular cho các hình thức
, và đặc biệt là hình thức hướng theo mẫu.
Trong bài tập này, chúng tôi sẽ tạo ra một biểu mẫu theo hướng mẫu và sau đó đưa vào
hộp thoại thành phần đăng nhập của chúng tôi mà chúng tôi đã tạo ra trong bài tập trước đó.
Trong bài giảng này, mẫu định hướng mà chúng tôi tạo ra,
cho phép người dùng nhập tên người dùng và mật khẩu của họ vào biểu mẫu đăng nhập,
và sau đó gửi thông tin này cho ứng dụng của chúng tôi.
Bây giờ, làm thế nào thông tin này được xử lý bởi phía máy chủ,
đó là để lại cho một khóa học sau.
Nhưng cho thời điểm này, chúng tôi có một cách để nắm bắt tên người dùng và mật khẩu
được gửi bởi người dùng thông qua biểu mẫu hướng dẫn đăng nhập,
mà chúng tôi sẽ thiết kế trong bài tập này.
Tiếp tục với bài tập,
bước đầu tiên để có thể tận dụng
việc sử dụng các biểu mẫu định hướng mẫu là đi đến tập
tin module.t ứng dụng và sau đó nhập một vài mô-đun hỗ trợ cho ứng dụng của chúng tôi.
Vì vậy, điều đầu tiên mà tôi sẽ nhập là
MatformFieldModule từ
trường hình thức vật liệu Angular.
Vì vậy, điều này cho phép chúng ta nhóm lại với nhau một loạt các mục vào một trường biểu mẫu ở đó.
Sau đó, chúng tôi cũng sẽ nhập khẩu MatinPutModule.
Mô-đun đầu vào hỗ trợ thành phần đầu vào
là thành phần vật liệu góc cách điệu
hỗ trợ trường biểu mẫu đầu vào từ các biểu mẫu HTML tại đây.
Sau đó, cũng cho phép tôi nhập một MatCheckBox,
mô-đun tương ứng từ hộp kiểm Vật liệu góc.
Vì vậy, ba hỗ trợ
ba yếu tố hình thức mà chúng tôi sẽ sử dụng khi chúng tôi tạo ra ứng dụng của chúng tôi.
Mô-đun trường hình thức cho phép chúng ta nhóm lại với nhau một loạt các yếu tố hình thức ở đó.
Mô-đun đầu vào cho phép chúng ta tạo ra một trường đầu vào trong đó.
Mô-đun hộp kiểm, như bạn mong đợi,
cho phép chúng tôi tạo một hộp kiểm.
Ngoài ra, tôi cũng cần nhập
FormSmodule từ các hình thức Angular.
FormSmodule là một trong đó hỗ trợ các biểu mẫu trong Angular.
Đây là một trong đó hỗ trợ các hình thức định hướng mẫu.
Vì vậy, bây giờ mà chúng tôi đã nhập khẩu những, rõ ràng,
bước tiếp theo là đi vào trang trí NGModule và sau đó kéo chúng vào vị trí ở đây.
Vì vậy, chúng tôi sẽ đi vào đây và sau đó nhập FormSmodule.
Hãy để tôi nhập FormFieldModule,
InputModule, CheckBoxModule ở đây.
Sau đó, bây giờ mô-đun ứng dụng của tôi đã sẵn sàng
để hỗ trợ việc sử dụng các mẫu định hướng trong ứng dụng của chúng tôi.
Bây giờ chúng tôi đã hoàn thành điều này, chúng
ta hãy đi đến thành phần đăng nhập.
Phần lớn công việc của chúng tôi là trong thành phần đăng nhập.
Trước tiên, hãy để tôi thiết kế mẫu.
Vì vậy, đi vào tập tin mẫu thành phần đăng nhập,
hãy để tôi thêm vào mẫu cho biểu mẫu của chúng tôi để tạo ra biểu mẫu ở đây.
Vì vậy, ở trên cùng,
tôi sẽ tạo ra một p
mà sẽ hiển thị các thông tin mà tôi đã gõ vào biểu mẫu.
Trong mã, chúng ta sẽ có một biến JavaScript được gọi là user,
mà sẽ được gắn vào các trường trong biểu mẫu này.
Bây giờ, khi chúng ta tạo ra điều đó,
thì sẽ trở nên rõ ràng hơn.
Bây giờ, ở đây, bằng cách bao gồm điều này,
những gì tôi cho phép là thể hiện những thay đổi.
Khi chúng ta nhập thông tin vào biểu mẫu,
các thay đổi tương ứng xảy ra trong mã để
phản ánh trạng thái biểu mẫu có thể được hiển thị ngay tại đó.
Bây giờ, ngoài ra, bây giờ tôi sẽ tạo ra các hình thức ở đây.
Vì vậy, chúng tôi sẽ đi vào và sau đó thêm các yếu tố hình thức ở đây.
Để yếu tố hình thức này,
tôi sẽ áp dụng
các thuộc tính novalidate ở đây bởi vì
chúng tôi muốn xác nhận hình thức được thực hiện chăm sóc của Angular và không phải
bởi xác nhận HTML mẫu chuẩn
mà trình duyệt hỗ trợ.
Vì vậy, chúng tôi sẽ chuyển trách nhiệm đó vào ứng dụng Angular của chúng tôi.
Vì vậy, đó là lý do tại sao tôi chỉ định thuộc tính novalidate cho điện thoại của tôi.
Vì vậy, điều đó tạo ra hình dạng của tôi ở đây.
Bên trong đây, tôi sẽ sử dụng nội dung mat-dialog-content.
Bây giờ, nội dung mat-dialog-content, như bạn mong đợi,
là một khu vực chứa nội dung của hộp thoại chính nó.
Vì vậy, đó là lý do tại sao chúng tôi đặt nội dung mat-dialog-content vào đây.
Sau đó, ở đây, tôi sẽ tạo ra biểu mẫu của tôi ở đây.
Vì vậy, tôi đặt một p ở đó.
Bên trong p đó, tôi sẽ sử dụng một mat-form-field ở đây.
Vì vậy, các mat-form-field cho phép tôi nhóm lại với nhau một tập hợp
các yếu tố liên quan đến hình thức mà tôi sử dụng cùng nhau.
Vì vậy, ở đây, tôi sẽ đưa vào đầu vào đây.
Vì vậy, trường biểu mẫu đầu vào từ các hình thức tệp HTML.
Sau đó, với điều này, tôi sẽ áp dụng thuộc tính MatinPut
mà sẽ cho phép chúng tôi áp dụng kiểu dáng thiết kế vật liệu cho đầu vào này.
Sau đó, chúng tôi sẽ cung cấp cho một giữ chỗ cho điều này như tên người dùng,
và như bạn mong đợi,
và loại sẽ là loại văn bản ở đây.
Hãy để tôi thêm vào NGModel.
Vì vậy, một mẫu định hướng được hỗ trợ thông qua các thuộc tính ngModel ở đây.
Vì vậy, với NGModel.
Vì vậy, bạn có thể thấy cách thức hộp thư chuối để khai báo điều này.
Sau đó, chúng ta sẽ nói user.username.
Vì vậy, người dùng này sẽ là một đối tượng JavaScript trong tập tin TypeScript của tôi, trong
đó sẽ chứa một tài sản tên người dùng ở đó,
mà sẽ theo dõi giá trị mà bạn nhập vào trường đầu vào này trong hình thức của tôi ở đó.
Vì vậy, đó là lý do tại sao chúng tôi đang buộc thông tin lĩnh vực đầu vào này vào đối tượng JavaScript.
Vì vậy, đây là ràng buộc dữ liệu hai chiều mà chúng tôi đang làm
giữa các yếu tố hình thức và mã JavaScript tương ứng.
Sau đó, chúng tôi sẽ cung cấp tên này như tên người dùng ở đây.
Vì vậy, đó là trường biểu mẫu đầu tiên của tôi mà tôi đã thêm vào đây.
Bây giờ, tương tự, tôi sẽ thêm vào trường biểu mẫu thứ hai cho mật khẩu.
Vì vậy, cho rằng, để tôi sao chép nó và sau đó dán nó xuống đây.
Vì vậy, trường thứ hai sẽ là Đầu vào, MatinPut,
giữ chỗ là mật khẩu,
và sau đó loại là mật khẩu.
Vì vậy, các yếu tố nhập mật khẩu từ HTML5 hình thức hỗ trợ.
Bản thân NgModel sẽ được gắn vào mật khẩu người dùng và tên sẽ là mật khẩu.
Vì vậy, bạn thấy rằng đối tượng JavaScript người dùng bây giờ chứa hai thuộc tính,
tên người dùng và mật khẩu, mà sẽ theo dõi thông tin đăng nhập của người dùng ở đây.
Vì vậy, hai lĩnh vực hình thức bên trong p này ở đây,
và sau đó chúng ta cũng sẽ thêm vào một cái
gọi là mat-hộp kiểm.
Bạn đã thấy rằng chúng tôi đã bao gồm các mô-đun hộp kiểm trước đó.
Vì vậy, chúng ta sẽ thêm vào trong này.
Bây giờ, hộp kiểm này khi đánh dấu sẽ thông báo cho
ứng dụng Angular của tôi rằng tên người dùng và mật khẩu nên được lưu trong ứng dụng.
Vì vậy, hãy để tôi buộc điều này trong với mô hình NG để
một thuộc tính tương ứng được gọi là remember trong đối tượng người dùng.
Vì vậy, điều này sẽ là, thuộc
tính này sẽ là đúng hoặc sai tùy thuộc
vào việc hộp kiểm được đánh dấu hoặc bỏ chọn.
Vì vậy, đó là cách chúng tôi theo dõi.
Vì vậy, chúng tôi đang làm hai chiều dữ liệu ràng buộc giữa hộp kiểm này và
thuộc tính này được gọi là nhớ của đối tượng JavaScript người dùng trong mã của tôi ở đó.
Sau đó, tên sẽ được nhớ,
và sau đó chúng tôi sẽ cho nó một nhãn như nhớ tôi.
Vì vậy, khi người dùng kiểm tra điều này,
thì thông tin của người dùng sẽ được ghi nhớ ở đây.
Vì vậy, đó là hộp kiểm mat-mà chúng tôi đã thêm vào.
Vì vậy, chúng tôi có ba lĩnh vực ở đây,
tên người dùng, mật khẩu,
và sau đó một hộp kiểm ở đây trong biểu mẫu của tôi ở đây.
Vì vậy, đây là một nội dung đối thoại mat-dialog ở đây.
Bây giờ, ngoài nội dung mat-dialog,
tôi cũng có thể thêm các hành động mat-dialog ở đây.
Bây giờ, các hành động hộp thoại có thể chứa các nút tương ứng với hộp thoại này.
Vì vậy, đây là những gì sẽ hoạt động như các nút hành động trong cuộc đối thoại,
và cũng kể từ khi chúng được kèm theo bên trong biểu mẫu,
các nút này cũng sẽ hoạt động như các nút gửi biểu mẫu cho tôi.
Vì vậy, ở đây, hãy để tôi làm một khoảng cách flex lớp đệm,
và sau đó cho phép tôi thêm vào một nút,
mat-nút, và sau đó nút này,
Tôi cũng sẽ biến điều đó thành một nút đóng mat-hộp thoại.
Vì vậy, đây sẽ là một nút hủy bỏ mà tôi sẽ bao gồm trong hình thức của tôi ở đây,
sau đó điều này được nhấp vào cuộc đối thoại sẽ được bác bỏ,
và về cơ bản đó có nghĩa là bạn không gửi mẫu ở đó.
Vì vậy, điều đó cũng hoạt động như nút hủy bỏ cho biểu mẫu,
và sau đó cũng bỏ cuộc đối thoại cùng một lúc.
Vì vậy, bằng cách sử dụng thuộc tính này để nút này,
chúng tôi đang tuyên bố điều này như là nút mà bác bỏ lỗi,
giống như cách mà chúng tôi có nút này trong thanh công cụ.
Vì vậy, mat-dialog đóng ở đó.
Sau đó, nút khác mà chúng tôi sẽ có là
để gửi để
loại nút này sẽ là nút gửi bên trong một hình thức có.
Vì vậy, khi điều này được nhấp vào,
mà kích hoạt trình mẫu cho biểu mẫu này ở đây,
và sau đó cho phép tôi thêm vào một lớp này,
chúng ta sẽ nói nền chính, và văn bản hoa.
Những lớp học tôi đã thêm vào tập tin Styles.acss của tôi ở đó.
Vì vậy, văn bản hoa trắng,
và nút này sẽ được dán nhãn là nút đăng nhập ở đó.
Vì vậy, đây sẽ là một nút màu xanh sẽ được hiển thị trong màn hình ở đó.
Vì vậy, với điều này, cấu trúc hình thức của tôi được tạo ra trong mẫu ở đó.
Bây giờ, bước tiếp theo là đi vào mã và sau đó xử lý các biểu mẫu nộp chính nó.
Vì vậy, bây giờ sẽ đăng nhập các thành phần tập tin,
chúng ta cần phải xử lý việc nộp biểu mẫu ở đây.
Bây giờ, bước đầu tiên mà tôi sẽ làm là khi thành phần đăng nhập này được tạo ra,
chúng tôi sẽ tạo ra một đối tượng người dùng ở đây với tên người dùng thuộc tính,
đó sẽ là một chuỗi trống để bắt đầu với,
mật khẩu cũng sẽ là một chuỗi trống để bắt đầu với,
và sau đó nhớ đó là sai.
Bây giờ, bằng cách tuyên bố này ở đây,
chúng tôi cũng đang nói rằng chúng ta có thể buộc trong
ba thuộc tính này để ba yếu tố hình thức trong mẫu của tôi.
Vì vậy, đó là những gì chúng tôi đã đạt được ở đây.
Đối với các constructor, hãy để
tôi tiêm ref đối thoại ở đây,
mat-dialogue ref, và ref đối thoại mat này sẽ lấy các thành phần tương ứng.
Vì vậy, đây là một tham chiếu đến thành phần đăng nhập này ở đây.
Vì vậy, mà cho chúng ta biết khi này- khi này được gửi,
làm thế nào để xử lý này.
Vì vậy, trong đây, hãy để tôi thêm vào một chức năng on submit ở đây,
và bên trong chức năng on submit,
tôi sẽ chỉ đơn giản là đăng nhập,
đăng nhập thông tin người dùng tương ứng,
vì vậy sau đó người dùng nhấp vào biểu mẫu đăng nhập,
biểu mẫu đăng nhập và nộp biểu mẫu đăng nhập.
Tôi chỉ cần đăng nhập thông tin của người dùng vào giao diện điều khiển vào lúc này.
Sau đó, chúng tôi sẽ thiết kế trong khóa học phía máy chủ.
Chúng tôi sẽ xử lý quá trình đăng nhập thực tế khi
máy chủ của chúng tôi đã sẵn sàng và có thể xử lý đăng nhập của người dùng.
Vì vậy, sau này, chúng ta sẽ nói cuộc đối thoại này ref đóng.
Bây giờ, tại sao chúng ta lại bao gồm điều này ở đây?
Vì vậy, khi biểu mẫu được gửi,
chúng tôi cũng muốn loại bỏ các thành phần ở đó,
các thành phần đối thoại ở đó.
Vì vậy, bằng cách gọi
này, đối thoại ref đóng,
chúng tôi đang yêu cầu các thành phần đối thoại để được đóng ở đây.
Vì vậy, đó là lý do tại sao tôi nhận được một tham chiếu đến thành phần đăng nhập ở đây,
đó là hoạt động như thành phần đối thoại của tôi ở đây.
Vì vậy, chúng tôi sẽ có thể đóng thành phần hộp thoại bằng cách làm điều này.
Vì vậy, một khi người dùng gửi biểu mẫu,
bạn sẽ đăng nhập thông tin người dùng,
và sau đó đóng hộp thoại. Đó là nó.
Hãy lưu các thay đổi và sau đó đi và xem ứng dụng được cập nhật.
Đi vào ứng dụng của chúng tôi trong trình duyệt,
cho phép tôi mở bảng điều khiển JavaScript để bạn có thể xem thông tin được đăng nhập.
Hãy để tôi mở hộp thoại đăng nhập ở đây với biểu mẫu đã có sẵn,
tên người dùng và mật khẩu đã có sẵn.
Vì vậy, hãy để tôi gõ vào tên của người dùng.
Tôi đang tự ái ở đây.
Vì vậy, tôi đang gõ vào tên người dùng và mật khẩu ở đây.
Bây giờ, lưu ý rằng khi tôi gõ vào thông tin ở đây,
vì tôi đang hiển thị giá trị của đối tượng JavaScript người dùng ở đây,
bất kỳ thay đổi nào mà tôi thực hiện ngay lập tức được phản ánh vào màn hình ở đây.
Ngoài ra hộp kiểm nhớ được đánh dấu và tắt ở đây.
Sau đó, khi tôi gửi biểu mẫu ở đây,
bạn có thể thấy rằng trong giao diện điều khiển,
thông tin của người dùng được đăng nhập vào giao diện điều khiển
, tên người dùng, mật khẩu
và giá trị nhớ bị khóa vào giao diện điều khiển.
Vì vậy, bây giờ bạn có thể thấy rằng biểu mẫu đăng nhập của tôi,
mẫu định hướng đang hoạt động chính xác.
Với điều này, chúng tôi hoàn thành bài tập này,
nơi chúng tôi đã thấy làm thế nào chúng tôi có thể thiết kế một mẫu hướng trong ứng dụng Angular của chúng tôi.
Đây là thời điểm tốt để bạn thực hiện một Git Commit với thông báo,
Template Driven Forms Phần 1.