如何在编辑模式下打开对话框时禁用验证？答案

【问题标题】：How to disable validation while opening dialog box on edit mode?如何在编辑模式下打开对话框时禁用验证？
【发布时间】：2015-04-06 22:25:56
【问题描述】：

当试图在编辑模式下打开对话框时，验证消息会弹出所需的消息。但我需要实现的是，在编辑模式下打开对话框时，文本框将在对话框打开后立即包含值，但验证消息也存在。如果文本框中已经存在值，如何删除它。

下面是我如何使用它的 HTML 代码示例。

<div class="form-group col-lg-6" show-errors>
    <label for="firstName">First Name</label>
    <input type="text" class="form-control" id="firstName" ng-model="firstName" name="firstName" placeholder="First Name" style="width: 74%;" required>
    <p class="help-block" ng-if="EditUserUserform.firstName.$error.required">Required</p>
</div>
<div class="form-group col-lg-6" show-errors>
    <label for="lastName">Last Name</label>
    <input type="text" class="form-control" id="lastName" ng-model="lastName" name="lastName" placeholder="Last Name" style="width: 74%;" required>
<p class="help-block" ng-if="EditUserUserform.lastName.$error.required">Required</p>
</div>

app.directive('showErrors', function() {
 return {
      restrict: 'A',
      require:  '^form',
      link: function (scope, el, attrs, formCtrl) {
        // find the text box element, which has the 'name' attribute
        var inputEl   = el[0].querySelector("[name]");
        // convert the native text box element to an angular element
        var inputNgEl = angular.element(inputEl);
        // get the name on the text box so we know the property to check
        // on the form controller
        var inputName = inputNgEl.attr('name');

        // only apply the has-error class after the user leaves the text box
        inputNgEl.bind('blur', function() {
          el.toggleClass('has-error', formCtrl[inputName].$invalid);
        });
      }
    }
});

下面是我在正常模式下打开表单时的图像。

下图显示了当我在编辑模式下打开时。

该值已存在于其中，但一旦对话框打开，它就会显示验证消息。

【问题讨论】：

app.directive('showErrors', function(e) {e.preventDefault();} 请尝试，我不确定。
感谢您的快速回复，但它不起作用

标签： javascript jquery html angularjs angularjs-directive

【解决方案1】：

我根本不知道角度，这是假设您可以访问上下文是否处于编辑模式，但看起来您可以在这里做点什么：

    inputNgEl.bind('blur', function() {
      //only check if not edit mode
      if (!edit) {
        el.toggleClass('has-error', formCtrl[inputName].$invalid);
      }
    });

除非 Angular 有自己的钩子来实现相同的目标，否则我会说你可以这样做。

【讨论】：

我很好奇，有没有办法检查代码中此时的编辑状态？或者，在编辑模式下，您可以为输入提供额外的样式。例如 in-edit 然后在您的样式中，您可以使用 .in-edit.has-error { background: <whatever the normal stuff is> } 之类的内容覆盖错误样式

【解决方案2】：

通常，如果没有触摸输入字段，则该字段的值不是由用户填写，而是通过使用控制器，$pristine 将是true。因此，您可以通过首先验证 $pristine 值来解决此问题：

    // only apply the has-error class after the user leaves the text box
    inputNgEl.bind('blur', function() {
      // Only do this if and only if the field has been touched and the value is invalid
      el.toggleClass('has-error', !formCtrl[inputName].$pristine && formCtrl[inputName].$invalid);
    });

或者，您可以使用$dirty 值，如果该字段没有被触及，则该值将是false。

      el.toggleClass('has-error', formCtrl[inputName].$dirty && formCtrl[inputName].$invalid);

【讨论】：