单击按钮时显示验证消息

Question

我认为我想要实现的目标很简单。让我们有一个带有必填字段的表单，例如一个 select（我也尝试过输入它，无论如何情况完全相同）。

我只想在单击按钮时显示ng-messages。如果在单击按钮之前触摸了表单域，则它可以正常工作。但是如果表单字段是$untouched，我就不能这样做。

我已经解决了它以编程方式将$touched 设置为表单字段，但我想知道是否有任何方法可以在没有这个丑陋的“黑客”的情况下解决它。

// Any way to avoid this line??
$scope.myForm.favoriteColor.$setTouched();
//

参考代码：

HTML：

<md-input-container>
    <label>Favorite Color</label>
    <md-select name="favoriteColor" ng-model="favoriteColor" required>
      <md-option value="red">Red</md-option>
      <md-option value="blue">Blue</md-option>
    </md-select>
    <div class="errors" ng-messages="myForm.favoriteColor.$error" ng-show="validateWithHack">
      <div ng-message="required">Required</div>
    </div>
</md-input-container>

JS：

$scope.validateWithHack = function() {
  if ($scope.myForm.$valid) {
    alert('Form is valid.');
  } else {
    // Any way to avoid this line??
    $scope.myForm.favoriteColor.$setTouched();
    //
    $scope.validateWithHack = true;
  }
};

我很确定这适用于以前版本的 angular-material。现在我使用的是最新的 1.1.1。

这是一个plunker，其中 问题很容易重现。

提前致谢。

Answer 1

查看CodePen

我已将novalidate 添加到您的表单，并将type="submit" 添加到您的md-button

编辑 2： type="submit" 按钮实际上触发了表单提交，因此角度表单首先验证自身，我们需要做的是阻止提交并进行验证。

novalidate（只是为了抑制 HTML5 验证）到您的表单并将 type="submit" 添加到您的 md-button ：这将验证表单并提交表单，为了验证和防止表单提交添加 ng-click="submitMethod(<yourForm>, $event)" 到<md-button> 并将方法定义为

$scope.submitMethod(form,ev){
  ev.preventDefault();
  //rest of your form work say if you want to do ajax or anything you like
  //check if form valid using form.$invalid
}