仅在满足模式时才允许提交输入值答案

【问题标题】：Permit of submitting an input value only when it fulfils a pattern仅在满足模式时才允许提交输入值
【发布时间】：2017-03-26 19:17:54
【问题描述】：

我想制作一个项目列表，双击一个项目使其可编辑。目前，在编辑项目时，单击外部（即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。

有谁知道如何将焦点重新设置回输入字段？

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

有谁知道如何将焦点设置回输入字段？

如果您要验证 ngKeypress 事件中的输入，您可以使用 $event. 如果验证失败，使用

将焦点重新设置回输入

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

【讨论】：

确实，在ngKeypress 中我们可以做到这一点……但是在鼠标模糊的情况下我们怎么能做到这一点呢？
对于模糊，您可以使用 NgBlur 事件，该事件也会在 $event docs.angularjs.org/api/ng/directive/ngBlur 中显示该事件
@SoftTimur 看我对模糊的评论
这里是修改后的JSBin，满足条件为=== "ok"。一个问题是，满意的项目不再是只读的；我们可以通过单击而不是双击来编辑它。你知道怎么修改吗？
@SoftTimur 我已经在 plunker 中添加了解决方案，这是一个开始。看看这个plnkr.co/edit/Rd1hJiLAS95OE7qgEg6P?p=preview

【解决方案2】：

在正则表达式中使用 ng-pattern

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

我发现这个网站有助于制作正则表达式 http://regexr.com/

【讨论】：

是的，但是 Bens 的回答更详细，您确实需要将输入放入表单中，然后 ng-required 应该可以工作。

【解决方案3】：

您可以通过使用带有ng-submit、ng-required 和ng-pattern 指令的<form> 来阻止提交：

<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();
     }
}

【讨论】：