I have the following form in my AngularJS app which contain hidden fields with values filled based on user selection on some inputs on the form (radio buttons...etc), when the user click on the Submit link I should route the user to an external URL while passing hidden fields just as any normal form submission. Unfortunately I can't do this as some of the hidden field values are dependent on some calculations inside a function of the view related controller (as shown below in controller code, so I was wondering is there a way I can call the controller function from this form, then the controller function post the whole form and its field? Any example is highly appreciated. Thanks.
Note I am using link instead of a button.
<form name="clientPaymentForm" id="clientPaymentForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name" ng-model="client.name">
...
...
<input type="hidden" name="amount" ng-value="order.total">
...
...
<a class="orderButton" href="javascript:{}" onclick="document.getElementById('clientPaymentForm').submit(); return false;">Order Now</a>
</fieldset>
</div>
</form>
Controller:
$scope.processOrder = function(){
//Order calculation happens here to update order.total value and can only happen after click click Order Now to place the order...
};
I guess this is a bit late, but what you want to use is the ng-click directive which will allow you to call functions defined directly on the scope.
Assuming that you've defined $scope.processOrder, change your a tag to the following:
<a class="orderButton" ng-click="processOrder()">Order Now</a>
And everything should work as hoped.
Alternatively, you could use ng-submit on the form to have it work when you press the "Enter" or "Return" key, as in:
<form name="clientPaymentForm" id="clientPaymentForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" ng-click="processOrder()">.
Related
I have an AngularJS application with HTML as below.
<form name="completeForm">
<first-step></first-step>
<second-step></second-step>
<third-step></third-step>
<fourth-step></fourth-step>
<fifth-step></fifth-step>
</form>
Form will continue to next step after validating the current step by a button click event.
Each step directive HTML is implemented through ng-form tag as below.
<first-step></first-step> => <ng-form name="firstForm"></ng-form>
<second-step></second-step> => <ng-form name="secondForm"></ng-form>
<third-step></third-step> => <ng-form name="thirdForm"></ng-form>
<fourth-step></fourth-step> => <ng-form name="fourthForm"></ng-form>
<fifth-step></fifth-step> => <ng-form name="fifthForm"></ng-form>
I want to replace one of the steps (second-step) with an implementation using Angular 5, thus making it a hybrid application.
I should be able to replace the second-step in Angular 5. The HTML related to it is as below.
<form #secondForm="ngForm">
.....
<input type="text" #email="ngModel" name="email" [(ngModel)]="$scope.email" required />
<span *ngIf="!email.valid">please enter the input</span>
...
</form>
But the validation I have implemented on this Angular 5 step is not working. It is moving to the next step without validating on the
button click event. Form is always found to be valid.
Form Controller is not recognizing the secondForm defined as
<form #secondForm="ngForm">.
I tried to replace the form tag (as form at the parent level cannot have another form within it) with div tag as below but no impact at all.
<div ngForm #secondForm="ngForm">
Please could anyone help.
I'm trying to implement validation for a form using Angular 1.1.1 and Ionic.
There are many "wallets" and the user needs to send a new "value" to each of the wallet. There's also a specified previous value of the wallet. The validation should check if all the input field are filled out and if the new value is bigger than previous.
My form (index.html):
<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl">
<div class="row" ng-repeat="wallet in wallets">
<div class="col item item-input-inset">
<label class="item-input-wrapper item-text-wrap">
<input name="wallet_{{wallet.id}}" type="number" ng-model="wallet.value" type="text" required/>
</label>
<span ng-show="myForm.wallet_{{item.id}}.$error.required">!!!</span>
</div>
<div class="col item">{{ wallet.previous }}</div>
</div>
<button class="button" type="submit">Submit</button>
</form>
It results in always showing "!!!" error for empty input even if the user haven't already submitted the form. I tried to use $scope.myForm.submitted=true; in the controller but the problem is it reaches the controller only if all the fields are filled out.
My controller (values.js):
'Use Strict';
angular.module('App')
.controller('valuesCtrl', function($scope, $localStorage, UserService, $state) {
$scope.sendValues = function(wallets){
debugger;
...
})
Can anyone help me to figure out why I can't see the debugger window if not all the fields are with info?
Can you suggest how to make a custom validation? (new value should be bigger than previous)
It results in always showing "!!!" error for empty input even if the user haven't already submitted the form?
Your ng-show should be
ng-show="myForm.$submitted==true && myForm.wallet_{{item.id}}.$error.required"
and form should be have novalidate attribute if you want custom validation
<form name="myForm" ng-submit="sendValues(wallets)" novalidate>
otherwise it will do default html validation
I tried to use $scope.myForm.submitted=true; in the controller but the problem is it reaches the controller only if all the fields are filled out
Its because ng-submit will validate for true condition($valid==true) for every form control element .
If it is filled and valid data then only form $valid flag is set to true otherwise not.In case $valid==true,you will able to submit the form and function in controller get fired
you can use
<input type="submit" ng-click="sendValues(wallets)" value="Save" />
if you want to submit the form without validation and want to do validation in controller
You can read more from angular#form
AngularJS disables (cannot submit) forms that do not have a specific action set:
<form action="">
when you create a controller. It does not have this issue when creating directive or factories.
You can see this in a plunk here:
http://plnkr.co/edit/gWFRMKGO3FzZtOgs4VmW?p=preview
Form is defined as:
<form action="" method="post">
If you delete the starting on line 6, you will be able to submit the form.
A simple solution is to define the action, but I'd rather not do this, as it is not necessary.
UPDATE
Some details can be found here on trying to get this change in Angular:
https://github.com/angular/angular.js/pull/3776
You can use ng-submit to handle that.
<form ng-submit="submitForm()" method="post">
<input name="test" value="11111111" />
<button type="submit" name="submit" value="1">Send</button>
<input type="submit" name="submit2" value="Send2" />
</form>
That way the form will submit normally and you must actually send the data on your submitForm function (just an example name).
Here is a quick plnkr: http://plnkr.co/edit/lwWVG0CDHSGMtMU0B8Nj?p=preview
Notice that you can submit using the buttons and also by pressing enter on the field. I hope that's what you've been asking for.
Thanks
What is the simplest way to submit a form directly to a controller?
I have a form like:
<form name="searchForm">
<input type="text" name="query" ng-model="query">
<button type="submit">Search</button>
</form>
And a controller that handles routes for #/search?query=xxxx.
How can I make it so when the form is submitted it's equivalent to a user clicking a link with a href="#/search?query=xxxx"? I would think there would be something like ng-action="#/search" but I haven't found anything that simple.
Please see below points to solve your problem.
Use ng-submit="SaveData(pass your model value here)" as attribute of form tag.
Create SaveData scope method in your controller JS.
Create URL and use window.location to redirect.
I am trying to use AngularJS Validation in order to validate a simple form, however I was having troubles getting my ng-class to show the correct class based off whether or not the input was dirty or not. Then when I looked at the actual HTML of the page, the <form> tags are not even in the document at all!
<form novalidate name="infoForm">
<p>To start, provide some basic information about the project.</p>
<ul class="ulFormGeneral">
<li>
<label>Company name</label>
<input id="CompanyName" ng-class="{ cvError : infoForm.CompanyName.$dirty }" ng-model="form.CompanyName" name="CompanyName" maxlength="100" type="text" required />
</li>
</ul>
</form>
I want the cvError class to be added to this input if it is dirty, but nothing happens when I look at this in the browser. What am I doing wrong that is causing the <form> to just leave the DOM and then not work with my Angular expressions?
Welcome to the Angular world, no forms required! Here, the model is king. It looks like the problem is the ng-model and ng-class are point at different places.
Point everything at form.CompanyName (assuming that is the model name is form in the $scope):
<input id="CompanyName" ng-class="{ cvError : form.CompanyName.$dirty }" ng-model="form.CompanyName" name="CompanyName" maxlength="100" type="text" required />
The ng-model binds to the $scope. When you change the input field, it is automatically updated in the $scope. No form is needed or hitting a submit button to get the data. The $scope is updated with each key stroke.
The controller should do the work of figuring out what to do with the changes in the model. For example, you can add an ng-click to a button that fires a function defined by the controller to save the model.