Sometimes I need some special UI component e.g multiple range slider, but I don't like using third party libraries, so usually I create component on my own. Over time I absolute stop using form tag, instead of that, I use just div and instead of onSubmit use just onClick, which call function, which return data from redux (also use my own redux form implementation). For example:
<div>
<div className="form-title">Some random Form</div>
<div className="form-body">
<Input
type="text"
label="Name: *"
form="random_form"
name="name"
/>
</div>
<div className="form-footer">
<Button onClick={()=> handleSubmit()}>Save</Button>
</div>
</div>
const handleSubmit = () => {
const form = getForm("random_form")
}
In this case I use component Input, which return normal html input (). But now I thinking that i will create some other pseudo form component, which will be build from some span and div. And my question - Is okay, when I don't use form tag and create own form component, which haven't default html equivalent.
Because of accessibility issues, it's generally preferable to have a form tag if you're making a form, but as other people mentioned, it's not required.
You do lose some functionality if you don't have a form tag. For example, if you had an input with required, it would get validated when the form is submitted, but since there is no form, it's not validated automatically. One of the more subtle issues I've encountered is that browsers might not save your input for autocompletion if no submit event happens.
Related
I was following the tutorial Tour of Heroes. While adding a new hero they say
You can use an element paired with an add button.
Insert the following into the HeroesComponent template, after the heading:
<div>
<label for="new-hero">Hero name: </label>
<input id="new-hero" #heroName />
<!-- (click) passes input value to add() and then clears the input -->
<button type="button" class="add-button" (click)="add(heroName.value); heroName.value=''">
Add hero
</button>
</div>
Here I don't understand what is #heroName inside in input element (what is it called) and how does it help in pairing that input element with the button element.
Basically, what is that #<keyword> syntax within that input element. I know that it is not the id as that is already declared.
To answer the question, it's a reference to the input. You can find more details here:
https://angular.io/guide/template-reference-variables
Template variables help you use data from one part of a template in
another part of the template. Use template variables to perform tasks
such as respond to user input or finely tune your application's forms.
In the tutorial context, it's a reference to the input element. It helps to pair it with a button to be able to access it's value, without having to actually define a variable in the component.ts and trying to update the template directly. This help you "skip" a step, and actually have direct access to that value.
Template reference variables can become very handy in certain cases and are commonly used for example in angular material ( to call a function for a component )
<mat-menu #menuComponent ...></mat-menu>
<button (click)="menuComponent.close()"></button>
In the above example, you bind the menuComponent variable to "mat-menu" component, in which case you can access all the variables, public methods of such. In that case we can call "close" method from the mat-menu component.
Let me know if this is still unclear and I can try to give you more examples and explanation
Am building a Wordpress plugin and am Using Vue Js.
I set up a variable that will be set to true on a button click
Then another div which is a modal that will remaining hidden with v-if as long as the variable is false. The is also a form in the div modal(pop up)
The problem is that once the value changes, on button pressed, the form submits immediately.
This has been happening but I usually ignore it because there was always a required field which will prevent the form from submitting automatically.
Vue.js Data object
{
selected_to_show : false,
}
The modal div
<div v-if="selected_to_show === true" class='mp-modal'>
<form on:submit.prevent="xhrSubmit()">
<form>
</div>
<button v-on:click="selected_to_show = true"></button>
This works but once the modal opens, the form submits immediately.
Note: There is only two button elements in the form where are all set to type="button"
The target is to prevent the form from submitting automatically when shown
If any one still uses this approach to re-render vue apps, my advice is, don't.
The best way to re-render the app is by doing
this.forceUpdate();
This will re-render the vue app instead of modifying data properties of the vue instance which are utilized during rendering.
However, don't overuse it.
Most times when your view is not re-rendering naturally, its probably because you are doing something wrong.
I'm trying to write a small Angular app with the following functionality:
Form starts empty with placeholder text.
User enters item in required textbox.
Angular pushes item to collection.
Reset form inputs to default.
I've got code that looks like this (jsfiddle: http://jsfiddle.net/Nn37v/1/) :
HTML:
<div ng-controller="MyCtrl">
<form name="talkForm">
<input ng-model="newVoice" placeholder="Say something" required />
<button ng-click="saySomething()">Say</button>
</form>
<ul>
<li ng-repeat="c in conversation">{{c}}</li>
</ul>
</div>
Javascript:
function MyCtrl($scope) {
$scope.conversation =[];
$scope.saySomething = function(){
if ($scope.talkForm.$valid){
//push to list
$scope.conversation.push($scope.newVoice);
$scope.newVoice='';
}
}
}
The problem I'm facing is when $scope.newVoice='' executes, the form is rendered invalid and I get the helpful HTML5 validation pop up to encourage me to fill in the form properly. Obviously this is not the behaviour I want - what is the correct way to do this with Angular?
To remove the HTML5 validation (since it will only work on compliant browsers) why not add the novalidate attribute to the form?
The validity of the form will still be invalid due to the 'required' attributed.
Seems that the following pull request in 1.1.x branch of Angular will add a $setPristine method to allow this to happen
https://github.com/angular/angular.js/pull/1127
I have two forms in my html file. They both submitted by one button. Can I connect both forms with this button? Something like
<button form="firstFormId secondFormId"> Save </button>.
Will it make any sense?
You have multiple solutions to do that, I'd go with javascript, or even better, jQuery, if you're using it.
If you are not using jquery, with javascript you could do something like this:
Place somewhere in the page a "submit" link:
Submit
Assign to each form an unique name, let's say "myform1" and "myform2".
Then include in your page the following:
<script type="text/javascript">
function submitform(){
document.myform1.submit(); // submit form 1
document.myform2.submit(); // submit form 2
}
</script>
Instead of calling an external function, to keep things as simple as possible, after assigning the names to the forms, you could even simply place the following link:
Submit
If you are using jQuery, and I suggest this way, you could simply assign a given class to both forms, let's say "submit-me" and then add to your code:
$('.submit-me').submit()
Of all the above I would definitely suggest the last one, that relies on jQuery. It's easy to maintain, reusable (meaning that it can be applied to any form having the class submit-me, and all the job is done by jQuery.
Note that in all the examples you don't need anymore the "classic" submit button of forms.
Not tested, but I hope it'll do what required! :-)
When I add a normal <form> element in my xpage, the pager doesn't work any longer, means I cannot switch to other pages (clicking on "next" or something).
Here is the important part:
<xp:pager id="newsPager" for="newsList" pageCount="4" partialRefresh="true">
//pager stuff.....
</xp:pager>
<form action="#">
//form stuff... contents not important for my issue, I tested it
</form>
When I exclude the form entirely, it works
I use Domino Designer 8.5.3 on windows 7
And the "newsList" is an ID of a repeat-control
Instead of using a passthru form, use a form component:
<xp:form action="#">
// form contents
</xp:form>
This will prevent the rest of the content from being surrounded by a form tag, which also breaks events and data submission, so you'll need to surround the rest of your content in its own form:
<xp:form>
<xp:pager id="newsPager" for="newsList" pageCount="4" partialRefresh="true">
//pager stuff.....
</xp:pager>
<xp:repeat id="newsList">
//repeat contents
</xp:repeat>
</xp:form>
NOTE: do not nest forms inside each other; this confuses browsers, which is why your current design is not functional. Identify, instead, discrete portions of the page that can be safely treated as separate forms and wrap each portion in its own form component.
The XPage renderer automatically adds a form to the page unless you have disabled this in the properties of the Xpage.
This form is used to process all the partial refreshes and submitting of values to the backend. When you add your own form tag the partial refresh used by the pager ( or any xpage component ) no longer has the correct information needed to talk to the server.
if you really need to have your own form tag then I would suggest an iFrame that loads in an external page that contains your form.
i found this and it's work fine for me
http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/work_with_HTML_forms#Embed+a+custom+HTML+form+in+a+XPage