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

Question

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

以下示例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);
        });
      }
    }
});

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

以下图像显示我在编辑模式下打开的时间。

已存在的值，但只要对话框打开，它就会显示验证消息。

Answer 1

我根本不知道角度，这假设您可以访问是否处于编辑模式的上下文，但看起来您可以在此处执行某些操作：

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

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

Answer 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);