单击按钮时显示验证消息

Question

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

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

我就不能这样做

我已经解决了它以编程方式设置 $touched 到表单字段，但我想知道是否有任何方法可以解决它而没有这个丑陋的 'hack'.

// 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.

Here is a plunker where the problem can be easily reproduced.

提前致谢。

Answer 1

勾选 CodePen

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

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

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
}

单击按钮时显示验证消息

Display validation messages when a button is clicked

forms

angularjs

angular-material

ng-messages