md-input-container （一个Angular指令）是一个容器组件，其中包含任何或</b>元素作为子元素。它还支持使用标准ng-messages指令进行错误处理，并使用ngEnter / ngLeave事件或ngShow / ngHide事件对消息进行动画处理。</p> <h2>属性</h2> <p>下表列出了<b>md-input-container</b>的不同属性的参数和说明。</p> <table class="table"> <tr> <th style="text-align:center;">Sr.No</th> <th style="text-align:center;">Parameter & Description</th> </tr> <tr> <td class="ts">1</td> <td> <p><b>md-maxlength</b></p> <p>The maximum number of characters allowed in this input. If this is specified, a character counter will be shown underneath the input. The purpose of the md-maxlength is to show the max length counter text. If you don’t want the counter text and only need “plain” validation, you can use the “simple” ng-maxlength or maxlength attributes.</p> </td> </tr> <tr> <td class="ts">2</td> <td> <p><b>aria-label</b></p> <p>Aria-label is required when no label is present. A warning message will be logged in the console if a label is not present.</p> </td> </tr> <tr> <td class="ts">3</td> <td> <p><b>placeholder</b></p> <p>An alternative approach to using aria-label when the label is not present. The placeholder text is copied to the aria-label attribute.</p> </td> </tr> <tr> <td class="ts">4</td> <td> <p><b>md-no-autogrow</b></p> <p>When present, the textareas will not grow automatically.</p> </td> </tr> <tr> <td class="ts">5</td> <td> <p><b>md-detect-hidden</b></p> <p>When present, the textareas will be sized properly when they are revealed after being hidden. This is off by default for performance reasons because it guarantees a reflow every digest cycle.</p> </td> </tr> </table> <h2>例</h2> <p>以下示例显示了md-input-container指令的用法以及输入的用法。</p> <p> <i><b>am_inputs.htm</b></i></p> <div class="demo-view"><a class="demo" href="http://tpcg.io/IJzNjM" rel="nofollow noopener noreferrer" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><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> <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> </code></pre> </div> <h2>结果</h2> <p>验证结果。</p> <p><iframe class="result" height="300px" loading="lazy" onload="resizeFrame(this)" src="/angular_material/src/am_inputs.htm" width="660px"></iframe></p></div> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer> <!-- 引入Bootstrap JavaScript库 --> <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <!-- 引入Meilisearch搜索相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script> <!-- 引入prismjs代码高亮相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>