Matériau angulaire - Entrées

le md-input-container, une directive Angular, est un composant conteneur qui contient tout <input> ou <textarea>élément en tant qu'enfant. Il prend également en charge la gestion des erreurs à l'aide des directives standard ng-messages et anime les messages à l'aide des événements ngEnter / ngLeave ou des événements ngShow / ngHide.

Les attributs

Le tableau suivant répertorie les paramètres et la description des différents attributs du md-input-container.

Sr. Non Paramètre et description
1

md-maxlength

Le nombre maximum de caractères autorisés dans cette entrée. Si cela est spécifié, un compteur de caractères sera affiché sous l'entrée. Le but de md-maxlength est d'afficher le texte du compteur de longueur maximale. Si vous ne voulez pas le texte du compteur et n'avez besoin que d'une validation "simple", vous pouvez utiliser les attributs "simples" ng-maxlength ou maxlength.
2

aria-label

Aria-label est nécessaire lorsqu'aucune étiquette n'est présente. Un message d'avertissement sera enregistré dans la console si une étiquette n'est pas présente.
3

placeholder

Une approche alternative à l'utilisation de aria-label lorsque l'étiquette n'est pas présente. Le texte de l'espace réservé est copié dans l'attribut aria-label.
4

md-no-autogrow

Lorsqu'elles sont présentes, les zones de texte ne se développeront pas automatiquement.
5

md-detect-hidden

Lorsqu'elles sont présentes, les zones de texte seront dimensionnées correctement lorsqu'elles sont révélées après avoir été masquées. Cette option est désactivée par défaut pour des raisons de performances, car elle garantit une redistribution à chaque cycle de résumé.

Exemple

L'exemple suivant montre l'utilisation de la directive md-input-container ainsi que les utilisations des entrées.

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>

Résultat

Vérifiez le résultat.