当用户开始在 angularjs 中打字(输入字段长度 >0)时如何检查 ng-pattern? [英] how to check ng-pattern when user start typing(input field length >0) in angularjs?

查看：25
本文介绍了当用户开始在 angularjs 中打字(输入字段长度 >0)时如何检查 ng-pattern?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想检查模式检查是否输入字段长度 > 0 我该怎么做.

期待

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

(function(angular) {'使用严格';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'><!-- 应用程序在这里--><form name="test" novalidate ng-submit="test.$valid && submit()"><div layout-gt-md="row"><md-input-container class="md-block" flex-gt-xs><label>数字</label><input required ng-model="user.number" name="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" ><div ng-messages="test.number.$error">

<div ng-messages="test.$error" ng-show="test.number.$dirty"><div ng-message="required">数字是必需的</div>

<span ng-show="!test.number.$valid">请输入有效的输入</span></md-input-container>

</表单>

演示

帮帮我

解决方案

我已经更新了 HTML 中的代码

<html lang="zh-cn"><头><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><身体><div ng-app='ngMessagesExample'><!-- 应用程序在这里--><form name="test" novalidate ng-submit="test.$valid && submit()"><div layout-gt-md="row"><md-input-container class="md-block" flex-gt-xs><label>数字</label><input required ng-model="user.number" name="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" ><div ng-messages="test.number.$error">

<div ng-messages="test.$error" ng-show="test.number.$dirty"><div ng-message="required">数字是必需的</div></div><span ng-show="test.number.$error.pattern">请输入有效的输入</span></md-input-container>

</表单>

</html>

I want to check pattern check if input field length > 0 how can i do this .

expectation

  1. when input field empty showing required message(touched)
  2. After start typing need to check pattern if pattern is not match need to show Please Enter Valid Input and if input field length 0 need to show only required message 

(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

help me out

解决方案

i have updated the code in 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>

这篇关于当用户开始在 angularjs 中打字(输入字段长度 >0)时如何检查 ng-pattern?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