I have already existing forms on admin panel and i've wrapped it to <div ng-app="app" ng-controller="app-nav"> and after that all forms stopped to work...
How can i disable default AngularJS behaviour to make all forms get back to work again?
https://jsfiddle.net/24sufpvn/
Here AngularJS prevents default form submission.
Angular.js prevent the native <form> submission because it's missing a valid action attribute.
I have edited your fiddle and added the missing action attribute, and now the form submits correctly:
<div ng-app ng-controller="LoginController">
<form method="post" action="https://formsubmit.co/your#email.com">
<input type="submit" name="s" value="Submit">
</form>
</div>
Working fiddle:
https://jsfiddle.net/SlumDog1/kg6m5r7v/11/
I didn't find any solution except editing angular.js:
Need to replace line:
if (!('action' in attr)) {
to this:
if (false) {
Related
I have a form with a URL action set. When form.$invalid is true (or form.$valid is false) I want to make the form NOT submit to the URL and show the invalid form errors in the UI.
In my particular case here, I'm using a framework that provides an Angular Controller for me, where I do not have the ability to add/modify functions on it! I need to be able to do this only by making changes to the template.
Here's what I have so far (simplified)
<form novalidate
name="form"
method="post"
ng-attr-action="{{model.loginUrl}}"
ng-submit="return form.$valid">
<div class="form-group" ng-class="{'has-danger' : form.$submitted && form.username.$invalid}">
<input type="text"
name="username"
required
class="form-control"
ng-model="model.username">
<div class="form-control-feedback" ng-if="form.$submitted && form.username.$invalid">
A username is required!
</div>
</div>
<button type="submit">Sign In</button>
</form>
A lot of what I've seen online says to do something like
ng-submit="form.$valid && model.myCustomSubmitFn()"
but that doesn't use a URL form action, and I do not have the ability to add a custom function with this framework
Angular passes the $event in the context of ng-submit. So you call $event.preventDefault(). Your ng-submit would change to
<form novalidate
name="form"
ng-attr-action="{{model.loginUrl}}"
ng-submit="form.$invalid && $event.preventDefault();form.$submitted=true;"
>
See plunker.
THE BELOW IS AN ANSWER THAT WILL NOT WORK FOR THIS QUESTION-- I AM ONLY LEAVING IT HERE SO NO ONE ELSE TRIES THIS AS THE SOLUTION
Might ngDisabled work for you in this case?
<button type="submit" ng-disabled="form.$invalid">Sign In</button>
This is certainly a tricky situation since you only have access to edit the template. I'm not seeing an "angular" way to solve your problem with being able to edit the controller. Luckily though, this can be solved in the template alone with some vanilla JavaScript.
Try adding an onclick event handler to your button that prevents form submission if your form's input(s) do not match your validation criteria.
<button type="submit" onclick="if(form.username.value.length < 1) { event.preventDefault(); }">Sign In</button>
I'm not incredibly proud of this solution and it will certainly get dirty if you have more than one input in your form, however it looks like the only work-around for your unfortunate situation.
Reactive Forms
If you wanted to declair this in the HTML of your reactive form you can simply do something like this:...
<form [formGroup]="formGroupVar" (ngSubmit)="formGroupVar.valid ?
submitFunc() : null" novalidate>...</form>
So what you are doing is making your (ngSubmit) a ternary operator, the comparison would be your formGroupVar.valid, when true, you would execute your submitFunc() else null.
NOTE: There is no reason why you wouldn't just do this in your TypeScript file, it would make sense to keep your HTML as 'clean' as possible, but that doesn't mean it is not possible!
Is the a way to make a textarea ui-tinymce part of and an editable-form?.
I found a workaround by making ng-model of the editable-textarea and textarea ui-tinymce the same and then I hide the editable-textarea.
<form
onaftersave="onsave({$data:$data})"
editable-form
name="forms.{{formName}}"
>
<textarea ui-tinymce="tinymceOptions"
name="desccomp"
ng-model="item.desccomp">
</textarea>
<div
e-ng-show="false"
editable-textarea="item.desccomp"
e-name="desccomp"
>
</div>
</form>
Actually, TinyMCE already has inline abilities
https://www.tinymce.com/docs/demo/inline/
I'm facing same issue and thinking I'm gonna use only tinyMCE (with angular-ui-tinymce) leaving xeditable for this case).
<body ng-app="debounceExample">
<div ng-controller="ExampleController">
<form name="form" ng-submit="go()" novalidate>
<label>Name:</label>
<input name="input" type="text" required ng-model="user" /><br />
<div ng-messages="form.input.$error" ng-show="form.input.$touched">
<div ng-message="required">required</div>
</div>
test
</form>
</div>
</body>
Please focus input field and click on anchor tag. You can see, the anchor tag click is not working as the input field validation is triggered on blur. I am seeing the issue is due to using form.input.$touched in ng-show. I have created a plunker to reproduce the issue.
http://plnkr.co/edit/0NMhxP18EhBjLyKrJQV5?p=preview
To reproduce the issue, first focus input field and then click on anchor tag.
If you change the ng-show to
ng-show="!form.input.$pristine"
You may get the behaviour that you want.
Here is an updated plnkr.
You can remove the href='' from your anchor tag. It's also working fine even in your plunkr so I'm not sure what is the actual problem. A form has its own scope, so if you try something like
<a ng-click='myVar = !myVar'>click me</a>
and you set myVar=false outside the form it won't work. You would need $parent.myVar, but that isn't the case here.
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
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()">.