Question

我认为我想要实现的目标非常简单。我们有一个带有必填字段的表单，例如一个选择（我还尝试了输入，但它的情况完全相同）。

我只想在点击按钮时显示ng-messages。如果在单击按钮之前触摸了表单域，则可以正常工作。但如果表单字段为$untouched，我就无法做到。

我已经解决了它以编程方式$touched设置到表单字段，但我想知道是否有任何方法可以解决它而没有这个uggly＆＃39; hack＆＃39;。< / p>

// 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;
  }
};

我非常确定这适用于以前版本的角度材质。现在我使用最新的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
}

单击按钮时显示验证消息

1 个答案: