Forms

1. Template - Driven Form

Chúng ta sẽ thảo luận và học hỏi để xây dựng các template-driven form:

Tạo Model Hero Class

Khi người dùng cập nhật dữ liệu, chúng ta bắt được những thay đổi của họ và cập nhật model.

Một model có thể được đơn giản như một "property bag" chứa sự thật về một điều quan trong trọng ứng dụng. Đó cũng là mô tả class Hero với 3 trường (id, name, power) và một trường tùy chọn (alterEgo).

Tạo một file mới trong thư mục ứng dụng có tên hero.ts và cung cấp cho nó định nghĩa lớp sau đây:

Đây là một anemic model với một số yêu cầu và không có hành vi.

Trình biên dịch TypeScript tạo ra một public field cho mỗi tham số public contrustor và gán giá trị field tự động khi chúng ta tạo một hero mới.

alterEgo là tùy chọn nên ta có thể bỏ qua nó, lưu ý dấu ? trong alterEgo?

Chúng ta có thể tạo một hero mới như sau:

Tạo Form Component

Một Angular Form có 2 phần: một mẫu dựa trên HTML và một phần dựa trên mã để xử lý dữ liệu và tương tác người dùng.

Tạo một file hero-form.component.ts và cung cấp cho nó những định nghĩa:

app.ts thành phần gốc của ứng dụng. Nó sẽ tổ chức HeroFormComponent mới của chúng ta.

Với nội dung sau:

Tạo 1 template với tên hero-form.component.html và cho nó nội dung như sau:

cài đặt bootstrap:

mở terminal window và chọn command gõ :

mở file index.html và thêm dòng lệnh sau vào thẻ head:

Add Power with *ng-for

Hero của chúng ta có thể chọn một super power từ một danh sách cố định của Agency-approved. Chúng ta duy trì danh sách đó nội bộ (trong HeroFormComponent).

Chúng ta sẽ thêm một lựa chọn để hình thành và kết nối các tùy chọn vào danh sách powers sử dụng NgFor.

Chúng ta đang lặp lại thẻ option cho mỗi power trong danh sách của Powers.

p là một power khác nhau trong mỗi lần lặp, chúng ta hiển thị tên của nó bằng cách sử dụng cú pháp nội suy với double-curly-braces

Two-way data binding with *ng-model

Chạy ứng dụng:

Chúng ta không thấy hero data vì chúng ta chưa liên kết với Hero. Bây giờ chúng ta cần phải hiển thị, lắng nghe và giải nén cùng lúc.

Tìm các thẻ input với "name" và cập nhật nó như sau:

Tập trung vào cú pháp ràng buộc: [(ng-model)] = "...".

Nếu chúng ta chạy ứng dụng ngay bây giờ và bắt đầu gõ vào hộp Name đầu vào, thêm và xoá các ký tự. Tại một số điểm nó có thể trông như thế này.

Thêm [(ng-model)] tương tự với Alter Ego và Hero Power.

Sau khi sửa đổi cốt lõi của mẫu của chúng tôi cần phải có ba [(ng-model)] bindings rằng trông giống như thế này:

Nếu chúng ta chạy ứng dụng ngay bây giờ và thay đổi model Hero, các mẫu có thể hiển thị như thế này:

Track change-state and validity with ng-control

Một form không chỉ là về dữ liệu ràng buộc. Chúng ta cũng muốn biết tình trạng của các điều khiển trên form. Chỉ thị NgControl theo dõi tình trạng kiểm soát đối với chúng ta.

Các NgControl là một trong một gia đình NgForm chỉ thị mà chỉ có thể được áp dụng cho một điều khiển trong một thẻ form.

Ứng dụng của chúng ta có thể yêu cầu một NgControl nếu người dùng chạm vào kiểm soát, nếu giá trị thay đổi, hoặc nếu giá trị đã trở thành không hợp lệ.

NgControl không chỉ theo dõi các track state; nó cập nhật sự kiểm soát với các lớp Angular CSS đặc biệt. Chúng ta có thể tận dụng những tên lớp để thay đổi sự xuất hiện của điều khiển và làm cho các thông điệp xuất hiện hoặc biến mất.

Chúng ta sẽ khám phá những hiệu ứng sớm. Ngay bây giờ chúng ta nên thêm ng-controlto cả ba form controls, starting với Name input box.

Add Custom CSS for Visual Feedback

NgControl không chỉ theo dõi các trạng thái. Nó cập nhật sự kiểm soát với ba lớp relfect, state.

