I want to reset all the form fields on successful AMP form submission as I am allowing user for multiple data entry.
Manually I can do it by managing states of each field through amp-bind but I want to reset fields in one go. Is there any function like form.reset present which I can call on form submit success event?
You can use the clear action to reset all fields in a form:
<form id=myForm>
<input>
</form>
<button on="tap:myForm.clear">Clear inputs</button>
You can use submit-success.
<form id=myForm on=submit-success: myForm.clear>
<input name=name value= />
<button>Submit form</button>
</form>
Related
I have scenario where I am changing the input text, i have multiple forms and one input within each form so i want to get the current form name whose input i am changing. how to do this in angular 2??
Below is my code for child component
<form #form1="NgForm" novalidate>
<input id="phoneNumber" type="text" placeholder="phoneNumber" class="validate"/>
</form>
<form #form2="NgForm" novalidate>
<input id="mobileNumber" type="text" placeholder="mobileNumber" class="validate"/>
</form>
Now suppose i am adding mobile number i want its form name. How to do this angular 2?? This is i want to access in parent component I am accessing the child component form using #ViewChildren and i am able to access the form manually but i want access dynamically with respect to the input i am accessing ..
In Angular you have two choices use dynamic forms or template driven forms,
your choice is dynamic forms using #form1="NgForm"
Angular dynamic-form
In your code you forgot the '[formControlName]' directive on the inputs, when you have those you can access the form from your component code like:
Component:
this.form1.valueChanges.subscribe(data => console.log('Form changes', data));
HTML:
<form #form2="NgForm" novalidate>
<input [formControlName]="mobileNumber" type="text" placeholder="mobileNumber" class="validate"/>
</form>
I am able to get the current form valid invalid in parent form by passing index as input to child form and emitting the same in parent form...
I have this situation in which I show 1 form in two steps. So to proceed to the second part of the form you have to click on a button. But before moving on I would like to perform form validation (all required fields need to be filled in). But because this is a normal button, the whole submit magic is not triggered and the validation does not happen. So the question I'm interested in is how can I trigger form validation in my controller ? It would even be better to trigger validation for specific fields. Just to give an idea, the form looks like
<form name="form" submit="save()">
<section id="step1">
<label for="username" required>Username</label>
<input type="text" name="username" ng-model="user.username" required />
.....
<button ng-click="proceed()">Proceed</button>
</section>
<section id="step2">
<label ...></label>
<input...>
....
<button type="submit">Save</button>
</section>
</form>
Also, I don't want to opt for disabling the button until all required fields are valid.
Take a look at the ng-form directive. It allows nesting forms (actually not HTML <form>s, but Angular NgFormControllers). So you can split your one form, used for posting to the server, into two logical forms, used for independent validation:
<form submit="save()">
<div ng-form="form1">
...controls...
<button ng-click="proceed()"
ng-disabled="form1.$invalid">Proceed</button>
</div>
<div ng-form="form2">
...controls...
<button type="submit"
ng-disabled="form2.$invalid || form1.$invalid">Submit</button>
</div>
</form>
You can access the $valid property from your controller. Something like this could work.
$scope.proceed = function(){
if($scope.form.username.$valid){
//username is valid we may proceed to the next step
}
};
<button ng-click="proceed()">Proceed</button>
Replace To :
<button ng-click="proceed()" ng-disabled="form.$invalid">Proceed</button>
Button will not visible button until all required fields are valid.
DEMO
In my Angular app I'm having a form bound to a model. The form does not have fields for all model properties.
When the user hits the submit button I want to post the form the traditional way, not as AJAX request (I have to deal with an already existing server side script).
That basically works if I add a action to the form. But it obviously only submits the form with its present fields as it is, not the whole model just like it's done when using the $http service.
And additionally it does not create name attributes.
How could I submit the form the old-school way with the full model data? Do I have to create the missing form fields on my own or is there a way to let Angular do that for me?
<script>
angular.module('foobar', []).controller('ContentCtrl', ['$scope', function($scope) {
$scope.content = {
'title': 'Foo',
'subtitle': 'Bar',
'text': 'desc' // this field is missing in the form itself and therefore is not submitted
};
}]);
</script>
<form action="http://postcatcher.in/catchers/521c6510429f840200000169" method="post" ng-controller="ContentCtrl">
<input type="text" name="est" ng-model="content.title" value="asdf">
<input type="text" ng-model="content.subtitle">
<button>submit</button>
see post result
</form>
Here's a plunker: http://plnkr.co/edit/5XYGH9hTe7cpchSFWbTK
Angular doesn't do anything special when you have a form with an action defined. It's pure html form submission with exactly the fields that are defined.
Normally you would use:
<input type="hidden" ng-model="content.desc">
but angular currently (1.2.0rc1) still doesn't support ng-model binding to hidden inputs.
The workaround is this:
<input type="text" name="text" ng-model="content.text" ng-hide="true">
I'm building a form that generates an invitation when submitted. The invitation has several fields, one of which is an email address input with an 'add' button, which when clicked should add that address to a list of email addresses that should receive the invite.
This can be done with a single form, however if the user hits the enter key while typing an email then it triggers submit on the whole form. I'd like to have the enter key result - when the email input field is focused - have the same effect as clicking the 'add' button. I expected that the proper way to solve this would be to nest an email entry form within the invitation form, something like this:
<ng-form ng-submit="sendInvite()">
<input type="text" placeholder="Title" ng-model="invitation.title"/>
<ng-form ng-submit="addInvitee()">
<input type="email" placeholder="Title" ng-model="inviteeEmail"/>
<button class="btn" type="submit">add</button>
</ng-form>
<button class="btn" type="submit">Send</button>
</ng-form>
With the following javascript in the controller:
$scope.addInvitee = function() {
$scope.invitation.emails.push($scope.inviteeEmail);
$scope.inviteeEmail = '';
}
$scope.sendInvite = function() {
//code to send out the invitation
}
My problem is that having nested the forms (and in doing so converted from <form> to <ng-form>, submitting either one no longer works.
Plunker here
I've similar requirement - wizard driven multi-step form. When user clicks 'Next' button, I've to validate the current step form.
We can trigger validation by firing '$validate' event on the scope bound to the form.
isFormValid = function($scope, ngForm) {
$scope.$broadcast('$validate');
if(! ngForm.$invalid) {
return true;
}
}
When ever I want to check if the form values are correct, I'll call isFormValid with the scope & form instance.
Working code: Plunker link
It is also useful to have few additional logic in isFormValid (included in the above Plunker) which makes the form & form fields $dirty as we would be showing/hiding validation messages based on their $dirty state.
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])
-- form docs
<ng-form>
<input type="text" placeholder="Title" ng-model="invitation.title"><br>
<ng-form>
<input type="email" placeholder="Title" ng-model="inviteeEmail">
<button class="btn" ng-click="addInvitee()">add</button><br>
</ng-form>
<ul class="unstyled">
<li ng-repeat="invitee in invitation.invitees">
<span>{{invitee.email}}</span>
</li>
</ul>
<button class="btn" ng-click="sendInvite()">Send</button>
</ng-form>
Plunker
When the form is submitted, you can find all nested forms using some thing like below
forms = []
forms.push(form)
nestedForms = _.filter(_.values(form), (input) -> (input instanceof form.constructor) and (input not in forms))
Here, form is the outer form controller which was submitted. You can hook this code on ur onsubmit, and find all nested forms and do whatever you have to.
Note: This is coffeescript
Is it possible to add groovy code to grails form?
I have a form:
<g:uploadForm controller="document" action="save" method="post">
<input type="file" name="dataFile" />
<input type="submit" id="addDocument" value="<g:message code=messages.document.save"/>">
</g:uploadForm>
I need to add code that puts the URL segments to the parameter value.
You're using a POST (because it's an upload and that's correct) method in your form, so you will not see the params in the URL. The params will get there (to the controller you redirect the request to), but won't show at the URL. In any case, you should go with hidden inputs in your form. Like:
<input type="hidden" id="foo" value=""/>
In your controller, you can get the parameters set in your input hidden fields simply by accessing the params map:
params.foo
Use hidden fields inside the form.