Учебники

Угловой материал — входы

Декабрь 8, 2018

Директива Angular md-input-container — это контейнерный компонент, который содержит любой элемент <input> или <textarea> в качестве дочернего элемента. Он также поддерживает обработку ошибок с использованием стандартных директив ng-messages и анимирует сообщения, используя события ngEnter / ngLeave или события ngShow / ngHide.

Атрибуты

В следующей таблице перечислены параметры и описание различных атрибутов md-input-container .

Sr.No Параметр и описание
1

мкр-MaxLength

Максимально допустимое количество символов в этом входе. Если это указано, счетчик символов будет отображаться под вводом. Назначение md-maxlength — показать текст счетчика максимальной длины. Если вам не нужен текст счетчика и требуется только «простая» проверка, вы можете использовать «простые» атрибуты ng-maxlength или maxlength.

2

ария-этикетка

Aria-label требуется, когда нет этикетки. Предупреждающее сообщение будет зарегистрировано в консоли, если метка отсутствует.

3

заполнитель

Альтернативный подход к использованию aria-label, когда метка отсутствует. Текст-заполнитель копируется в атрибут aria-label.

4

не мкр-не-Autogrow

При наличии текстовые области не будут расти автоматически.

5

мкр-обнаружить скрытый

Когда текстовые области присутствуют, они будут иметь правильный размер, когда они будут обнаружены после скрытия. По умолчанию это отключено по соображениям производительности, поскольку гарантирует повторное выполнение каждого цикла дайджеста.

мкр-MaxLength

Максимально допустимое количество символов в этом входе. Если это указано, счетчик символов будет отображаться под вводом. Назначение md-maxlength — показать текст счетчика максимальной длины. Если вам не нужен текст счетчика и требуется только «простая» проверка, вы можете использовать «простые» атрибуты ng-maxlength или maxlength.

ария-этикетка

Aria-label требуется, когда нет этикетки. Предупреждающее сообщение будет зарегистрировано в консоли, если метка отсутствует.

заполнитель

Альтернативный подход к использованию aria-label, когда метка отсутствует. Текст-заполнитель копируется в атрибут aria-label.

не мкр-не-Autogrow

При наличии текстовые области не будут расти автоматически.

мкр-обнаружить скрытый

Когда текстовые области присутствуют, они будут иметь правильный размер, когда они будут обнаружены после скрытия. По умолчанию это отключено по соображениям производительности, поскольку гарантирует повторное выполнение каждого цикла дайджеста.

пример

В следующем примере показано использование директивы md-input-container, а также использование входов.

am_inputs.htm

Live Demo

<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>

Результат

Проверьте результат.

37
Share: