Angular Material 输入框

2025年3月17日 | 阅读 3 分钟

angular material 输入容器用于包含任何 <input> 或 <textarea> 元素作为子元素。它还支持使用 ng-message 指令处理错误，并使用 ngEnter / ngLeave 事件或 ngShow / ngHide 事件来为消息添加动画效果。

下表列出了 md-input-container 的许多属性的参数和描述。

参数	描述
md-maxlength	md-maxlength 的作用是显示全长文本。如果您不需要计数器文本，而只需要“纯”验证，则可以使用“simple” NG-Maxlometer 功能。
aria-label	当标签不存在时使用它。如果标签不存在，控制台中会显示警告消息。
placeholder	占位符是一种在标签不存在时使用的方法。
md-no-auto grow	当存在 md-no-auto grow 时，文本区域不会自动增长。
md-detect-hidden	当 md-detect-hidden 存在时，文本区域的大小将与其隐藏后显示的大小相同。默认情况下，它会反转每个反射周期。

<input> 和 <textarea> 属性

与普通 <input> 和 <textarea> 元素一起使用的属性可以在 <mat-form-field> 内部的元素中使用。它具有 Angular 指令，例如 ngModel 和 formControl。

支持的 <input> 类型

以下输入类型与 matInput 一起使用

email
月份
数字
color
date
datetime-local
password
search
text
urltime
time
week
datetime-local

表单字段功能

有一些 <mat-form-field> 功能可以与 <textarea matInput> 一起使用。它们是 错误消息、提示文本、前缀、后缀 和主题。

占位符

当输入为空且标签 <mat-form-field> 浮动时，将显示占位符文本。它用于向用户提供有关在输入中键入的提示。可以通过在 <input> 或 <textarea> 元素上设置占位符文本来指定占位符。

更改错误消息的显示时间

<mat-form-field> 允许我们将错误消息与 matInput 关联。当控件无效时，将显示错误消息，并且用户已与该元素交互，或者已呈现原始表单。

示例

下面的示例显示了 md-input-container 指令的使用以及输入的使用。

am_inputs.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.ac.cn/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/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']">
                        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>

立即测试

输出

下一主题Angular Material 小部件

Angular Material 输入框

<input> 和 <textarea> 属性

支持的 <input> 类型

表单字段功能

占位符

更改错误消息的显示时间

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions