0
私はここで連絡フォームを作成しています。すべての名前、メールアドレス、電話番号のバリデーションがうまくいきます。ボタンをクリックして提出ボタンをクリックするとここでは動作しません。私はvalidationのためにngMessageディレクティブを使います。私はちょうどangularjs.Soの学習を始めます。お問い合わせフォームのバリデーションsubmitは角度jsを使用していません
これは私のコードです。
var app = angular.module('myApp', ['ngMessages']);
app.controller('nameController', function ($scope) {
$scope.submitForm = function() {
alert('Form submitted');
};
});body { font: 12px Arial, Helvetica, sans-serif;}
.formbg {
width: 50%;
margin: 0 auto;
padding: 20px 20px 20px 20px;
color: #444444;
background: #4cb0db;
}
.formbg label {
display: block;
margin: 0px 0px 5px;
}
.formbg input[type="text"],
.formbg input[type="email"],
.formbg input[type="number"] {
width: 60%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
}
div{
display:inline-block;
vertical-align:top;
color: red;
margin-top: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
<body ng-app="myApp">
<form name="Testform" ng-controller="nameController" class="formbg">
<label>First Name:</label>
<input type="text" name="userName" ng-model="firstName" required />
<div ng-messages="Testform.userName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="email" required />
<div ng-messages="Testform.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="number" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="Testform.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
\t
\t <button type="submit"
ng-submit="Testform.$valid && submitForm()">Submit</button>
</form>
</body>