I have created the following form using Polymer and Aurelia.
<form is="iron-form" id="frmLogOn">
<paper-input value.bind="endisableform()" id="txtInput" ...></paper-input>
<paper-button id="btnLogOn">Log On</paper-button>
</form>
In the viewmodel I have a method called endisableform() that is being called.
I want to validate a button on the form using frmLogOn.validate() but the viewmodel does not know about the form frmLogOn.
The validate method is provided by the iron-form element.
What am I doing wrong?
Thanks
Bob
I don't quite understand validating a button on a form (which can't be manipulated) but here is how you can give your view-model a nice reference to your form -
<form is="iron-form" id="frmLogOn" ref="frmLogOn">
<paper-input value.bind="endisableform()" id="txtInput" ...></paper-input>
<paper-button id="btnLogOn">Log On</paper-button>
</form>
Then in your view-model -
export class MyViewModel {
endisableform() {
if (this.frmLogOn.something) {
console.log('something was ok');
}
}
}
Related
I have one form template driven i am handling it using id like #firstname and then using ngModel.so basically i want once the code gets validated it should let the button know to get enabled or diabled which is present outside the component.
Note: i am not using form tag here
Using form
If your component has a template variable
<form #form="ngForm">
...
</form>`
You can get it (and expose as public property of your component)
using ViewChild
#ViewChild('form') form:NgForm
Now in your parent, can access to the form if you access to the
child
<app-child #child ></app-child>
<button (click)="submit(child.form.form)">submit</button>
submit(form:FormGroup)
{
if (form.valid)
this.result=form.value;
else
this.result="Invalid form"
}
Using simple control
<input name="name" [(ngModel)]="name" #nameID="ngModel" required>
The ViewChild
#ViewChild('nameID') control:FormControl
Your parent like
<child-control #childControl></child-control>
<button (click)="submitControl(childControl.control)">submit</button>
submitControl(control:FormControl)
{
if (control.valid)
this.result=control.value;
else
this.result="Invalid control"
}
A stackblitz
I have a form in Angular that has two buttons tags in it. One button submits the form on ng-click. The other button is purely for navigation using ng-click. However, when this second button is clicked, AngularJS is causing a page refresh which triggers a 404. I’ve dropped a breakpoint in the function and it is triggering my function. If I do any of the following, it stops:
If I remove the ng-click, the button doesn’t cause a page refresh.
If I comment out the code in the function, it doesn’t cause a page refresh.
If I change the button tag to an anchor tag (<a>) with href="", then it doesn’t cause a refresh.
The latter seems like the simplest workaround, but why is AngularJS even running any code after my function that causes the page to reload? Seems like a bug.
Here is the form:
<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
<fieldset>
<div class="control-group">
<label class="control-label" for="passwordButton">Password</label>
<div class="controls">
<button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
</div>
</div>
<div class="buttonBar">
<button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
</div>
</fieldset>
</form>
Here is the controller method:
$scope.showChangePassword = function() {
$scope.selectedLink = "changePassword";
};
If you have a look at the W3C specification, it would seem like the obvious thing to try is to mark your button elements with type='button' when you don't want them to submit.
The thing to note in particular is where it says
A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit"
You can try to prevent default handler:
html:
<button ng-click="saveUser($event)">
js:
$scope.saveUser = function (event) {
event.preventDefault();
// your code
}
You should declare the attribute ng-submit={expression} in your <form> tag.
From the ngSubmit docs
http://docs.angularjs.org/api/ng.directive:ngSubmit
Enables binding angular expressions to onsubmit events.
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page).
I use directive to prevent default behaviour:
module.directive('preventDefault', function() {
return function(scope, element, attrs) {
angular.element(element).bind('click', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
});
And then, in html:
<button class="secondaryButton" prevent-default>Secondary action</button>
This directive can also be used with <a> and all other tags
You can keep <button type="submit">, but must remove the attribute action="" of <form>.
I wonder why nobody proposed the possibly simplest solution:
don't use a <form>
A <whatever ng-form> does IMHO a better job and without an HTML form, there's nothing to be submitted by the browser itself. Which is exactly the right behavior when using angular.
Add action to your form.
<form action="#">
This answer may not be directly related to the question. It's just for the case when you submit the form using scripts.
According to ng-submit code
var handleFormSubmission = function(event) {
scope.$apply(function() {
controller.$commitViewValue();
controller.$setSubmitted();
});
event.preventDefault();
};
formElement[0].addEventListener('submit', handleFormSubmission);
It adds submit event listener on the form.
But submit event handler wouldn't be called when submit is initiated by calling form.submit(). In this case, ng-submit will not prevent the default action, you have to call preventDefault yourself in ng-submit handler;
To provide a reasonably definitive answer, the HTML Form Submission Algorithm item 5 states that a form only dispatches a submit event if it was not submitted by calling the submit method (which means it only dispatches a submit event if submitted by a button or other implicit method, e.g. pressing enter while focus is on an input type text element).
See Form submitted using submit() from a link cannot be caught by onsubmit handler
I also had the same problem, but gladelly I fixed this by changing the type like from type="submit" to type="button" and it worked.
First Button submits the form and second does not
<body>
<form ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}
$scope.Dont=function()
{
$scope.v=0;
}
});
</script>
</body>
Just add the FormsModule in the imports array of app.module.ts file,
and add import { FormsModule } from '#angular/forms'; at the top of this file...this will work.
I have defined a custom DOM element, but when placed inside a form, it does not submit it. How can I get the form to submit when I click the button?
<form action="/foo" method="GET">
<my-button type="submit">click me</my-button>
</form>
This is the prototype configuration for the custom element:
myButton = Object.create(HTMLButtonElement.prototype);
The template for the button looks like this:
<template>
<button type="submit" id="button"><content></content></button>
</template>
Came across this question today, but found a more modern alternative subsequently: web components can now be native form elements. There's a great read on the topic here.
The long and the short of it is you can now associate custom components with a form, meaning they're included in the form's elements property - a HTMLFormControlsCollection of all the elements controlled by the form.
To do this, you need to add the following to your component:
class MyComponent extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.internals = this.attachInternals();
}
}
this.internals will then contain everything you need to interact with the form in question, e.g. this.internals.form, this.internals.setFormValue(), this.internals.checkValidity().
For the submit button, you could, for example, use:
connectedCallback() {
const { internals: { form } } = this;
this.buttonEl.addEventListener('click', () => form.submit());
}
You are doing it wrong. Though event bubbling from shadow DOM to owner document is somehow possible, it’s tricky and in general is a wrong approach. Instead of hiding button into shadow, one should use is= attribute of button:
<form action="/foo" method="GET">
<!--my-button type="submit">click me</my-button-->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ -->
<button type="submit" is="my-button">click me</button>
</form>
More info.
When your custom element extends a native element like HTMLButtonElement, you can no longer use a custom tag name like <my-button> (unfortunately). You have to use the native tag with the is= attribute:
<button type="submit" is="my-button">
If you do not extend a native element (called "type extension" in the spec), then you can use your custom tag name. Type extension example in the spec
For a regular html form, I could use java script to validate input onsubmit, which means the submit button is work only for a valid input, hence no http response required.
However, I am unable to do the same thing for a django form.
A Django form in html is simply as {{form}}.
for example {{form.title}} is the form for title.
So I am looking for a way to validate the Django form at front end (in HTML). only the valid input would be post
Not Django specific. Its a frontend Javascript framework Job. Or if you are certain that your webapps's target audience is all latest browser oriented, supporting HTML5, then go for HTML form validations (source) .
If you do not want to go for client side validation and re-use your Django's validation code, then I would suggest serialize and submit the form using ajax. You could get a JSON reply and parse it using javascript, or get the whole updated form back(using Django's template engine) and update the DOM. In case you need a sample, let me know which method you are opting for. Hope this helps.
Include jquery validator
<script type="text/javascript" src="{% static 'js/jquery.validate.min.js' %}"></script>
In contact.html
Loader .gif while you send form
<div id="loadingDiv" class="hiddenClass">
<p><img src="{% static "images/ajax-loader.gif" %}" alt="loader" ><br/>Please wait... while we...<p>
</div>
your form code in contact.html
<form method="post" action="/contact/send/" id="contact_wrap">
<div class="name">
<label class="label">Name <span class="required">*</span></label>
<input name= "firstname" id="firstname" class="inputtext" type="text" maxlength="20" size="12" placeholder="First Name"/>
</span>
</div>
<-- your code -->
</form>
submit button in contact.html
<div class="button">
<input id="submitform" class="submitform" type="submit" name="submitform" value="Send" />
</div>
script to validate form in contact.html
<script>
$(function() {
$( "#contact_wrap" ).validate({
errorClass: "my-error-class", //apply a css class for error if you have style for valid
validClass: "my-valid-class", //apply a css class for error if you have style for error
rules: {
firstname: {
required: true
},
},
messages: {
firstname: {
required: "Please enter your First Name."
},
},
});
});
</script>
To check validation before submit in contact.html
show ajax-loader.gif from loading div
<script>
$( "#submitform" ).click(function() {
if ($('#contact_wrap').valid()) $( "#loadingDiv" ).removeClass( "hiddenClass" ).addClass( "showClass" );
});
</script>
I have in trouble with posting json object and mapping it with List object in Spring MVC controller. I have the form that has several checkboxes. When a user checks and submits, data in the form is deserialized, sent to Spring MVC controller and mapped to List type object. When a user checks two or more checkboxes, it works fine. but for just one box, it doesn't.
When a user checks two or more, the data is deserialized like below.
{"users":["137","138"]}
However, when a user checks just one checkbox, it is like
{"users":"138"}
and 400 bad request error is returned.
Is there any workaround or solution for this?
The jQuery codes are:
$(document).ready(function() {
$('#groupusers').submit(function() {
var users = $(this).serializeObject();
$.postJSON("${context}/admin/groups/${group.seq}/users", users, function(result) {
...
});
return false;
});
And the form is:
<form id="groupusers" method="post" accept-charset="UTF-8" action="/" class="edit_group">
...
<div id="users">
<c:forEach var="user" items="${users}">
<label><input id="users" name="users" type="checkbox" value="${user.seq}" /> ${user.firstName} ${user.lastName}</label><br>
</c:forEach>
</div>
</form>
List object mapped to the form data:
public class AssignedUsers {
private List<Long> users;
...
}
Thanks in advance.
What is the implementation of the serializeObject() function? You might need to modify that to always return an array, so even if you only checked one box, the object should be: {"users":["138"]}
The server returned a 400 probably because the Jackson at threw a parsing exception at the backend.
Fojas' jQuery Serialize
This is the solution I have found and since been using which does excatly what you are requesting.
Example
HTML
<form id="myForm">
<input name="data[]" value="some data"/>
<input name="data[]" value="more data"/>
<input name="users[]" value="137"/>
</form>
jQuery
$('#myForm').serializeObject();
Output
{
data: ["some data", "more data"]
users: [137]
}