I'm validating & submitting a simple form using angularjs, the form seems to do some initial validation but the submit button does not log or executes the angular function defined to it. What am I doing wrong?
Main app.js
var quora=angular.module("quora-app",['q-controller-1','ngRoute']);
quora.config(function ($routeProvider) {
$routeProvider
.when('/edit',{
templateUrl:'../resources/views/forms/edit.blade.php',
controller:'q-master-1'
});
});
Controller
angular.module("q-controller-1",[])
.controller("q-master-1",['$scope',function ($scope) {
$scope.update=function(value,text) {
$scope.id=value;
$scope.putText=text;
}
$scope.validate=function(updateInfo) {
console.log(updateInfo);
if($scope.update.$valid) {
$scope.test1=$scope.id
$scope.test2=$scope.updateInfo.qText
}
else
console.log("no")
}
}]);
edit.blade.php
<form name="update" method="POST" action="edit.blade.php" ng-submit="validate(updateInfo);" onsubmit="return false;" >
<b ng-show="update.question.$dirty && update.question.$error.required">Invalid</b>
<input type="text" name="question" ng-required="true" ng-minlength="3" ng-value="putText" ng-model="updateInfo.qText">
<input type="submit" name="submit" value="Update" ng-show="update.$valid">
</form>
File where execution initiates
@{{ test1 }}
@{{ test2 }}
@section('list-questions-answers')
<div ng-view></div>
<ul>
@foreach($listQuestionsAnswers as $q)
<li>
<a href="{{url('/questions/'.$q->question_id)}}">{{ $q->question }}</a>
Options: <a href="#edit" ng-click="update({{ $q->question_id }},'{{ $q->question }}')">Edit</a>
</li>
@foreach($q->answers as $a)
<ul>
<li>{{ $a->answer }}</li>
</ul>
@endforeach
@endforeach
</ul>
@endsection
The ng-view
is being loaded, but the submit button is not working or logging anything!
As mentioned in comments the issue was with action
attribute in the form tags as it works well with the native forms but when working with Angular that behaviour doesn't comply.
As angular is trying to call the ng-submit function but the action method is trying to process the request URL.
Alternative approach:
Instead remove ng-submit
and on submit
, action
post
and all that , and just add ng-click
to the submit button and use ng-disabled
to disable submit button until the form is valid.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.