Hãy thêm một biến mẫu địa phương tạm thời có tên gián điệp để "Name" tag input và sử dụng gián điệp để hiển thị các lớp.

Bây giờ chạy các ứng dụng và tập trung vào hộp Name đầu vào. Thực hiện theo bốn bước tiếp theo chính xác:

1. Nhìn nhưng không chạm vào
2. Nhấn vào hộp nhập liệu, sau đó nhấp vào bên ngoài hộp nhập văn bản.
3. Thêm dấu gạch chéo để kết thúc của tên.
4. Xóa tên.

Chúng ta sẽ có thể nhìn thấy bốn bộ sau đây của tên lớp và quá trình chuyển đổi của họ:

(ng-valid | ng-invalid) là cặp thú vị nhất. Chúng ta muốn gửi một tín hiệu thị giác mạnh mẽ khi các dữ liệu không hợp lệ và chúng ta muốn đánh dấu các trường bắt buộc.

Chúng ta có thể làm cả hai cùng một thời gian với một thanh màu trên bên trái của hộp đầu vào:

Chúng ta đạt được hiệu ứng này bằng cách thêm vào hai style cho một tập tin styles.css mới mà chúng ta thêm vào dự án của chúng ta như một đứa em index.html.

Chúng ta cập nhật head của index.html để bao gồm các style sheet:

Show and Hide Validation Error messages

"Name" input box là bắt buộc. Nó được biểu diễn bằng thanh màu đỏ. Điều đó nói điều gì đó là sai, nhưng chúng ta không biết những gì là sai trái hoặc phải làm gì về nó. Chúng ta có thể tận dụng các lớp ng-invaild để lộ một thông điệp hữu ích.

Dưới đây là cách nhìn nó nên khi người dùng xóa tên:

Để đạt được hiệu quả này, chúng ta mở rộng các thẻ input với:

1. local template variables

2. các "is required" tin nhắn trong một lân cận div mà chúng ta sẽ chỉ hiển thị nếu người điều khiển là không hợp lệ.

Đây là cách chúng tôi làm điều đó cho các name input box vào:

Chúng ta khởi tạo các biến cục bộ template với từ "form" (# name = "form")

Angular nhận cú pháp đó và lập các biến tên cho đối tượng điều khiển xác định bởi các chỉ thị ng-control trong đó, không phải tình cờ, chúng ta gọi là "name".

Submit the form with ng-submit

Chúng ta sẽ cập nhật các thẻ form với một Angular directive, NgSubmit, và ràng buộc nó vào phương thức HeroFormComponent.submit () của chúng ta với một EventBinding.

Chúng ta xác định một local template variables, #hf và khởi tạo nó với các giá trị "form".

Các biến hf bây giờ là một xử lý để NgForm như chúng ta đã thảo luận trước đó đối với ng-control mặc dù thời gian này, chúng ta có một tham chiếu đến form chứ không phải là một control.

Chúng ta sẽ liên kết qua tất cả giá trị của form qua biến hf đến button bị vô hiệu hóa của nút bằng cách sử dụng một sự kiện ràng buộc. Đây là các mã:

Nếu chúng ta chạy các ứng dụng hiện nay, chúng ta thấy rằng các nút được kích hoạt. Nó không làm bất cứ điều gì hữu ích chưa nhưng nó vẫn còn sống.

Bây giờ nếu chúng ta xóa tên, chúng ta vi phạm "is required" quy tắc đó là hợp lệ ghi trong thông báo lỗi của chúng ta. Các nút Submit cũng bị vô hiệu hóa.

Toggle two form regions (extra credit)

Hãy làm một cái gì đó nhiều hơn nổi bật hình ảnh. Chúng ta hãy ẩn các khu vực nhập dữ liệu và hiển thị một cái gì đó khác.

Bắt đầu với thẻ div và ràng buộc của nó trong HeroFormComponent.Submitted:

Các form chính nhìn thấy từ đầu vì submit là sai cho đến khi chúng ta gửi biểu mẫu, như đoạn này tử HeroFormComponent nhắc nhở chúng ta:

Khi nhấn nút vào submit thì các form biến mất.

Bây giờ chúng ta cần phải thấy cái gì khác trong khi form là ở submit state.

Chúng ta đã thêm một nút Edit có sự kiện click là ràng buộc để một biểu thức mà submitted flag.

Khi chúng ta click vào nó, khối này sẽ biến mất và các dạng có thể chỉnh sửa lại xuất hiện.