我试图在angularjs中验证表单的字段，但它显示错误消息而不单击按钮。我无法弄清楚代码中的问题。当我点击按钮时，我将显示错误消息，但问题是它在页面加载时显示错误消息
我的代码是
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.6.4/angular-messages.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mediaStyle.css">
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", ".square-radio", function () {
$(this).toggleClass("square-radio--clicked");
});
});
</script>
</head>
<body ng-app="myApp">
<div class="container">
<header id="logoHeader">
<h1>Logo</h1><span class="fa fa-times" aria-hidden="true"></span>
</header>
<div class="emailSupportPanel">
<div class="mainContainer">
<h1 class="panel-contentHeader">UK & Ireland Email Support</h1>
<p>Step1:Tell us your issue > Step2: Tell us your issue<span> > Step3:Tell us your issue</span></p>
</div>
</div>
<div class="mainContainer">
<h4 class="imaportantNote">Feilds marked with an astrick <span class="fa fa-asterisk" aria-hidden="true star-icon"></span> are required</h4>
<form name ="myform" ng-submit="sumsung-form.$valid" novalidate ng-init="disabled=false">
<div class="form-container mb15" ng-class="{true: 'error'}[submitted && sumsung-form.userSubject.$invalid]">
<label class="form-label">Subject <span class="fa fa-asterisk" aria-hidden="true star-icon"></span></label>
<input type="text" class="form-input" name="userSubject"
ng-model="userSubject" id="subject" ng-required="!disabled" ng-disabled="disabled"
ng-required="true"
placeholder="Enter Subject" ng-class="{error: showMsgs && myform.name.$error.required}">
<p ng-show="showMsgs && myform.name.$error.required">This field is required</p>
<!-- <div ng-messages="sumsung-form.userSubject.$error"
ng-show="sumsung-form.userSubject.$touched || sumsung-form.$submitted">
<div ng-message="required" class="state-error"><i class="fa fa-exclamation-circle" aria-hidden="true" ng-show="submitted"></i>This field is required</div>
</div>-->
</div>
<div class="form-container">
<label class="form-label" ng-class="{ 'state-error': sumsung-form.message.$invalid && (sumsung-form.message.$touched || sumsung-form.$submitted)}">Message <span class="fa fa-asterisk" aria-hidden="true star-icon"></span></label>
<textarea class="form-input" name="userMessage" ng-model="message" rows="5"
id="message" style="border-radius:0;"
ng-required="true"
placeholder="Enter Message"></textarea>
<!-- <div ng-messages="sumsung-form.userMessage.$error"
ng-show="sumsung-form.userMessage.$touched || sumsung-form.$submitted">
<div ng-message="required" class="state-error"><i class="fa fa-exclamation-circle" aria-hidden="true"></i>This field is required</div>
<div ng-message="minlength" class="state-error">Message must be over 100 characters</div>
<div ng-message="maxlength" class="state-error">Message must not exceed 1000 characters</div>
</div>-->
<!-- <p class="error-message">Please enter more then 50 charcters.</p>-->
</div>
<div class="footer">
<button type="submit" ng-click="send('myform')" class="btn">SEND</button>
</div>
</form>
</div>
</body>
</html>
JS：
var myApp = angular.module('myApp', ['ngMessages']);
myApp.controller("myController",function($scope){
$scope.name=undefined;
$scope.showMsgs = false;
$scope.send = function(){
if ($scope[form].$valid) {
$scope.showMsgs = false;
} else {
$scope.showMsgs = true;
}
}
});
的CSS：
body{
font-size:12px;
color:#333;
font-family: 'Raleway', sans-serif;
margin:0;
padding: 0;
}
.mb15{
margin-bottom: 15px;
}
.container{
position: relative;
width: 100%;
}
#logoHeader{
width: 100%;
height:70px;
line-height: 70px;
max-height: 70px;
border-bottom: 1px solid #eee;
text-align: center;
}
#logoHeader>h1{
margin: 0 !important;
color: #1428A0;
}
#logoHeader>span{
display: inline;
position: relative;
right: -45%;
top: -60px;
font-size: x-large;
color: #ccc;
}
.emailSupportPanel{
position: relative;
width: 100%;
height: 80px;
padding: 12px 0;
background: rgba(238, 238, 238, 0.5);
box-sizing: border-box;
}
.panel-contentHeader{
margin: 0;
font-weight: bold;
}
.panel-contentHeader ~p>span{
color:#1428A0;
}
.mainContainer{
position: relative;
margin: 0 auto;
max-width: 80%;
}
.mainContainer .imaportantNote{
font-weight: bolder;
font-size: 15px;
color:#777;
}
.fa-asterisk:before {
color: red;
font-size: 8px;
vertical-align: super;
}
.form-container{
width: 100%;
height:auto;
padding-bottom: 12px;
}
.form-label{
font-weight: bold;
margin-bottom: 10px;
font-size: 15px;
display: block;
color:#000;
}
.form-input{
display: block;
width: 96%;
height: 32px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
textarea.form-input{
height: auto;
}
.error-message{
display: none;
width: 96.8%;
margin-top: 0px;
background-color: red;
color: #fff;
padding: 8px;
}
.information-form{
width: 100%;
padding-top: 15px;
position: relative;
/* height: calc(100vh - 540px); */
min-height: 344px;
}
.information-form>h3{
font-weight: bolder;
}
.left-info,.right-info{
width: 50%;
padding-top: 14px;
box-sizing: border-box;
float: left;
padding-right: 33px;
position: relative;
}
.privacy-container{
width: 100%;
height:auto;
position: relative;
}
.square-radio {
border: 1px solid black;
margin: 2px;
width: 20px;
height: 20px;
position: relative;
}
.square-radio--clicked .square-radio--content{
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
width: 16px;
height: 16px;
}
.square-radio--clicked ~.privacy-text,.square-radio ~.privacy-text{
display: inline-block;
width: 100%;
margin-left: 39px;
font-size: 14px;
position: relative;
top: -21px;
color:#000;
font-weight: bold;
}
.privacy-text a{
text-decoration: none;
color: #1428A0;
}
.product-info{
position: relative;
width: 100%;
padding-top: 20px;
box-sizing: border-box;
}
.confirmation-part{
width:48%;
display: inline-block;
}
.captcha-box{
width: 100px;
height: 45px;
border: 1px solid #333;
display: inline-block;
position: relative;
top: -39px;
left: 20px;
margin-right: 19px;
text-align: center;
}
.captcha-box.cross-box{
width: 50px;
height: 50px;
text-align: center;
}
.captcha-box .img-cross-icon{
font-size: xx-large;
padding: 7px;
}
.captcha-box h2{
color: blue;
margin-top: 11px;
letter-spacing: 4px;
font-weight: bolder;
}
.footer{
width:100%;
position: relative;
min-height: 100px;
text-align: center;
padding-top: 20px;
}
.btn{
padding: 12px 38px;
border-radius: 45px;
background-color: #1428A0;
color:#fff;
}
hr{
border-color: rgba(204, 204, 204, 0.18);
}
p{
color:#777;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #bbb;
padding: 5px;
}
.error {
border-color: red;
color:red;
}
答案 0 :(得分：1)
我最初的观察是您同时使用 ng-submit 和 ng-click 来提交表单详细信息，这会导致重复提交同一表单导致此问题。尝试使用其中之一，它应该工作正常。以下是angularjs团队的警告
警告：小心不要同时使用ngClick和ngSubmit处理程序导致“双重提交”。有关何时可以触发ngSubmit的详细讨论，请参阅表单指令文档。
以下是参考文档的链接submitting-a-form-and-preventing-the-default-action
希望有所帮助：）