代码之家 › 专栏 › 技术社区 › its me

当用户开始在AngularJS中输入(输入字段长度>0)时,如何检查ng模式?

angular-material angularjs javascript

its me · 技术社区 · 6 年前

我想检查模式检查输入字段长度是否为>0如何执行此操作。

期望

当输入字段为空时,显示所需信息(触摸)
开始后,键入需要检查模式如果模式不匹配需要显示,请输入有效的输入,如果输入字段长度0只需要显示必需的消息

(function(angular) {
  'use strict';
angular.module('ngMessagesExample', ['ngMessages']);
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-messages.js"></script>


<div ng-app='ngMessagesExample'>
   <!-- App goes here -->
   <form name="test" novalidate ng-submit="test.$valid && submit()">
      <div layout-gt-md="row">
         <md-input-container class="md-block" flex-gt-xs>
            <label>Number</label>
            <input  required ng-model="user.number" name="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" >
            <div ng-messages="test.number.$error">
            </div>
            <div ng-messages="test.$error" ng-show="test.number.$dirty">
               <div ng-message="required">number is required</div>
            </div>
            <span ng-show="!test.number.$valid">Please Enter Valid Input</span>
         </md-input-container>
      </div>
   </form>
</div>

demo

帮帮我吧

1 回复 | 直到 6 年前

Sravya Nagumalli 6 年前

我已经用HTML更新了代码

<!doctype html>
<html lang="en">
<head>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-messages.js"></script>
  <script src="script.js"></script>

</head>
<body>

  <div ng-app='ngMessagesExample'>
    <!-- App goes here -->
     <form name="test" novalidate ng-submit="test.$valid && submit()">
    <div layout-gt-md="row">
   <md-input-container class="md-block" flex-gt-xs>
      <label>Number</label>
      <input  required ng-model="user.number" name="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" >
      <div ng-messages="test.number.$error">


      </div>
      <div ng-messages="test.$error" ng-show="test.number.$dirty"><div ng-message="required">number is required</div></div>

      <span ng-show="test.number.$error.pattern">Please Enter Valid Input</span>
   </md-input-container>
</div>
</form>

</div>
</body>
</html>

推荐文章

user19531657 · 如何将标题和按钮对齐在同一行?

2 年前

Marcus Edensky · 角度6材质:材质选项卡链接由下划线栏选择

6 年前

Carl.G · 如何将Angular 6 Material sidenav设置为从屏幕右侧从右向左打开

6 年前

spottedmahn · 覆盖只读/禁用样式/CSS

6 年前

bereket gebredingle · 具有列值的物料表数据源筛选器

6 年前

Rahul Munjal · 无法绑定到“dataSource”,因为它不是“table”的已知属性

6 年前

Billy G · “角度材质”对话框:如何在父零部件中更改注入的数据时更新这些数据?

6 年前

Kaushik Nath · 导入MatTabChangeEvent时出错

7 年前

The Fox · “角度材质”对话框:复选框始终返回false

7 年前

Chinaedu Onwukwe · 在鼠标上方展开“材质扩展”面板

7 年前