单击按钮时显示验证消息 [英] Display validation messages when a button is clicked

问题描述

我想我想实现的很简单。让我们来看一个带有必需字段的表单，例如一个select（我也尝试过使用一个输入，反正它也完全一样）

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

我已经解决了编程设置 $ touch 到表单字段，但我想知道是否有任何方法可以解决它，而没有这种'hack'。

  //以任何方式避免此行？ 
 $ scope.myForm.favoriteColor。$ setTouched（）; 
 // 
  

参考代码：

HTML：

 < md-input-container> 
< label>收藏的颜色< / label> 
< md-select name =favoriteColorng-model =favoriteColorrequired> 
< md-option value =red>红色< / md-option> 
< md-option value =blue>蓝色< / md-option> 
< / md-select> 
< div class =errorsng-messages =myForm.favoriteColor。$ errorng-show =validateWithHack> 
< div ng-message =必需>必需< / div> 
< / div> 
< / md-input-container> 
  

JS：

  $ scope.validateWithHack = function（）{
 if（$ scope.myForm。$ valid）{
 alert（'Form is valid。'）; 
} else {
 //任何方法来避免这条线？ 
 $ scope.myForm.favoriteColor。$ setTouched（）; 
 // 
 $ scope.validateWithHack = true; 
} 
}; 
  

我很确定这是适用于以前版本的角度材质。现在我使用的是最新的1.1.1。

这是一个 $ /

提前致谢

解决方案

检查 CodePen

我在表单中加入了 novalidate code> 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（）; 
 //你的表单工作的其余部分表明你是否想要做ajax或任何你喜欢的
 //检查表单是否有效使用$ invalid 
 
  

I think what I want to achieve is quite simple. Let's have a form with a required field, a select for instance (I've also tried it with an input and it's exactly the same situation anyway).

I want to display the ng-messages only when a button is clicked. If the form field was touched before clicking the button, it works fine. But I cannot do it if the form field is $untouched.

I've solved it setting programatically $touched to the form field, but I'm wondering if there is any way to solve it without this uggly 'hack'.

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

Code for reference:

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

I'm pretty sure that this was working with previous versions of angular-material. Now I'm using the latest 1.1.1.

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

Thanks in advance.

解决方案

Check the CodePen

I have added novalidate to your form and added type="submit" to your md-button

Edit 2: The type="submit" button actually triggers a form submit and so the angular form validates itself first, What we need to do is to prevent the submit and just do the validation.

novalidate(Just to supress the HTML5 validation) to your form and added type="submit" to your md-button : This Will Validate the form and submit the form, To validate and prevent form submit add ng-click="submitMethod(<yourForm>, $event)" to the <md-button> and define method as

$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
}

这篇关于单击按钮时显示验证消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！