Angularjs Jquery步骤——如何从控制器js代码触发ng消息验证

Angularjs Jquery步骤——如何从控制器js代码触发ng消息验证,angularjs,validation,angular-ngmodel,jquery-steps,ng-messages,Angularjs,Validation,Angular Ngmodel,Jquery Steps,Ng Messages,我有一个表单,其中包含绑定到验证系统的组件,并使用将其分为几个部分 当用户按jquery步骤按钮从一个部分导航到另一个部分时,我需要触发验证。这些是简单的按钮,不提交表单。在代码中,绑定到各节之间的导航,我可以清楚地看到数据是否键入以及是否正确:例如,我可以成功地引用$scope.eventForm.title.$valid。但是,我想在数据不正确时强制显示验证消息。目前,它们只在我点击任何一个输入后出现,但我想从控制器触发它们。可能吗 视图的html: <div ng-controlle

我有一个表单,其中包含绑定到验证系统的组件,并使用将其分为几个部分

当用户按jquery步骤按钮从一个部分导航到另一个部分时,我需要触发验证。这些是简单的按钮,不提交表单。在代码中,绑定到各节之间的导航,我可以清楚地看到数据是否键入以及是否正确:例如,我可以成功地引用$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>
使用$validate函数:

$scope.eventForm.contacts.$validate();
$scope.eventForm.title.$validate();
从文档中:

$validate; 运行每个注册的验证器,首先运行同步验证器,然后运行异步验证器。如果有效性更改为无效,则模型将设置为未定义。如果有效性更改为valid,它会将模型设置为最后可用的有效$modelValue,即最后解析的值或范围中设置的最后一个值


谢谢你的建议!然而,由于某种原因,它不起作用,尽管输入的有效状态是可观察的,并且是错误的,但错误消息仍然没有显示出来。现在我怀疑我输入的必需属性在某种程度上与其他ng消息功能相冲突。当您将jQuery插件(如AngularJS)与之混合时,您会感到非常头痛。书面问题没有提供足够的信息来重现问题。创建了此plunker:,其中问题可以清楚地重现:下一步按钮不会在“标题输入”下触发错误消息,除非之前已单击输入。关于插件:是的,我确实意识到了这一点,我清理了除jquery步骤之外的所有jq插件,因为这一步非常方便。演示从未调用控制器中的$scope.stepChanging函数。问题不在那里。正是该指令尝试将jquery步骤与AngularJS集成在一起。请参阅通过从函数记录到控制台更新了演示。在我的例子中,我使用Chrome 60.0.3112.90,函数被正确调用,日志记录也完成了。你能提供你的浏览器版本吗?如果这对那个浏览器版本是真的,那么我所说的问题要比问题严重得多。
$scope.eventForm.contacts.$validate();
$scope.eventForm.title.$validate();