I'm realizing there are some snippets that I'm repeating everytime, and sometimes I forget.
One of them is the #submit.prevent. In all forms I have to write it for preventing to submit, I'll always manage the submission through a vue method.
So can I do something that all forms have this instruction implicitly?
You can create a simple (probably functional) component and use this instead of the normal <form>.
// BaseForm.vue
<template>
<form #submit.prevent="onSubmit">
<slot />
</form>
</template>
<script>
export default {
props: {
onSubmit: {
type: Function,
required: true,
}
}
}
</script>
You won't really save a lot of code, but you won't have to think about it anymore. You could include the basic <button type=submit></button> in here as well.
Related
first Question here so please educate me if i'm doing this wrong.
So im working on an SPA that uses BootsrapVue and i created a view that uses a
<b-form-checkbox-group
v-model="anything"
:options="options"
:disabled="ifDisabled"
button-variant="outline-secondary"
buttons
>
when this gets rendered i get this html:
<fieldset data-v-3bacc3f3 class="form-group" id="__BVID__38">
<legend tabindex=-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__38__label_">Selector</legend>
<div>
<div> data-v-3baac3f3 role="group" tabindex="-1" class="btn-group-toggle btn-group bv-no-focus-ring" id="__BVID__39">
<label class="btn btn-outline-secondary disabled atcive">
<input type="checkbox" name="buttons-1" disabled="disabled" class value="100" id="__BVID__39_BV_option_0">
<span>100</span>
...
now i've tried alot of stuff but cant figure out how i am able to override the scss styles for the options. Preferably only in this scope, but i cant even manage to do it globaly.
I'm even having trouble figuring out the right place where i should be looking to change css for :hover and :focus.
please help!
This works:
<style lang="scss">
.btn-group-toggle:not(#_) label {
/* general styles */
&.disabled {
}
&.focus {
}
&.active {
}
&:hover {
}
}
</style>
When adding scoped attribute to the <style> tag, you're largely at the hand of your installed pre-processor which might or might not be able to parse >>>, /deep/, ::v-deep or :deep(), depending on version.
To stay away from such issues, I use the suggestion made in Vue Loader's docs: I create a separate <style> tag for bootstrap-vue internals, without the scoped attribute and keep the rest of component style rules in a <style scoped>.
Working demo.
Apologies if this has been answered elsewhere, I have searched but not found anything as of yet.
I have a v-form stored in a database that I wish to pull back and display on a page. However, when I do so the form is not being rendered correctly. It remains as Vuetify template code and is not converted to HTML.
The form looks like this:
<v-form>
<v-container>
<v-row>
<v-col>
<div class="text-h4">Form 1</div>
</v-col>
</v-row>
<v-row>
<v-col
cols="12"
md="6"
>
<v-text-field
:counter="255"
label="Customer ID"
required
></v-text-field>
</v-col>
<v-col
cols="12"
md="6"
>
<v-text-field
label="Amount"
></v-text-field>
</v-col>
<v-col class="text-right">
<v-btn
#click="submitForm"
>
Submit
</v-btn>
</v-col>
</v-row>
</v-container>
</v-form>
I did come across a render function, but I've either not used it correctly or it is not have the desired effect - I'm a newbie at this so it may well be something simple!
The above form is pulled back from the database using axios, and the request happens in the created() function on the page where I wish to display it, using mapGetters() to grab it from the store and v-html in a v-card to show it.
Any help on this would be much appreciated.
Thanks for your time people!
How can I inject a Vuetify form from a database into a template?
You can't.
v-html docs
Updates the element’s innerHTML. Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates. If you find yourself trying to compose templates using v-html, try to rethink the solution by using components instead
Another note from docs
Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
So in short, you cannot insert any partial template into a template of a component at runtime.
But you can create component at runtime and use it as dynamic component
const vm = new Vue({
el: '#app',
data() {
return {
downloadedTemplate: '<div> Hello </div>', // pretend this was downloaded from the server
}
},
computed: {
myDynamicComponent() {
return Vue.component('myDynamicComponent', {
template: this.downloadedTemplate
})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<component :is="myDynamicComponent" />
</div>
Note that to do this, you must use Vue distribution which includes the template compiler
I don`t know about your particular use case, but unless you are working with tens of different forms, storing templates in database sounds like a sub-optimal strategy - a lot of unnecessary work and hard to mainain
I am new to Angular2/Typescript, since I come from the Java world, I decided to learn Typescript and Angular2 directly.
I want to leave most of the logic on the server, thus I don't need complex validation management on the client. So all I want is the user to fill out forms, and post/put all the fields to the REST Service.The goal is to leave the client side as light as possible.
I have a form:
<form role="form" (ngSubmit)="onSubmit()" #ArbeitstagForm="ngForm">
and a field in it, some datepickers too: similar like this:
<input type="text" class="form-control pull-right" id="datepicker" [(ngModel)]="model.datum">
When I submit the form, I call this function:
model = new Arbeitstag();
onSubmit(form:any) {
alert(JSON.stringify(this.model));return false;
}
So that alerts me the the entered data as JSON, which I will after send to a REST Service. It works actually great, BUT only when I actually type something into the field, when I have a default value, or I set the field with a datepicker, the model object values will remain empty.
I've found out about the dirty setting of the fields, which are false by default and are getting true when I type something in and that's also what I see when I check firebug, but that's definitely not what I want to achieve.
Is there a way to set all the fields dirty in a form in Angular2? I've found many examples for Angular.js 1, but not for Angular2/Typescript.
Control has a markAsDirty() (and markAsTouched()) method
<input #datePicker="ngForm" type="text" class="form-control pull-right" id="datepicker" [(ngModel)]="model.datum">
<button (click)="datePicker.control.markAsDirty()">update dirty status</button>
Plunker example
What I usually do is get a reference to the form in my component, using ViewChild. With that reference I can mark to form dirty or touched when I need to. Like so:
export class MyComponent implements OnInit, OnDestroy {
#ViewChild('form') form: NgForm;
...
public methodWithFormChange(): void {
this.form.control.markAsDirty();
}
}
;-)
The bootstrap validator plugin helps validating the form fields providing a bunch of cool features. One of those features are the feedback icons, which defaults to glyphicon.
Suppose I want to replace glyphicon with font awesome.
The documentation says they can be changed by passing a "feedback" JSON object as data attribute or via JavaScript.
Via JavaScript it's easy. But as data attribute, it is unclear where and how exactly add it, because simply adding:
feedback: {
success: 'fa-check',
error: 'fa-times'
}
as data attribute to the <form> or the <div class="form-group"> or the <input> itself it doesn't work.
After some time struggling with it, I realized that the JSON feedback object should be added to the element and also it needs to be added using this syntax (which was not specified in the docs):
<form ... data-feedback='{"success": "fa-check", "error": "fa-times"}'>
Note the quotes syntax.
Also, if we are not just changing the glyphicon but replacing it with a font-awesome one (like in my example), in the <div class="form-group"> we need to replace:
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
with:
<span class="fa form-control-feedback" aria-hidden="true"></span>
This is not very well documented, and I could not make it work. I ended up using a different form validator which accomplish the same functionality and it's easier to configure success/error formats using bootstrap classes:
var validator = $('#submitForm').validate({
validClass: "is-valid",
errorClass: "is-invalid",
jQuery Validator
I am using a script that disables the submit button unless the user clicks and browses for a file to upload.
$(document).ready(function() {
$('input:submit').attr('disabled',true);
$('input:file').change(
function(){
if ($(this).val()){
$('input:submit').removeAttr('disabled');
}
else {
$('input:submit').attr('disabled',true);
}
});
});
I have 2 forms on the same page and I would like this tied to a specific form.
First form:
<form action="" method="post" name="name1" id="id1">
Second form:
<form action="" method="post" name="name2" id="id2">
is there a way in the javascript to attach it to #id1 specifically and not id2?
would I place it like this? $('#id1.input:submit') - what is the symbol or syntax to add the id into the script? Sorry I'm still learning which parts you can combine.
replace $('input:submit').attr('disabled',true); by
$('form#id1 input:submit').attr('disabled',true);