2016-09-08 7 views
0

ユーザー入力値が1より大きく、入力フィールドに正規表現で定義された値が含まれていない場合は、スパンを表示する必要があります。長さとngパターンが成立しない場合に要素を非表示にする

コード:

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

<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-ng-form-production</title> 


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


    <script type="text/javascript"> 
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />')); 
    </script> 
</head> 

<body ng-app="formExample"> 
    <script> 
    angular.module('formExample', []) 
     .controller('FormController', ['$scope', function($scope) { 
     $scope.userType = ''; 
     $scope.regex = "#%<;'="; 
     }]); 
    </script> 
    <form name="myForm" ng-controller="FormController" class="my-form"> 
    userType: 
    <input name="input" ng-model="userType" ng-pattern="regex && userType"> 
    <span ng-show="userType && myForm.input.$valid">show me!</span> 
    <br> 
    </form> 
</body> 

</html> 

Plunker Demo

答えて

1

あなたが正規表現パターンのないエントリが必要な場合は、除外マスクが必要です。

$scope.regex = "[^#%<;'=]*"; 

とパターンを条件としないマスクを使用します。

<input name="input" ng-model="userType" ng-pattern="regex"> 

をプランカhere

0

NGパターンは正規表現を検証します。だから内側のパターンはちょうどパターンでなければなりません。メッセージを表示するときに、ng-showまたはng-hideの中でuserTypeと他のフォームプロパティを確認してください。それで全部です。

<form name="myForm" ng-controller="FormController" class="my-form"> 
userType: 
<input name="input" ng-model="userType" ng-pattern="regex"> 
<span ng-show="userType && !myForm.input.$error.pattern">show me!</span> 
<br> 

+0

それは働いていません –

+0

パターンの例を与えてください –

+0

それに加えてplunkerに追加されました –

関連する問題