私はangularjsに比較的慣れていません。
フォームを送信しようとすると、ng submit がトリガーされません。また、 $scope.user にアクセスできないため、サーバーに投稿できません。何が悪いのかわからない！
<div ng-controller="contactController">
<form name="myForm" class="form-horizontal" role="form" ng-submit="submit()">
<div class="form-group">
<label for="company" class="col-md-4 control-label">Company Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="company" placeholder="Company Name" ng-model="user.company" required> </div>
</div>
<div class="form-group">
<label for="firstName" class="col-md-4 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="firstName" placeholder="First Name" ng-model="user.firstname" required> </div>
</div>
<div class="form-group">
<label for="lastName" class="col-md-4 control-label">Last Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="lastName" placeholder="Last Name" ng-model="user.lastname" required> </div>
</div>
<div class="form-group" ng-class="{'has-error': myForm.phone.$error.number}">
<label for="tel" class="col-md-4 control-label">Phone Number</label>
<div class="col-md-4">
<input type="number" class="form-control" id="phone" placeholder="Phone Number" ng-minlength="10" ng-maxlength="10" ng-model="user.phone" ng-required="true" name="phone"> <span class="help-block" ng-show="myForm.phone.$error.required ||
myForm.phone.$error.number">
Valid phone number is required
</span> <span class="help-block" ng-show="((myForm.phone.$error.minlength ||
myForm.phone.$error.maxlength) &&
myForm.phone.$dirty) ">
phone number should be 10 digits
</span> </div>
</div>
<div class="form-group">
<label for="email" class="col-md-4 control-label">Email</label>
<div class="col-md-4">
<input type="email" class="form-control" id="email" placeholder="Email" ng-model="user.email" name="input" required> <span class="error" ng-show="myForm.input.$error.required">
Required!</span> <span class="error" ng-show="myForm.input.$error.email">
Not valid email!</span> </div>
</div>
<div class="form-group">
<label for="comments" class="col-md-4 control-label">Comments</label>
<div class="col-md-4">
<textarea id="text" class="form-control" placeholder="Comments" cols=10 ng-model="user.comments"></textarea>
</div>
</div>
<!--<div class="form-group">
<div class="g-recaptcha pull-right" data-sitekey=""></div></div>-->
<div class="form-group">
<div class="col-md-4">
<button type="submit" class="btn btn-success" ng-click="reset()">Submit</button>
</div>
</div>
</form>
</div>
私のコントローラー:
myApp.controller('contactController', ['$scope', '$http', function ($scope, $http) {
//$.getScript("https://www.google.com/recaptcha/api.js");
var user = {
"company": ""
, "firstname": ""
, "lastname": ""
, "phone": ""
, "email": ""
, "comments": ""
};
$scope.submit = function () {
console.log($scope.user);
$http({
method: 'POST'
, url: '/contactUs'
, data: $scope.user, //forms user object
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function (data) {
console.log('Got a response');
$scope.reset;
}).error(function (data) {
console.log("error detected");
});
}
$scope.reset = function () {
$scope.user = angular.copy(user);
$scope.myForm.$setPristine();
$scope.myForm.$setUntouched();
}
}]);