Угловой материал - входы
В md-input-container, директива Angular, представляет собой компонент контейнера, который содержит любые <input> или <textarea>элемент как ребенок. Он также поддерживает обработку ошибок с помощью стандартных директив ng-messages и анимирует сообщения с помощью событий ngEnter / ngLeave или событий ngShow / ngHide.
Атрибуты
В следующей таблице перечислены параметры и описание различных атрибутов md-input-container.
| Старший Нет | Параметр и описание |
|---|---|
| 1 | md-maxlength Максимальное количество символов, разрешенное для этого ввода. Если это указано, счетчик символов будет показан под вводом. Цель md-maxlength - показать текст счетчика максимальной длины. Если вам не нужен текст счетчика и нужна только «обычная» проверка, вы можете использовать атрибуты «simple» ng-maxlength или maxlength. |
| 2 | aria-label Если этикетка отсутствует, требуется Aria-label. Если метка отсутствует, в консоли будет зарегистрировано предупреждающее сообщение. |
| 3 | placeholder Альтернативный подход к использованию aria-label при отсутствии метки. Текст заполнителя копируется в атрибут aria-label. |
| 4 | md-no-autogrow Если текстовые поля присутствуют, они не будут увеличиваться автоматически. |
| 5 | md-detect-hidden Текстовые области, если они присутствуют, будут иметь правильный размер, когда они будут открыты после скрытия. По умолчанию этот параметр отключен по соображениям производительности, так как гарантирует перекомпоновку каждого цикла дайджеста. |
пример
В следующем примере показано использование директивы md-input-container, а также использование входных данных.
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>Результат
Проверьте результат.