Within my project, I have implemented ui-view with the following structure:
<main class="content">
<div class="inner" ng-controller="OrderPageController">
<div ui-view="main-info"></div>
<div ui-view="comments"></div>
<div ui-view="bids-list"></div>
<div ui-view="add-bid"></div>
</div>
</main>
In the add-bid view:
<form name="newbidform" novalidate ng-submit="postNewBid(newbidform);">
<input type="text" ng-model="newbid.bid" required>
<input type="submit">
</form>
When submitting the form, I encounter an issue where all of the required inputs are considered undefined. Here is how I attempt to check for validity:
$scope.postNewBid = function(form) {
console.log(form) // $valid and $invalid always undefined
console.log($scope.newbidform) // always undefined
// check validity before send
if (!form.$valid) {
angular.forEach(form.$error, function (field) {
angular.forEach(field, function(errorField){
errorField.$setTouched();
})
});
$scope.failedSubmit = true;
return false;
} else {
$scope.failedSubmit = false;
}
// other things if form is valid
The issue arises from the form always being undefined, whether looking at $valid/$invalid attributes or otherwise. I have tried various approaches such as using formName as a parameter in the function, setting $scope.formName variable (always undefined), and defining the controller twice - once within the controller itself on the form element:
<form name="newbidform" novalidate ng-submit="postNewBid();" ng-controller="OrderPageController">
While this workaround functions, it restricts access to other variables in the controller. Is there a proper way to retrieve form state within a controller in AngularJS? Thank you.