Vật liệu góc - Đầu vào
Các md-input-container, một chỉ thị Angular, là một thành phần vùng chứa chứa bất kỳ <input> hoặc là <textarea>phần tử khi còn nhỏ. Nó cũng hỗ trợ xử lý lỗi bằng cách sử dụng các chỉ thị ng-messages tiêu chuẩn và tạo hiệu ứng động cho các tin nhắn bằng cách sử dụng các sự kiện ngEnter / ngLeave hoặc ngShow / ngHide.
Thuộc tính
Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-input-container.
| Sr.No | Mô tả về Thông Số |
|---|---|
| 1 | md-maxlength Số ký tự tối đa được phép trong đầu vào này. Nếu điều này được chỉ định, bộ đếm ký tự sẽ được hiển thị bên dưới đầu vào. Mục đích của md-maxlength là hiển thị văn bản bộ đếm độ dài tối đa. Nếu bạn không muốn văn bản truy cập và chỉ cần xác thực "đơn giản", bạn có thể sử dụng thuộc tính ng-maxlength hoặc maxlength "đơn giản". |
| 2 | aria-label Aria-label được yêu cầu khi không có nhãn. Một thông báo cảnh báo sẽ được ghi vào bảng điều khiển nếu không có nhãn. |
| 3 | placeholder Một phương pháp thay thế để sử dụng aria-label khi nhãn không có mặt. Văn bản trình giữ chỗ được sao chép vào thuộc tính aria-label. |
| 4 | md-no-autogrow Khi hiện diện, các vùng văn bản sẽ không tự động phát triển. |
| 5 | md-detect-hidden Khi hiển thị, các vùng văn bản sẽ có kích thước phù hợp khi chúng được tiết lộ sau khi bị ẩn. Điều này được tắt theo mặc định vì lý do hiệu suất vì nó đảm bảo chỉnh lại mỗi chu kỳ thông báo. |
Thí dụ
Ví dụ sau cho thấy việc sử dụng chỉ thị md-input-container và cả việc sử dụng các đầu vào.
am_inputs.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('inputController', inputController);
function inputController ($scope) {
$scope.project = {
comments: 'Comments',
};
}
</script>
</head>
<body ng-app = "firstApplication">
<div id = "inputContainer" class = "inputDemo"
ng-controller = "inputController as ctrl" ng-cloak>
<md-content layout-padding>
<form name = "projectForm">
<md-input-container class = "md-block">
<label>User Name</label>
<input required name = "userName" ng-model = "project.userName">
<div ng-messages = "projectForm.userName.$error">
<div ng-message = "required">This is required.</div>
</div>
</md-input-container>
<md-input-container class = "md-block">
<label>Email</label>
<input required type = "email" name = "userEmail"
ng-model = "project.userEmail"
minlength = "10" maxlength = "100" ng-pattern = "/^.+@.+\..+$/" />
<div ng-messages = "projectForm.userEmail.$error" role = "alert">
<div ng-message-exp = "['required', 'minlength', 'maxlength',
'pattern']">
Your email must be between 10 and 100 characters long and should
be a valid email address.
</div>
</div>
</md-input-container>
<md-input-container class = "md-block">
<label>Comments</label>
<input md-maxlength = "300" required name = "comments"
ng-model = "project.comments">
<div ng-messages = "projectForm.comments.$error">
<div ng-message = "required">This is required.</div>
<div ng-message = "md-maxlength">The comments has to be less
than 300 characters long.</div>
</div>
</md-input-container>
</form>
</md-content>
</div>
</body>
</html>Kết quả
Xác minh kết quả.