Material angular - Entradas

los md-input-container, una directiva Angular, es un componente contenedor que contiene cualquier <input> o <textarea>elemento como un niño. También admite el manejo de errores usando las directivas estándar ng-messages y anima los mensajes usando los eventos ngEnter / ngLeave o ngShow / ngHide.

Atributos

La siguiente tabla enumera los parámetros y la descripción de los diferentes atributos del md-input-container.

No Señor	Descripción de parámetros
1	md-maxlength El número máximo de caracteres permitidos en esta entrada. Si se especifica esto, se mostrará un contador de caracteres debajo de la entrada. El propósito de md-maxlength es mostrar el texto del contador de longitud máxima. Si no desea el texto del contador y solo necesita una validación "simple", puede usar los atributos "simple" ng-maxlength o maxlength.
2	aria-label Se requiere la etiqueta Aria cuando no hay etiqueta presente. Se registrará un mensaje de advertencia en la consola si no hay una etiqueta.
3	placeholder Un enfoque alternativo al uso de aria-label cuando la etiqueta no está presente. El texto del marcador de posición se copia en el atributo aria-label.
4	md-no-autogrow Cuando están presentes, las áreas de texto no crecerán automáticamente.
5	md-detect-hidden Cuando están presentes, las áreas de texto se dimensionarán correctamente cuando se revelen después de ocultarse. Está desactivado de forma predeterminada por motivos de rendimiento, ya que garantiza un reflujo en cada ciclo de resumen.

Ejemplo

El siguiente ejemplo muestra el uso de la directiva md-input-container y también los usos de las entradas.

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 = "/^[email protected]+\..+$/" />
                  <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>

Resultado

Verifique el resultado.

↰ Previous page Next page ↱