我想仅当单击按钮时才显示 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 }
更多推荐
单击按钮时显示验证消息
发布评论