Açısal Malzeme - Girişler

md-input-container, bir Angular yönergesi, herhangi bir <input> veya <textarea>bir çocuk olarak. Ayrıca standart ng-mesaj direktiflerini kullanarak hata işlemeyi destekler ve ngEnter / ngLeave olaylarını veya ngShow / ngHide olaylarını kullanarak mesajları canlandırır.

Öznitellikler

Aşağıdaki tablo, farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-input-container.

Sr.No Parametre ve Açıklama
1

md-maxlength

Bu girişte izin verilen maksimum karakter sayısı. Bu belirtilirse, girişin altında bir karakter sayacı gösterilecektir. Md-maxlength'in amacı, maksimum uzunluk sayaç metnini göstermektir. Sayaç metnini istemiyorsanız ve yalnızca "düz" doğrulamaya ihtiyacınız varsa, "basit" ng-makslength veya makslength niteliklerini kullanabilirsiniz.

2

aria-label

Etiket bulunmadığında arya etiketi gereklidir. Bir etiket yoksa, konsolda bir uyarı mesajı kaydedilir.

3

placeholder

Etiket mevcut olmadığında aria etiketi kullanmaya alternatif bir yaklaşım. Yer tutucu metin, aria-label niteliğine kopyalanır.

4

md-no-autogrow

Mevcut olduğunda, metin alanları otomatik olarak büyümeyecektir.

5

md-detect-hidden

Mevcut olduğunda, metin alanları gizlendikten sonra ortaya çıktıklarında uygun şekilde boyutlandırılacaktır. Bu, performans nedenlerinden ötürü varsayılan olarak kapalıdır çünkü her özet döngüsünde bir yeniden akış garanti eder.

Misal

Aşağıdaki örnek, md-input-container yönergesinin ve ayrıca girdilerin kullanımlarını gösterir.

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>

Sonuç

Sonucu doğrulayın.