I have a working b3 play framework form with file upload. The only issue is I cannot see anywhere in the documentation to remove an already uploaded file. Ideally there would just be a "remove" type button by the file upload that could remove the already uploaded file before form submission.
My current form is below. Any help or suggestions on solving this are more than welcome.
Thank you
#b3.form(routes.SettingsController.submitEditProfile, 'enctype -> "multipart/form-data") {
#CSRF.formField
#b3.text(userForm("displayName"), '_label -> "Display name")
<div class="form-group">
<label class="control-label col-md-2" for="settingsImage">Settings Image</label>
<div class="col-md-6">
#user.settingsImage.fold {
<p>#Messages("has.no.image")</p>
}{ c =>
<p>#Messages("has.image")</p>
#c.artifacts.find(a => a.label == "small" && a.url.nonEmpty).map{ ca =>
<img src="#ca.url" #includes.artifactDimensions(ca) /></a>
}
}
<input type="file" name="settingsImage" />
</div>
</div>
#b3.free('_id -> "idFormGroup") {
<button type="submit" class="btn btn-secondary">#Messages("update")</button>
<a class="btn btn-default" href="#routes.SettingsController.settings()">#Messages("cancel")</a>
}
Related
I have website created as an angular app that has a bootstrap datepicker. The problem is that the header of this datepicker is not visible - there're no arrows or a spinner to choose a month and a year.
The code in html look like this (I just want the header to be visible, I don't cate about its functionality at this point):
<div class="btn-group mb-3 mr-3 ">
<input class="form-control "
name="datepicker"
ngbDatepicker
#datepicker="ngbDatepicker"
[autoClose]="'outside'"
(dateSelect)="onDateSelection($event)"
[displayMonths]="2"
[dayTemplate]="t"
outsideDays="hidden"
[startDate]="fromDate"
[placement]="'bottom'"
type="hidden">
<ng-template #t let-date let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
<div class="input-group-append ">
<button class="btn btn-outline-dark " (click)="datepicker.toggle()" type="button" placement="bottom" ngbTooltip="{{'raports_by_date' | translate }}"><span class="fa fa-calendar"></span></button>
</div>
<button type="button" class="btn btn-dark no-click" *ngIf="toDate" > {{fromDate.day}}/{{fromDate.month}}/{{fromDate.year}}</button>
<button type="button" class="btn btn-dark btn-sm no-click" *ngIf="toDate" >-</button>
<button type="button" class="btn btn-dark no-click" *ngIf="toDate" >{{toDate.day}}/{{toDate.month}}/{{toDate.year}} </button>
<button type="button" class="btn btn-dark no-click" *ngIf="!toDate && fromDate" >{{fromDate.day}}/{{fromDate.month}}/{{fromDate.year}} </button>
</div>
And the result I get in a browser is:
I'm new to web applications programming and I've been working on this datepicker for the last two days. I have tried following examples at: https://ng-bootstrap.github.io/#/components/datepicker/examples#adapter but to no success.
You need to make sure you have the #angular/localize package first:
if (!not) {
npm install #angular/localize --save
Then, import '#angular/localize/init' in your polyfills.ts file just like the error says
OR
ng add #angular/localize
It will take care of it automatically
}
I am trying to test a form in Vue, using the forms from the Bootstrap-Vue library.
I have made a an event for the form (submit) and I added a function to this event (addText).
Then I made a method for this function, telling it to log my input data to the console, but when I press the "save" button and go into the console nothing has been logged.
This used to work with Materialize, so I am wondering if the error lies somewhere with the Bootstrap forms.
Any help will be much appreciated.
<template>
<b-container fluid>
<h2>Add or edit content for this section</h2>
<b-form-group #submit="addText">
<div class="fieldHeadline">
<label for="headline">Add headline</label>
<b-form-input type="text" name="headline" v-model="headline"></b-form-input>
</div>
<div class="fieldSecodnaryHeadline">
<label for="secondaryHeadline">Add secondary headline</label>
<b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
</div>
<div class="fieldText">
<label for="text">add text</label>
<b-form-input type="text" name="text" v-model="text"></b-form-input>
</div>
<b-button variant="success">Save</b-button>
</b-form-group>
</b-container>
</template>
<script>
export default {
name: 'NewsSectionCreate',
data() {
return {
headline: null,
secondaryHeadline: null,
text: null
}
},
methods: {
addText(){
console.log(this.headline, this.secondaryHeadline, this.text)
}
}
}
</script>
b-form-group is not a form it's layout that structures the label and inputs, in order to submit that inputs you should wrap the b-form-group tags with a b-form component which has #submit event:
<b-form #submit="addText">
<b-form-group >
<div class="fieldHeadline">
<label for="headline">Add headline</label>
<b-form-input type="text" name="headline" v-model="headline"></b-form-input>
</div>
<div class="fieldSecodnaryHeadline">
<label for="secondaryHeadline">Add secondary headline</label>
<b-form-input type="text" name="secondaryHeadline" v-model="secondaryHeadline"></b-form-input>
</div>
<div class="fieldText">
<label for="text">add text</label>
<b-form-input type="text" name="text" v-model="text"></b-form-input>
</div>
<b-button type="submit" variant="success">Save</b-button>
</b-form-group>
</b-form->
don't forget to add type="submit" to the b-button component.
I have created step in each tabs which represent the steps in the form. I have used v-if condition to check which step should be displayed. As of now the steps work perfectly fine when i click the next button. Even if the inputs are empty I am able to go to the next step. I want some validation on each step that will check if the input is empty and add a class to that input say "error-class". How do I do that in vuejs?
This is my form in .vue file.
<form id="product_form" enctype="multipart/form-data">
<!-- One "tab" for each step in the form: -->
<button type="button" v-if="step === 2 || step === 3 || step === 4" id="prevBtn1" #click.prevent="prev()"></button>
<div v-if="step === 1" class="tab">
<h3>Post a product</h3>
<div class="preview" id="preview">
</div>
<div class="single-holder">
<input type="text" name="pname" id="pname" placeholder="Title*" required="true" ref="pname">
</div>
</div>
<div v-if="step === 2" class="tab">
<h3>Describe your Product</h3>
<div class="descrip">
<textarea name="description" id="description" placeholder="Description" required="true"></textarea>
</div>
</div>
<div v-if="step === 3" class="tab">
<h3>Set Inventory</h3>
<div class="fixed-width">
<div class="single-holder">
<label>Quantity</label>
<input type="number" name="quantity" id="quantity" required="true">
</div>
</div>
</div>
<div v-if="step === 4" class="tab">
<h3>Share On</h3>
<div class="address-details-holder clearfix">
<div class="single-holder">
<input placeholder="_ _ _ _" id="zipcode" name="zipcode" maxlength="4" type="text" #keypress="onlyNumber">
</div>
</div>
</div>
</form>
This is my method in Vuejs
methods:{
onlyNumber ($event) {
let keyCode = ($event.keyCode ? $event.keyCode : $event.which);
if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) { // 46 is dot
$event.preventDefault();
}
},
prev() {
this.step--;
},
next() {
this.step++;
//if(this.step===1){
// console.log(this.$refs.name.value);
//if(this.$refs.pname.value !== null){
// this.step++;
//}
//}
}
As of now the steps work fine if i remove the if condition in the function next() in methods. But I need input validations on each step so the user has to fill out the missing data in all the form fields.
I think you can use Vee Validate . It will help you check required in each input
<input v-validate="'required'" data-vv-as="field" name="required_field" type="text">
And return error message for that input if it false
<span>{{ errors.first('email') }}</span>
I have this template:
<Template name="nuevoEjercicio">
<div class="container-fluid">
<div class="form-group">
<input type="text" class="form-control input-lg" name="ejercicio" placeholder="Ejercicio?"/>
<input type="number" class="form-control" name="repeticiones" placeholder="Repeticiones?" />
<input type="number" class="form-control" name="peso" placeholder="Peso?" />
<button type="submit" class="btn btn-success" >
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</Template>
that I use to capture and save to the database.
Then on my .js file I am trying to get the data and save it:
Template.nuevoEjercicio.events({
'click .btn btn-success': function (event) {
var ejercicio = event.target.ejercicio.value;
var repeticiones = event.target.repeticiones.value;
var peso = event.target.peso.value;
ListaRutina.insert({
rutina:"1",
ejercicio:ejercicio,
repeticiones:repeticiones,
peso:peso,
});
// Clear form
event.target.ejercicio.value = "";
event.target.repeticiones.value = "";
event.target.peso.value = "";
// Prevent default form submit
return false;
}
});
}
as I understand, when I click on any object that has the btn btn-success style....but is not the case. For some obscure reason -for me- is not working.
Can you check it and give me some advice?
Thanks!
First of all, there's an error in you selector. It's 'click .btn.btn-success', not 'click .btn btn-success'.
Also you can't do that event.target.ejercicio.value thing. event.target is the element that was clicked. You'll have to do something like this:
'click .btn.btn-success': function (event, template) {
var ejercicio = template.$('[name=ejercicio]').val()
...
OK
What after wasting hours and hours the solution is:
1- on the html file give your input an id:
<input type="number" class="form-control" **id="peso"** placeholder="Peso?" />
<button type="submit" class="btn .btn-success" id="**guardar**" />
so now you want to save data on the input when the button is clicked:
2- You link the button with the funcion via the id
Template.TEMPLATENAMEONHTMLFILE.events({
'click **#guardar**': function (event, template) {
var ejercicio = template.$("**#peso**").val();
and get the value linking using the input id.
I'm quite new to play and scala. I'm working on form and validations. But I couldn't figure out to get all errors from multiple verification on form.
My form tuple looks like;
val companyMapping = Forms.tuple(
"name" -> nonEmptyText,
"email" -> email,
"password" -> nonEmptyText(8),
"re-password" ->nonEmptyText(8)).verifying(
// Add an additional constraint: both passwords must match
"Passwords don't match", data => {
data._3 == data._4 }
).verifying(
// Second constraint
"Test error", data => {
false }
)
In the view I print global errors and errors, it looks like;
#println(companyForm.globalError)
#println(companyForm.errors)
and output;
Some(FormError(,Passwords don't match,WrappedArray()))
List(FormError(,Passwords don't match,WrappedArray()), FormError(,Test error,WrappedArray()))
At this stage I have absolutely no idea about how to print both of the errors. I'm showing errors separately for the each input and show global errors at the end.
But if passwords match I can see test constraint in the global errors. Other than it only shows password match constraint.
Here is the view part;
#helper.form(action = routes.Login.register) {
<div class="row">
<span class="label">Name</span>
<input type="text" name="name" placeholder="Company Name" value="#companyForm("name").value" >
#if(!companyForm.errors("name").isEmpty){
<span class="error">#Messages(companyForm.errors("name")(0).message,"Company name")</span>
}
</div>
<div class="row">
<span class="label">Email</span>
<input type="text" name="email" placeholder="Email" value="#companyForm("email").value" >
#if(!companyForm.errors("email").isEmpty){
<span class="error">#Messages(companyForm.errors("email")(0).message,companyForm.errors("email")(0).key)</span>
}
</div>
<div class="row">
<span class="label">Password</span>
<input type="password" name="password" placeholder="Password" value="#companyForm("password").value" >
#if(!companyForm.errors("password").isEmpty){
<span class="error">#Messages(companyForm.errors("password")(0).message,8)</span>
}
</div>
<div class="row">
<span class="label">Re-type Password</span>
<input type="password" name="re-password" placeholder="Re-type your password" value="#companyForm("re-password").value" >
#if(!companyForm.errors("re-password").isEmpty){
<span class="error">#Messages(companyForm.errors("re-password")(0).message,8)</span>
}
</div>
#println(companyForm.globalError)
#println(companyForm.errors)
<div class="row">
<span class="label"><button type="submit">Save</button></span>
#companyForm.globalError.map { error =>
<span class="error">#error.message</span>
}
</div>
}
Maybe I'm just confused about those error types. So please can you explain it detailed.
In the re-password section of your template, you currently test if !companyForm.errors("re-password").isEmpty but then only show the message for companyForm.errors("re-password")(0), i.e. the first error only. Even if you have multiple errors.
You have to iterate over companyForm.errors("re-password") to print something for each error.
You can for example output a <span class="error">... for each error, using a for comprehension:
<div class="row">
<span class="label">Re-type Password</span>
<input type="password" name="re-password" placeholder="Re-type your password" value="#companyForm("re-password").value" >
#for (error <- companyForm.errors("re-password")) {
<span class="error">#Messages(error.message,8)</span>
}
</div>
See the play doc for Scala templates for other useful syntax to use in templates.