入力値がパターンを満たしている場合にのみ入力値を送信することが許可されています

1つの項目をダブルクリックすると編集可能になります。現在、アイテムを編集しているときに、外部（つまりblur）をクリックするか、キーボードで入力すると新しい値が送信されます。入力値がパターンを満たしている場合にのみ入力値を送信することが許可されています

新しい変更は、空でないか、パターン（たとえば、ファイル名が.の場合）でない場合にのみ送信できます。

私はng-required="true"を試しましたが、動作しませんでした。

誰もこの制限を設定する方法を知っていますか？

JSBin

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    <style> 
    input { 
     font-size: 20px; 
     border:none; 
     background-color:transparent; 
    } 
    </style> 
</head> 
<body ng-app="app" ng-controller="Ctrl"> 
    <table> 
    <tr ng-repeat="item in items"> 
     <td> 
     <input type="text" value="{{item.name}}" ng-blur='eEditable = -1' ng-readonly='$index !== eEditable' ng-dblclick="eEditable = $index" ng-keypress="keypress($event)" ng-required="true"/> 
     </td> 
    </tr> 
    </table> 
    <script> 
    var app = angular.module('app', []); 
    app.controller('Ctrl', ['$scope', function ($scope) { 
     $scope.items = [{ name: "item #1" }, { name: "item #2" }, { name: "item #3" }]; 
     $scope.eEditable = -1; 
     $scope.keypress = function ($event) { 
     if ($event.keyCode === 13) 
      $event.target.blur() 
     } 
    }]) 
    </script> 
</body> 
</html>

編集1：既存の答えがformを使用することをお勧めしますが、私はformまたはsubmitボタンを使用する必要はありません。

myBlur関数の新しい値を検証する方法があります。パターンが満たされない場合、入力フィールドにフォーカスを戻して、ユーザーが再度値を変更できるようにすることができます。別のJSBinがあります。

誰でも知っている方法は、入力フィールドにフォーカスを戻しますか？私はこのサイト役に立つ作る正規表現を見つけ

<input type="text" ng-model="model" id="input" name="input" ng-pattern="regex" />

正規表現と

出典

2017-03-21 SoftTimur

誰かが入力フィールドにフォーカスを戻す方法を知っていますか？

ngKeypressイベントの入力を検証する場合は、$イベントを使用できます。検証に失敗した場合は、

angular.element($event.currentTarget).focus();

出典

2017-03-26 11:17:54

確かに、 'ngKeypress'ではこれを行うことができました...しかしマウスbluring中にこれをどうやって行うことができますか？ – SoftTimur

ぼかしの場合は、$ eventのイベントも表示するNgBlurイベントを使用できます。https://docs.angularjs.org/api/ng/directive/ngBlur –

@SoftTimurぼかしに関する私のコメントを参照してください。 –

利用のNGパターンhttp://regexr.com/

出典

2017-03-21 23:24:52 joegod86

と入力してフォーカスを戻してください。これは私の例ではうまくいきますか？ – SoftTimur

はい、Bensの回答がより詳細です。フォームに入力する必要があり、ng-requiredが動作する必要があります。 – joegod86

あなたは<form>とng-submit、ng-required、そして、ng-patternディレクティブを使用して送信を防ぐことができます：

<form name="myForm" ng-submit="submitClicked($event, myForm)"> 
    <input type="text" ng-required="true" ng-pattern="/.)/"> 
    <input type="submit"> 
</form> 

$scope.submitClicked = function($event, form) { 
    if (!form.$valid) { 
      $event.preventDefault(); 
    } 
}

出典

2017-03-21 23:29:13

しかし問題は私のリストに 'form'または' submit'ボタンを追加したくないということです... – SoftTimur

入力値がパターンを満たしている場合にのみ入力値を送信することが許可されています

答えて

関連する問題