当形式与角提交更改类和显示信息 [英] Change classes and display message when form is submitted with Angular
问题描述
我使用ngMessages与我的表单验证显示错误消息，这是工作。
现在我的问题是，当我提交表单我想从有效（绿框）改变类为正常状态，这是对刚刚投入CSS。此外，如果所有的字段都有效的文本消息应显示上述表单，表单已经发出，但它似乎并没有与$有效的合作。
几秒钟后，信息消失。
我的code
CSS
输入{
背景色：#FFF;
边框：1px的固体深灰;
的margin-top：20px的;
宽度：400像素;
高度：×45像素;
填充：0 10px的;}
。无效场{
边框：1px的固体红色;
}
.valid场{
边框：1px的固体绿色;
}
.error {
颜色：红色;
}
.sent {
颜色：绿色;
}
HTML /角
＆LT;形成NOVALIDATE NAME =联系形式＆GT;
＆LT; DIV NG的消息=$联系形式有效的NG-IF =$联系形式提交＆GT;
＆LT; DIV NG消息=有效＆GT;
＆LT;跨度类=发送＆GT;您的邮件已发送＆LT;！/ SPAN＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;输入纳克级={'无效场：。contactForm.nameField $感动||联系形式提交$，有效的场'：contactForm.nameField $有效}
TYPE =文本名称=名称字段占位符=全名*
NG-模式=联系人姓名
MINLENGTH个=2
需要＆GT;
＆LT; DIV NG的消息=。contactForm.nameField $错误NG-IF =$联系形式提交|| contactForm.nameField $感动。＆GT;
＆LT; DIV NG消息=需要＆GT;
＆LT;跨度类=错误＆GT;名称是必需的＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
＆LT; DIV NG消息=MINLENGTH个＆GT;
＆LT;跨度类=错误＆GT;名称必须是长及保持2字符; / SPAN＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;输入纳克级={'无效场：。contactForm.emailField $感动||联系形式提交$，有效的场'：contactForm.emailField $有效}
键入=电子邮件NAME =emailField占位符=电子邮件*
NG-模式=contactEmail
需要＆GT;
＆LT; DIV NG的消息=。contactForm.emailField $错误NG-IF =$联系形式提交|| contactForm.emailField $感动。＆GT;
＆LT; DIV NG消息=需要＆GT;＆LT;跨度类=错误＆GT;电子邮件是必需的＆LT; / SPAN＆GT;＆LT; / DIV＆GT;
＆LT; DIV NG消息=电子邮件＆GT;＆LT;跨度类=错误＆GT;电子邮件无效＆LT; / SPAN＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT;按钮类=送-BTN类型=提交＆GT;发送表单＆LT; /按钮＆GT;
＆LT; /表及GT;
更新
我怕你不能做，你直接需要的东西，因为如果你改变的条件有2个国家将互相冲突：
的用户正确填写表单并提交的VS的用户preSS提交，然后正确填写一个字段的
在第二个案例字段不会显示有效场绿色边框。
你应该做的是做哪些检查的有效字段功能，并执行它提交，然后设置一个标志上真正一类的形式对全球这将覆盖您当前的有效 /无效状态
这里是工作液
//验证美国
$ scope.validateSuccessSubmit =功能（）{
如果（$ scope.contactForm.nameField $有效和放大器;＆安培;
。$ scope.contactForm.emailField $有效和放大器;＆安培;
$ scope.contactForm。$提交）{
$ scope.formCompleted =真;
} };
＆LT;！ - 表 - ＆GT;
＆LT;形成NOVALIDATE NAME =联系形式NG-CLASS ={'的形式完成的'：formCompleted}＆GT;
/ * *的CSS /
.FORM完成的输入{
边框：1px的固体深灰;
}
的 previous不正确的答案：的
只需添加！$提交在有效场类条件
纳克级={'无效场：。contactForm.nameField $感动||联系形式提交$，
'有效场：contactForm.nameField $有效和放大器;＆安培; ！联系形式。$}提交//和NG-CLASS ={'无效场：。contactForm.emailField $感动||联系形式提交$，
'有效场：contactForm.emailField $有效和放大器;＆安培; ！联系形式。$}提交
I'm using ngMessages to display error messages with my form validation and this is working.
Now my problem is when I submit the form I want to change the classes from being valid (green border) to their normal state, which is just css on the inputs. Also if all the fields are valid a text message should display above the form that the form has been sent but it doesn't seem to be working with the $valid.
After a few seconds the message disappears.
my code
css
input {
background-color: #fff;
border: 1px solid darkgray;
margin-top: 20px;
width: 400px;
height: 45px;
padding: 0 10px;
}
.invalid-field {
border: 1px solid red;
}
.valid-field {
border: 1px solid green;
}
.error {
color: red;
}
.sent {
color: green;
}
html/angular
<form novalidate name="contactForm">
<div ng-messages="contactForm.$valid" ng-if="contactForm.$submitted">
<div ng-message="valid">
<span class="sent">Your message has been sent!</span>
</div>
</div>
<input ng-class="{'invalid-field': contactForm.nameField.$touched || contactForm.$submitted, 'valid-field': contactForm.nameField.$valid}"
type="text" name="nameField" placeholder="Full name*"
ng-model="contactName"
minlength="2"
required >
<div ng-messages="contactForm.nameField.$error" ng-if="contactForm.$submitted || contactForm.nameField.$touched">
<div ng-message="required">
<span class="error">Name is required</span>
</div>
<div ng-message="minlength">
<span class="error">Name must be 2 characters long</span>
</div>
</div>
<input ng-class="{'invalid-field': contactForm.emailField.$touched || contactForm.$submitted, 'valid-field': contactForm.emailField.$valid}"
type="email" name="emailField" placeholder="Email*"
ng-model="contactEmail"
required>
<div ng-messages="contactForm.emailField.$error" ng-if="contactForm.$submitted || contactForm.emailField.$touched">
<div ng-message="required"><span class="error">Email is required</span></div>
<div ng-message="email"><span class="error">Email is not valid</span></div>
</div>
<button class="send-btn" type="submit">Send form</button>
</form>
Update
I'm afraid that you can't do what you need directly, because if you change the conditional there are 2 states which will conflict with each other:
The user fills the form correctly and submits VS The user press Submit, then fills a field correctly
In the second case the field won't be show the valid-field green border.
What you should do is make a function which checks the valid fields, and execute it on the submit, then set a flag on true for a class global on your form which will override your current valid/invalid states
Here is the working solution
//Validate States
$scope.validateSuccessSubmit = function(){
if($scope.contactForm.nameField.$valid &&
$scope.contactForm.emailField.$valid &&
$scope.contactForm.$submitted) {
$scope.formCompleted = true;
}
};
<!-- Form -->
<form novalidate name="contactForm" ng-class="{'form-completed' : formCompleted}">
/*CSS*/
.form-completed input{
border: 1px solid darkgray;
}
Previous incorrect answer:
Just add the !$submitted condition on the valid-field class
ng-class="{'invalid-field': contactForm.nameField.$touched || contactForm.$submitted,
'valid-field': contactForm.nameField.$valid && !contactForm.$submitted}"
//And
ng-class="{'invalid-field': contactForm.emailField.$touched || contactForm.$submitted,
'valid-field': contactForm.emailField.$valid && !contactForm.$submitted}"
这篇关于当形式与角提交更改类和显示信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
