jQuery步骤-如何从控制器JS代码触发ng消息验证

Question

我有一个表单，其中包含绑定到ng-messages验证系统的组件，并且使用jquery-steps将其分为几个部分。

当用户按jquery-steps按钮从一个区域导航到jquery-steps区域时，我需要触发验证。 这些是简单的按钮，不提交表单。 在代码中，这绑定到各部分之间的导航，我可以清楚地看到是否键入了数据以及数据是否正确：例如，我可以成功引用$scope.eventForm.title.$valid 。 但是，我想在数据不正确时强制显示验证消息。 目前，它们仅在我单击任意一个输入后才会出现，但我想从控制器中触发它们。 可能吗？

视图的html：

<div ng-controller="eventDetailsController as ctrl" ng-cloak>
  <md-content class="md-padding" layout-xs="column" layout="row" layout-align="center center">
    <div flex-xs flex-gt-xs="70" layout="column">
      <form name="eventForm">
        <div wizard="{content: '#format-toolbar-options', position: 'top'}" id="event_wizard">

          <h3>Basic data</h3>
          <section>

            <md-card>
              <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out"/>
              <md-card-title>
                <md-card-title-text>
                  <h3>New event</h3>
                </md-card-title-text>
              </md-card-title>
              <md-card-content>

                <div layout="row">
                  <md-input-container class="md-block" flex="50">
                    <label>Title</label>
                    <input md-maxlength="30" required md-no-asterisk name="title" ng-model="event.title">
                    <div ng-messages="eventForm.title.$error">
                      <div ng-message="required">This is required.</div>
                      <div ng-message="md-maxlength">The title must be less than 30 characters long.</div>
                    </div>
                  </md-input-container>
                </div>

                <div layout="row">
                  <md-input-container class="md-block">
                    <label>Contacts</label>
                    <input required type="email" name="contacts" ng-model="event.contacts"
                minlength="10"  maxlength="100" ng-pattern="/^.+@.+\..+$/" />

                    <div ng-messages="eventForm.contacts.$error" role="alert">
                      <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                        Your email must be between 10 and 100 characters long and look like an e-mail address.
                      </div>
                    </div>
                  </md-input-container>
                </div>

              </md-card-content>
           </md-card>
          </section>

          <h3>Some other data</h3>
          <section>
          </section>

        </div>
      </form>
    </div>
  </md-content>
</div>

该控制器具有绑定到各部分之间导航的功能：

var eventDetailsController = function($scope, $http, __config){

    $scope.stepChanging = function(event, currentIndex, newIndex)
    {
        var valid = true;
        if(!$scope.eventForm.contacts.$valid)
        {
            //call some function which triggers contacts validation message
            //tried this as suggested in one of SO posts, but it did not work out
            $scope.eventForm.contacts.$setTouched();
            valid = false;
        }
        if(!$scope.eventForm.title.$valid)
        {
            //call some function which triggers title validation message
            valid = false;
        }

        //call some function which triggers all validation messages

        return valid;
    }
};

Answer 1

使用$validate()函数：

$scope.eventForm.contacts.$validate();
$scope.eventForm.title.$validate();

从文档中：

$验证（）;

运行每个已注册的验证器（首先是同步验证器，然后是异步验证器）。 如果有效性更改为无效，则模型将设置为undefined 。 如果有效性更改为有效，它将把模型设置为最后一个可用的有效$modelValue ，即最后一个解析的值或从作用域设置的最后一个值。

— AngularJS ngModelController API参考-$ validate