[MUSIC]
Bây giờ chúng ta đã có một giới thiệu nhanh chóng về xác nhận hình thức phản ứng
trong bài giảng trước đó, chúng ta hãy tiếp tục bài tập tiếp theo mà chúng ta có thể
áp dụng xác nhận hình thức cho hình thức phản ứng mà chúng ta đã tạo ra trong bài tập trước đó.
Vì vậy, đi đến tập tin typescript thành phần liên hệ của chúng tôi, chúng
ta hãy thêm vào các validators biểu mẫu cho mỗi thuộc tính trong mô hình biểu mẫu của chúng tôi.
Vì vậy, đối với tên đầu tiên tôi sẽ nói trong mảng, Validators.
Yêu cầu, Tương tự như vậy tôi sẽ
áp dụng tương tự cho, tên cuối cùng.
Sau đó, email, và cũng cho telnum, vì vậy đối với
telnum tôi sẽ nói cho ba còn lại tôi có thể để chúng mở,
bởi vì tôi đồng ý với hoặc là sai hoặc đúng và cung cấp cho họ các giá trị khác.
Bởi vì nó là một chuyển đổi nhẹ và contacttype có thể mất chỉ một trong
ba giá trị và giá trị mặc định đã được đưa ra ở đó,
và cho tin nhắn, chúng tôi có thể làm cho nó không phải là một giá trị yêu cầu.
Nếu người dùng không muốn nhập chú thích,
bạn có thể cho phép họ không nhập chú thích, nhưng nếu muốn,
bạn có thể thêm bộ xác thực. Yêu cầu ngay cả đối với tin nhắn.
Ngoài ra, khi bạn đặt lại biểu mẫu trong phương pháp onSubmit ở đây
bạn cũng có thể đặt lại biểu mẫu về giá trị ban đầu của nó như chúng tôi đã chỉ
định trong phương pháp mà chúng tôi đã tạo biểu mẫu.
Vì vậy, trong giá trị đặt lại, nó có một đối tượng như một tham số ở đây.
Đối tượng này sẽ được sử dụng bởi phương pháp đặt lại bằng cách
sử dụng phương pháp đặt giá trị mà chúng ta đã thấy trong bài giảng trước đó để đặt lại
biểu mẫu về điều kiện như khi nó được tạo ra ban đầu.
Vì vậy, ở đây chúng ta có thể cung cấp các
thông số như tên họ: '',
tên họ: '', telnum: 0,
Sau đó email: '',
đồng ý: false,
contacttype: 'None',
message: ''});.
Vì vậy, những giá trị mà chúng tôi cung cấp trong
đối tượng JavaScript này mà chúng tôi cung cấp cho chúng tôi các tham số để các
phương pháp reset sẽ có chính xác các giá trị giống như chúng tôi đã thấy cho
các thuộc tính này khi chúng tôi tạo ra hình thức phản hồi đó.
Chúng tôi cũng cần phải đặt lại biểu mẫu hoàn toàn trong mẫu.
Vì vậy, để làm điều đó, để quay trở lại nhập khẩu ở đây, và
sau đó chúng tôi cũng sẽ nhập khẩu ViewChild} từ '@angular /core';.
Điều này sẽ cho phép chúng tôi để có được quyền truy cập vào
bất kỳ yếu tố dom con trong mẫu của tôi.
Vì vậy, sau khi làm điều này, đi vào mã,
ở đây trong ContactComponent, tôi có thể nói @ViewChild,
và sau đó tôi sẽ có thể tham khảo FeedbackForm bằng cách
cho nó một biến mẫu với tên fform.
Bạn sẽ làm điều đó trong bước tiếp theo, và sau đó vì vậy cho điều này,
tôi sẽ tham khảo điều này bằng cách sử dụng FeedbackFormDirective.
Vì vậy, điều này cho phép chúng tôi có thể truy cập vào mẫu mẫu mẫu và sau đó hoàn toàn đặt lại
nó, do đó biểu mẫu chính nó được đặt lại về giá trị nguyên sơ của nó.
Vì vậy, đây là một bước bổ sung mà chúng ta cần phải làm để đảm bảo rằng các hình thức được
đặt lại hoàn toàn về giá trị ban đầu của nó ở đây.
Bây giờ đã thực hiện điều đó trong phương pháp onSubject, sau khi chúng tôi thiết lập lại
đối tượng FeedbackForm chính nó ở đây, chúng tôi cũng cần phải thêm vào
này.FeedbackFormDirective.ResetForm ();
Trong đó.
Vì vậy, điều này sẽ đảm bảo rằng FeedbackForm của tôi được đặt lại hoàn toàn về
giá trị nguyên sơ của nó tại thời điểm này.
Vì vậy, sau khi những thay đổi này chúng ta hãy đi đến
tập tin mẫu của chúng tôi để hiển thị làm thế nào chúng ta có thể phản ánh những
lỗi này vào mẫu của chúng tôi cho hình thức của chúng tôi ở đó.
Vì vậy, chuyển sang tập tin mẫu.
Vì vậy, đầu tiên, chúng tôi sẽ đi đến nút ở đây, và
sau đó chúng tôi sẽ làm cho nút Vô hiệu hóa.
Nếu “FeedbackForm không hợp lệ”.
Vì vậy, nút sẽ được kích hoạt chỉ khi FeedbackForm là hợp lệ.
Di chuyển đến biểu mẫu đó cho phép tôi thêm
vào <mat-error *NGIF="FeedbackForm.get” get
('firstname') .hasError ('required')
&&
FeedbackForm.get ('firstname')
.touched”, và thông báo là Tên đầu tiên là bắt buộc.
Vì vậy, đó sẽ là thông điệp bạn chỉ định bằng cách sử dụng một dòng duy nhất với ẩn,
với thông tin này ở đó.
Hãy để tôi áp dụng điều tương tự cho họ,
số điện thoại, và email.
Vì vậy, tôi chỉ đi để sao chép, và dán, và chỉnh sửa chúng,
vì vậy bạn có thể tiến hành trước với những, và ('họ').
Họ.
Telnum.
Vì vậy, tôi áp dụng điều đó cho ('telnum').
Một lần nữa, cùng một ý tưởng đằng sau đó và sau đó cũng để email.
( 'email').
Hãy thêm vào biến mẫu được gọi là fform vào biểu mẫu.
Vì vậy, tôi gõ #fform ="NGForm”.
Đi đến biểu mẫu của chúng tôi trong trình duyệt, hãy để tôi gõ vào tên đầu tiên,
và bạn thấy rằng ngay cả khi tôi xóa giá trị sẽ vẫn còn màu xanh lá cây,
bởi vì chúng tôi đã sử dụng chạm vào đó.
Nhưng thời điểm tôi di chuyển ra khỏi nó sau đó bạn
sẽ có thể thấy rằng nó trở thành một màu đỏ.
Vì vậy, tương tự cho họ họ, bạn sẽ thấy rằng khi tôi
loại bỏ giá trị họ, sau đó đó được hiển thị ở đó tương tự.
Hãy để tôi gõ vào tên và họ, và cho email cũng.
các, Trường hợp tương tự cho số điện thoại cũng.
Vì vậy, như thế này, bạn có thể làm xác nhận hình thức trong ứng dụng của chúng tôi.
Với điều này, chúng tôi hoàn thành bài tập này mà chúng tôi đã
thêm vào trong xác nhận hình thức cho hình thức phản ứng của chúng tôi.
Đây là thời điểm tốt để bạn thực hiện một cam kết git với thông điệp,
phản ứng tạo thành phần hai.
[ NHẠC]