Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.
Ở bài trước chúng ta đã tìm hiểu Form
rồi nhưng chúng ta chưa xử lý sự kiện submit của Form là tại vì đê
rsubmit form thì cần có Directive ng-form nên mình dành một bài riêng
viết về chủ đề này luôn. Thời lượng bài này có lẽ không dài như các bài
trước nên rất dễ để tìm hiểu nó.
1. Directive ng-form trong AngularJS
ng-form hay còn gọi là ngForm trong AngularJS có nhiệm vụ liên kết dữ
liệu khi Form có giá trị là đúng (Valid). Trong Javascript bình thường
thì để xử lý sự kiện submit ta sẽ dùng sụ kiện có sẵn của Form đó là onsubmit="function", trong AngularJS cũng vậy nhưng cú pháp nó hơi khác đó là ta sẽ dùng ng-submit="function()"
Như bạn biết khi làm việc với AngularJS thì mọi thứ được lưu trong đối tượng $scope nên function() bên trong ng-submit đó cũng phải là một hàm của $scope nhé các bạn.
Lưu ý với bạn rằng để subimit Form thì thông thường chúng ta có hai cách chính đó là click vào input[type=submit] hoặc là nhấn Enter, nhưng không phải lúc nào cũng đúng, để rõ hơn thì bạn quay lại bài Directie Form trong AngularjS nhé. Và đương nhiên là Form không có lỗi mới submit được.
2. Ví dụ sử dụng Directive ng-form trong AngularJS
Bây giờ chúng ta sẽ làm một ví dụ nho nhỏ đó là xây dựng chương trình
nhập danh sách sinh viên và lưu vào trong một mảng rồi in ra ngoài
trình duyệt. Các bạn tạo một file với nội dung như sau: XEM DEMO
Giao diện:
Các bạn nhập nội dung và nhấn Enter hoặc click vào button Thêm thì
lập tức dữ liệu được lưu vào danh sách list, lý do tại sao thì các bạn
có thể mò trong đoạn javascript controller nhé.
Lứu ý với các bạn rằng các key của $scope tương đương với các key mình định nghĩa trong View nhé ($scope.text <=> ng-model="text"), tương tự cho các key khác.
Tại sao submit form mà không reload trang
Có lẽ bạn cũng thắc mắc vấn đề này nhỉ :D mình xin nhắc lại là khi
làm việc với AngularJS thì bạn sẽ thao tác với API rất nhiều, chính vì
thế trong sự kiện submit form kia thay vì reload trang gửi lên server
thì bạn sẽ gửi một request bằng ajax chẳng hạn.
3. Lời kết
Bài học chỉ tới đây thôi nhưng rất thú vị, giải thích rõ ràng cho Directive
Form trong AngularJS rồi, hy vọng các bạn hiểu được bài và nếu có gì
không hiểu bạn cứ comment góp ý, mình sẽ lưu ý và bổ sung vào các bài
sau. Cám ơn các bạn đã theo dõi serie nay của mình. Chúc học tốt!
Bài trước chúng ta tìm hiểu về Scope trong angularJS
nhưng chưa bàn luận về các kiến thức sâu hơn như mô hình cấu trúc DOM,
chu kỳ sống của Scope. Nhưng tôi quyết định bỏ qua và sẽ trình bày nó
trong một bài gần nhất, lý do đơn giản là nếu tiếp tục tìm hiểu mà không
có viết ứng dụng kết hợp với các kiến thức khác thì bạn sẽ khó hiểu
bài, thay vì tiếp tục thì ta sẽ tìm hiểu một số vấn đề liên quan rồi sau
đó quay ngược lại, lúc này bạn sẽ vỡ òa "sao mà nó đơn giản quá vậy"
Trong bài này chúng ta sẽ tìm hiểu khái niệm Directives trong AngularJS,
bạn sẽ thấy có nhiều bất ngờ khi tìm hiểu nó đấy, lý do là chúng ta đã
sử dụng nó trong các ví dụ ở bài trước mà không hề hay biết nó là
Directives . Không lôi thôi dài dòng nữa, ta bắt đầu thôi.
1. AngularJS Directives là gì?
Directives là một thành phần mở rộng HTML, hay nói cách khác là các
thuộc tính (properties) của các thẻ HTML mà Angular nó định nghĩa thêm,
vì nó của riêng của Angular nên phải tuân thủ theo nguyên tắc của nó là
chữ bắt đầu luôn luôn là ký tự mà tôi bôi đỏ ng-prefix, trong đó tiền tố prefix là tên của derective mà chúng ta sử dụng. Như ở các ví dụ trước, để khai báo là một Directive Controller thì chúng ta khai báo ng-controller, quá đơn giản phải không nào. Ví dụ dưới đây chúng ta sử dụng ba Directives (ng-controller, ng-model, ng-bind): XEM DEMO
$scope.name = 'Chào mừng các bạn đến với website freetuts.net';
});
</script>
</head>
<bodyng-app="myapp">
<divng-controller="MyController">
<h2>Nhập nội dung thông bao:</h2>
<inputng-model="name"> <br/>
<h2>Nội dung bạn đang gõ là:</h2>
<spanng-bind="name"></span>
</div>
</body>
</html>
Giao diện:
Trong ví dụ này mục đích là khi nhập dữ liệu vào ô input thì dòng ở dưới sẽ thay đổi theo. Nếu chúng ta sử dụng javascript để thực hiện thì ta sẽ bắt sự kiện onkeypress cho input và đổi giá trị cho thẻ span. Nhưng với AngularJS thì rất đơn giản, chúng ta sẽ sử dụng Directive ng-model để khai báo model và dùng Directive ng-bind để lấy data từ model. Nhưng để hai Directives ng-model và ng-bind "biết đến nhau" thì giá trị của nó phải giống nhau nhé (ng-model="name", ng-bind="name").
Các bạn để ý rằng trong đoạn JS tôi chỉ khai báo module, controller
nhưng không xử lý gì bên trong. Vậy bạn có thắc mắc là tại sao không
code xử lý gì mà lại khai báo chi cho mệt? Lưu ý với bạn đấy là điều bắt
buộc nhé, nghĩa là ta phải khai báo để AngularJS hiểu, nếu không nó sẽ
báo lỗi đấy.
2. Danh sách AngularJS Directives
Nói đến danh sách Directives trong AngularJS thì mình không thể kể ra hết được, để xem được hết danh sách bạn lên trang chủ Angular API để đọc nhé. Trong bài này mình chỉ nêu ra một vài ví dụ đơn giản cho các bạn dễ hiểu hơn thôi.
ng-app
Khi chúng ta khai báo một Directive ng-app thì AngularJS
sẽ hiểu là bắt đầu một ứng dụng Angular, nó sẽ xác định đây là thẻ gốc
(element root) và tiếp theo sẽ khởi tạo các thông số cấu hình bên trong
mà ta gọi là bootstraps. Ngoài ra ng-app còn được sử dụng
để mô tả các module khác nhau trong ứng dụng. Về ví dụ thì chúng ta demo
rất nhiều rồi nên tôi không trình bày thêm về nó nũa.
ng-init
Trong lập trình hướng đối tượng thì chúng ta có khái niệm hàm khởi tạo (constructor), thì ng-init
cũng vậy, nó có ý nghĩa là khai báo dữ liệu khởi tạo khi ứng dụng vừa
được chạy. Các dữ liệu này sẽ được dùng cho toàn bộ phạm vi của
controller mà nó thuộc về. Ví dụ: XEM DEMO
Giao diện:
Các bạn thấy rõ ràng mình khai báo ba vị trí khác nhau với cùng key là demo ({{demo}}) nhưng chỉ có hai vị trí nhận được dữ liệu, lý do đơn giản là vị trí cuối cùng năm ngoài Controller của data-init nên không thể nhận được.
ng-...
Còn rất nhiều nữa nhưng bài này mình chỉ mang tính chất giới thiệu
nên sẽ không nói thêm về vụ này nữa, chúng ta sẽ lần lượt tìm hiểu từng
Directives cụ thể trong các bài sau nhé.
3. Tự định nghĩa Directives
Cái này thú vị nhất nè, lúc trước mình cứ nghĩ là danh sách AngularJS Directives là
cố đinh, điều này là một sai lầm nhé. Nghĩa là ngoài các Directives mặc
định có sẵn trong Angular thì chúng ta có thể tự tạo được. Ví dụ 1: Xây dựng một Directive xuất hiện lời chào với nội dung "Chào mừng các bạn đến với website freetuts.net". XEM DEMO
template: '<h1>Chào mừng các bạn đến với website freetuts.net</h1>'
};
});
</script>
</head>
<bodyng-app="myapp">
<divng-controller="MyController">
<divmy-directive></div>
</div>
</body>
</html>
Giao diện:
Trong ví dụ này mình đã xây dựng một div và khai báo nó là một Directive
. Trong đoạn code JS mình sử dụng hàm khai báo một directive là:
1
2
3
4
5
.directive('myDirective', function() {
return{
template: '
Chào mừng các bạn đến với website freetuts.net
'
};
});
Trong đó myDirective tương ứng với my-directive,
nghĩa là khi bạn tạo tên directive trong đoạn code JS thì tiền tố đầu
tiên và tiền tố sau được nối lại và tiền tố sau viết chữ in hoa. Bên
trong mình xử lý return về một object có key là template, key này chính là nội dung HTML bên trong của directive này, không tin bạn đổi giá trị return này và xem lại giao diện nhé.
Ví dụ 2: Xây dựng form login bằng cách định nghĩa Directive tên my-formregister. XEM DEMO
html += '<td><inputtype="Button"value="Login"/></td>';
html += '</tr>';
html += '</table>';
return {
template: html
};
});
</script>
</head>
<bodyng-app="myapp">
<divng-controller="MyController">
<divmy-formregister></div>
</div>
</body>
</html>
Giao diện:
:
Rất rõ ràng phải không nào, sự khác biệt so với ví dụ 1 là đoạn code trong javascript return về mã html form login.
4. Lời kết
Tương tự như phần Scope thì chúng ta sẽ ngưng tại đây nhé, không nên
đọc nhiều nội dung quá trong một bài vì bạn sẽ khó nhớ đến nó, hãy học
thật chắc, nhớ thật dai và đi theo từng bước, hãy học đi rồi học chạy
nhé.
Như ta biết FORM dùng để thao tác lấy thông tin của người
dùng, nghĩa là sẽ hiển thị một form lấy thông tin trên website, người
dùng nhập dữ liệu vào và submit form. Lúc này Server sẽ nhận các thông
tin đó và xử lý. Bởi vậy trong các ứng dụng web FORM đóng vai trò rất
quan trọng, nên trong AngularJS cũng không thể thiếu đối tượng này.
1. Tìm hiểu Directive Form trong AngularJS
Directive Form trong AngularJS có thể lồng lẫn nhau
theo nguyên tắc con làm cha chịu, nghĩa là khi tất cả các ràng buộc bên
trong OK thì FORM mới có thể submit được. Ví dụ như bạn làm một form
đăng ký thì khi tất cả các thông tin người dùng nhập vào hợp lệ thì lúc
này FORM mới có giá trị là hợp lệ, còn nếu chỉ tồn tại duy nhất một lỗi
nhỏ nao đó thì FORM lúc này không phải là FORM hợp lệ.
Chúng ta đã được tìm hiểu một số class được thêm vào để thể hiện
trạng thái của các thẻ Input thì trong Form cũng tương tự, Angular sẽ tự
động thêm những Class tùy vào trạng thái dưới đây :
ng-valid nếu Form hợp lệ.
ng-invalid nếu Form không hợp lệ.
ng-pristine nếu form chưa có thao tác nào (chưa thay đổi nội dung trong FORM).
ng-dirty nếu Form đã có thao tác (có thay đổi nội dung trong FORM).
ng-submitted nếu Form đã submit.
2. Thao tác Submit Form trong AngularJS
Để submit một Form trong Angular thì thông thường chúng ta có hai cách đó là:
Sử dụng Directive ngSubmit nằm trong thẻ Form (nghiên cưu sau)
Sử dụng Directive ngClick nằm trong thẻ input có type là submit đầu tiên (nghiên cứu sau)
Lưu ý với các bạn rằng:
Nếu Form chỉ có một thẻ Input duy nhất thì thao tác submit khi chúng ta nhấn Enter vào thẻ input đó
Nếu Form có hai thẻ Input trở lên và không có button submit thì (input[type="submit"]) thì khi chúng ta Enter thì Form sẽ không submit
Nếu Form có một hoặc nhiều Fields và có hơn 1 input submit thì khi
chúng ta Enter vào một field bất kỳ thì sự kiện Click vào Input Submit
đầu tiên được kích hoạt, lúc này Directive ngSubmit được kích hoạt nên
Form sẽ được Submit
3. Chỉnh sửa CSS các class của Form
Để làm ví dụ này thì trước tiên chúng ta sẽ định nghĩa lại CSS cho
các class mà AngularJS tự động thêm vào để dễ nhận diện hơn, nội dung
CSS như sau:
1
2
3
4
5
6
7
8
.my-form {
transition:0.5s linear all;
background: white;
}
.my-form.ng-invalid {
background: red;
color:white;
}
Như vậy trong nội dung trên mình đã định nghĩa style cho class ng-invalid là background màu đỏ.
4. Ví dụ Directive Form trong AngularJS
Bây giờ chúng ta sẽ thực hành một ví dụ và xem firebug nhé (Không có sử dụng ng-model). Các bạn tạo một file bất kỳ với nội dung như sau: XEM DEMO
Gao diện:
.
Luc mới chạy lên vì chương trình yêu cầu username không được để
trống nên nó bị báo lỗi. Bây giờ bạn thử nhập thì ngay lập tức
background này biến mất. Tại sao? Lý do rất đơn giản là tại vì mình có
định nghĩa CSS cho class ng-invalid là backgroud màu đỏ mà form này chưa đúng nên nó có add thêm class ng-invalid nên đẫn đến background bị màu đỏ.
Bật Firebug lên các bạn sẽ thấy hình như sau:
Các bạn thấy những class nằm trong Form mà tôi kẻ ô cho nó là những class sau khi chạy sẽ được tự thêm vào, background màu đỏ là do class ng-invalid gây ra đấy. Bây giờ ta nhập thông tin vào ô input và xem kết quả sẽ như thế nào nhé.
Như vậy là background là mất, ta check Firebug và xem kết quả nhé.
Có gì khác biệt không gì? Có đấy, nó xóa đi một số class và thêm một số class giống như phần số 1 (Tìm Hiểu Directive Form Trong AngularJS). Bây giờ ta thử nhấn Enter và xem Firebug có gì thay đổi không nhé.
Nhìn kỹ xem nào, có một class tên là ng-submitted được thêm vào.
5. Các các kiểm tra giá trị của form
Mình gọi là giá trị của Form vì không biết gọi nó tên là gì nữa hi
hi, nhưng chung quy lại thì trong phần này mình sẽ tìm hiểu các đối
tượng liên quan đến Form đó là:
Xem danh sách lỗi của Form và kiểm tra Form có Valid hay không
Kiểm tra một Input nào đó trong Form có valid hay không và cách lấy danh sách lỗi
Để rõ hơn ta bắt đầu làm một ví dụ nhé, trong ví dụ này chúng ta không có sử dụng $scope và controller không có khai báo gì nhé các bạn.. XEM DEMO
Chạy lên bạn sẽ thấy background màu đỏ là do lỗi chưa nhập dữ liệu, lúc này:
myForm.input.$valid = false => input trong form chưa nhập dữ liệu nên có gias trị False
myForm.input.$error = {"required":true} => input trong form chưa nhập dữ liệu nên validate required
sẽ có giá trị là true (true nghĩa là à có lỗi ), nếu trong ứng dụng bạn
có thêm các validate khác thì nó sẽ thêm key đó vào trong object này.
myForm.$valid = false => vì input myForm.input.$valid = false nên form sẽ mang giá trị false
Bây giờ bạn nhập dữ liệu vào, lúc này:
myForm.input.$valid = true => input này thỏa mọi điều kiện validate
myForm.input.$error = {} => input này không có lỗi nào
myForm.$valid = true => vì input không có lỗi nên suy ra Form cũng không có lỗi
6. Lời kết
Mình không biết viết gì thêm cho phần Form nà nữa, tạm thời các bạn
biết tới đây là OK rồi, sau này chúng ta làm ví dụ sẽ có thêm nhiều cái
để nói hơn về Directive Form này. Đây cũng là bài thứ 9 rồi nên mình hy
vọng các bạn có được cái nhìn tổng thể về AngularJS. Chúc các bạn học
tốt nhé.
. Không lôi thôi dài dòng nữa, ta bắt đầu thôi.
:
.
Bài đăng
