I'd like to display a form containing validation and a submit button.
I'm new with Angular, and I'm not intireli sure how to get started.
- I'd like to get a direction of what to do or perhaps some initial
indication, of what Controller to use.
JS:
myApp.controller('jsonCtrl', function($scope, $http) {
$http.get('form.json').success(function(result) {
});
HTML:
<form ng-controller="jsonCtrl">
<fieldset>
<div demo-directive ng-repeat="field in fields">
</div>
</fieldset>
</form>
Plunker
I'd like to display a form containing validation and a submit button.
You just need to write simple HTML for this
now, as I'm new with Angular, I apologise about that, I'd like to get a direction of what to do or perhaps some initial indication, of what Controller to use
Generally people bind a specific section to a specific controller and, obviously that is going to be the case for you.
In the controller you'll have two methods which will address to submit and validate buttons.
<my-form>
<form ng-submit="submitForm()" novalidate>
<fieldset>
<div my-directive ng-repeat="field in fields">
</div>
</fieldset>
<button type = "button" ng-click="onValidate(); return false;"> Validate</button>
<button type="submit"> Submit </button>
</form>
</my-form>
Now, the main div or body etc. which is parent for the code written above and is linked to a specific controller will have two functions to address to onValidate() & submitForm()
Related
I am in a situation where I have one form inside another form. What I'm trying to achieve is when I submit the parent form, it is submitted to a defined URL however, when I submit the child form, it is submitted to a different URL.
I know its not possible in html to use nested forms but can anyone suggest any trick or tip by using JQuery or JavaScript so that submitting the child form disables the parent form?
Below is my HTML Structure:
<form action="{{url('checkout')}}" class="mt-5 check-out-form" method="post">
<form action="{{url('user/address')}}" class="mt-5 check-out-form" method="post">
<input type="submit" value="Update Address">
</form>
<input type="submit" value="CheckOut">
You should not attempt to nest forms within each other. The HTML standards state this.
"There can be several forms in a single document, but the FORM element can't be nested."
If you're comfortable with it, simply have two different forms for the different functionality or a single form that does it all.
Bottom line is there is never a logical reason to nest a form.
I think you should create a model outside the main form and call it
Try this
<form action="{{url('checkout')}}" class="mt-5 check-out-form" method="post">
<form action="{{url('user/address')}}" class="mt-5 check-out-form" method="post">
<button onclick="$(this).closest('form').submit()">Send 1</button>
</form>
<button onclick="$(this).closest('form').submit()">Send 2</button>
You can find a Plunker demonstrating the Problem here: Plunker
I want to use nested forms in AngularJS. To do that it seems like ng-form is the way to go and i tried the following:
<form novalidate ng-submit="ctrl.form1()">
<button type=submit>Form1</button>
<ng-form novalidate ng-submit="ctrl.form2()">
<button type=submit>Form2</button>
</ng-form>
</form>
While I expected the inner submit to execute the submit-action of the inner form, instead the method form1() is called everytime when i click either button.
Why does it behave like this and how can i achieve the expected result?
You can use one of the following two ways to specify what javascript method should be called when a form is submitted:
* ngSubmit directive on the form element
* ngClick directive on the first button or input field of type submit (input[type=submit])
Visit Angular Forms
<form novalidate>
<button type=submit ng-click="ctrl.form1()">Form1</button>
<ng-form novalidate >
<button type=submit ng-click="ctrl.form2()">Form2</button>
</ng-form>
</form>
see working plunker here
I am trying to use ng-include and ng-submit for the first time. I have been trying to follow this SO question Why form undefined inside ng-include when checking $pristine or $setDirty()?. Here is how I have structured my index.html:
<div id="info" ">
<div ng-include src="'standard.html'" ng-controller="FormController as formcontrol">
</div>
</div>
In my standard.html
<uib-accordion close-others="oneAtATime"> <uib-accordion-group
heading="{{person.personID}}" ng-repeat="person in people.info">
<form name="formHolder.personForm>
<div class ="form-group">
<input type="text" name="name"
class="form-control"
ng-model="person.name"
ng-readonly="person.name">
</div>
----------
</form>
<button type="button" ng-submit="updateStatus(person.personID)"
class="btn btn-success btn-lg btn-block">Update</button>
Similarly, I have 20 more fields, of which only 4 are editable fields. Once user click update button, I want to get all the form data into an ajax call which is being made within the FormController.
In my FormController:
(function() {
angular.module('peopleInfo2').controller('FormController', ['$http','$scope', function($http, $scope) {
$scope.formHolder = {};
$scope.updateStatus =function (personID) {
console.log($scope.formHolder);
};
}]);
})();
Questions:
a) form does not get invoked when I use ng-submit, but it does when I use ng-click. I have read the differences between them and everywhere they say that I should use ng-submit. What am I doing wrong?
b) Currently, if I use ng-click then the data in $scope.formHolder is a personForm object, which has my data, all in object form within updateStatus function. Why am I not able to access them like deviceForm.personID? Why does it give me values like $modelValue and $viewValue instead of just the value bounded to ng-model in form?
c) If I use ng-click, then whenever form is submitted. it just picks up value from the last entry in the person.info array. Meaning that no matter what, only last value read by ng-repeat is accessible when trying to read values of ng-model. Why?
I will appreciate any help. I am close to get this thing, but I want to make sure that I understand things correctly as it will be used throughout the project. I was trying to use a custom directive earlier, but was suggested that that approach is not correct to render web forms and should use ng-include. Thank You.
There are some problems in your code but as the first one I think you should use ng-submit directive on your form tag. like this:
<form name="{{formHolder.personForm}}" ng-submit="updateStatus(person.personID)">...</form>
with an <input type="submit" class="btn btn-success btn-lg btn-block"/> for the submit button inside your form.
But why don't you use the ng-repeat inside your form and pass the whole array to your submit function?
I have been given a task by my boss who still likes things the old way... have a HTML page/view and submitting a form to a PHP page server side. We have introduced AngularJS to his app and he has the following code in his page:
<form name="rForm" id="rForm" action="demo_form.php" method="post">
<input type="hidden" name="quantity" id="reservationQuantity" ng-value="selectedQuantity"/>
<input type="hidden" name="date" id="reservationDate" ng-value="selectedDate"/>
<input type="hidden" name="time" id="reservationTime" ng-value="selectedTime"/>
<input type="hidden" name="mId" id="mID" value="{{ $merchant->id }}" ng-value="mId"/>
</form>
<button>Go to next page...</button>
Now he wishes for us to have a link or button to submit this form which is outside the form, I believe that we should control all of this is a controller with all post functionality being handled by an injected / separate $http service. He doesn't believe me and says he knows best and I should just handle submitting the form like so
<button onclick="$('#reservationForm').submit();">Go to next page...</button>
I don't like this... however he pays the wages. Is there some way I can submit the form/page from my Angular controller and remove all that horrible jQuery code? Something like this (this won't work, I am just using this for visual purposes)
<button ng-click="ng-submit()">Go to next page...</button>
... and am I right saying that his method is bad practice and if we are going to submit to the server by pushing the page there's no point in us using an MVC framework.
Yes you can submit form through your Angular Controller. For this all you have to do is to call controller function in your ng-click like this:
<button ng-click="submit()">Go to next page...</button>
where submit() is your controller function. One more thing you need to assign ng-model to all form fields to access them in controller.
this bites me too, like many others I have a simple ng-form (:
cleared for bravity) in a partial:
<form ng-submit="functionName()">
<input type="text" class="postField" ng-model="model.text" required ng-maxlength=200 />
<button class="postBT" ng-click="functionName()" ng-class="BToverclass" ng-mouseover="BToverclass = 'overShadow'" ng-mouseleave="BToverclass=''">Post</button>
</div>
</form>
for some reason every form submit, we get 2 posts to the controller, with all the data doubled. I checked and the specific controller doesn't appear in the html, but only in the route. Any idea what I'm missing?
Thanks!
You have both an ng-click() calling functionName() and a call to it from ng-submit. Each results in a call to your function. You only want the submit one.
FYI, you also have a </div> with no opening <div> for it to close.
Here's working code:
<form ng-submit="functionName()">
<input type="text" class="postField" ng-model="model.text" required ng-maxlength=200 />
<button class="postBT" ng-class="BToverclass" ng-mouseover="BToverclass = 'overShadow'" ng-mouseleave="BToverclass=''">Post</button>
</form>