New to Formik. I am trying to CSS format the field that will be emitted by Formik , but am coming up short. Is wrapping each Field with a the right approach? I was hoping to pass a style attribute to but it doesnt accept one.
You can pass className="your-class", and then style the class as needed.
<Field
className="main"
type="number"
name="numberInput"
... other props here ...
/>
will give you:
<input name="numberInput" class="main" type="number">
Related
This works :
<input
id="chk-products"
name="chk-products"
type="checkbox"
x-on:click="showProducts = document.getElementById('chk-products').checked">
But this doesn't :
<input
id="chk-products"
name="chk-products"
type="checkbox"
x-on:click="showProducts = this.checked">
I was wondering why this isn't available in alpinejs's directives ?
With Alpine.js you don't have to inspect/mutate the DOM manually. It uses the data model: first you define some data, then you bind it to some input elements and let Alpine.js handle the DOM mutations, etc.
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
<div x-data="{showProducts: false}">
<input type="checkbox" x-model="showProducts" /> Show products
<div x-show="showProducts">Products are shown.</div>
<div x-show="!showProducts">Products are hidden.</div>
</div>
The this keyword is available inside a component created with Alpine.data() global function.
The x-on:click directive in Alpine.js is designed to execute a JavaScript expression when an element is clicked. In this case, the expression is trying to access the checked state of the checkbox element, which can be done more directly by using the this keyword to access the element that the directive is applied to. Unfortunately, Alpine.js does not support the use of the this keyword in its directives.
I'm using vee-validate form validation and I have 3 address fields:
House Number
House Name
Flat Number
All 3 are optional because an address may only have 1, but I need the user to fill in at least one. So I can't make any of them required, and the documentation for cross field validation only handles putting specific validation on a single or multiple fields:
https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields
What is the best way of handling this? I'm no stranger to custom validation rules in my project, I just don't understand the approach here.
Thanks.
<div class="flex flex-wrap pb-2">
<FormTextInput
name="addressBuildingNo"
v-model="value.buildingNo"
type="text"
:label="$t('formFields.addressBuildingNo')"
placeholder="e.g 10"
:hint="$t('formHints.optional')"
/>
<FormTextInput
name="addressFlatNo"
v-model="value.flatNo"
type="text"
:label="$t('formFields.addressFlatNo')"
:hint="$t('formHints.optional')"
/>
<FormTextInput
name="addressBuildingName"
v-model="value.buildingName"
type="text"
:label="$t('formFields.addressBuildingName')"
:hint="$t('formHints.optional')"
/>
</div>
Wrap each one in a ValidationProvider and set the required rule on each to be that it's required if neither of the other two are filled out. So the first one would look like this:
<ValidationProvider :rules="{ 'required': (!value.buildingName && !value.flatNo)">
<FormTextInput
name="addressBuildingNo"
v-model="value.buildingNo"
type="text"
:label="$t('formFields.addressBuildingNo')"
placeholder="e.g 10"
:hint="$t('formHints.optional')"
/>
</ValidationProvider>
If you want more complicated validation, you can also write cross-field validators for each one that check things more specifically (following the docs you pointed out already). See a simplified example here: https://codesandbox.io/s/veevalidate-30-cross-field-optional-3dzxd
In the end I just made a hidden field with the value being a combination of all 3 fields.
<FormTextInput name="addressBuilding" type="hidden" v-model="compBuildingValue" rules="required" />
compBuildingValue() {
return `${this.value.buildingNo.trim()}${this.value.flatNo.trim()}${this.value.buildingName.trim()}`
}
Hi i'm using Formik and Yub library to validate Forms .I'm stuck in uncontrolled input of text to be controlled
In the beginning i have problem that Initial Values and i fixed with enableReinitialize={true} in Formik .But now with Field. On the document says Field can automatically inject onChnange and need props for input here
So I did like this
import { Formik, Form, Field } from 'formik';
<Formik
initialValues={intialData}
validationSchema={validationRules}
onSubmit={e=>console.log(e)}
>
{({ errors, setFieldValue, setFieldTouched, values, handleChange }) => (
<Form>
<Field name="name" value={data.name} /> //i have tried explicitly added type="text"
{error.name ? errors.name: ''}
</From>
)}
</Formik>
I didn't use onChange because Field automatically inject .But by giving like this
<Field name="name" value={data.name} />
i can't edit on field shows uncontrolled error so I tried like this
<Field name="name" defaultValue={data.name} /> // without giving onchange this also cant edit
so I tried like this
<Field name="name" defaultValue={data.name||""}/> // its working but the warning about uncontrolled input not going away
How get rid uncontrolled issue in Formik field .Im i doing in right way?
the Initial value is my issue i fixed with this answer
I'm building a view with Thymeleaf templates, which contains a form that provides a way to bind the value of my inputs with the attributes passed in the model. The backend was developed using Spring 4.
The following snippet includes an autocomplete datalist with the data of the namelist object, which was added to the model as an attribute. Said namelist is an ArrayList of a class with the fields int id and String name.
<form th:action="#{/}" method="POST" th:object="${example}">
<div class="form-group">
<input list="names" class="form-control" id="nameinput" th:field="${example.num.id}"> </input>
<datalist id="names">
<option th:each="row : ${namelist}" th:value="${row.id}" th:label="${row.name}">
</datalist>
<button>submit</button>
</div>
</form>
The value of the selected option is already bound to example.num.id, which is the expected and desired behaviour. However, when loading the view on a web browser (tested on latest Firefox and Chrome), it is represented like this:
As you can see, the id's are showing. However, I'm trying to emulate the behaviour of a <select>; the value should not be shown, just the text or label.
Is there a better way to achieve this? Am I not using the datalist properly?
How do I add HTML5 placeholder attributes to Spring webmvc's form:input, form:password and form:textarea elements?
As of Spring 3.0 form tags support dynamic attributes, therefore you can simply write
<form:input placeholder = "..." ... />
Regarding the new input types question - I had success by using spring bind and manually generating the input element. I'm using bootstrap so I already had a tag to wrap the control-group and apply the error message, but if you just want to inline it you can do the following.
if your path field was 'age', replace <form:input path="age"/> with
<spring:bind path="age">
<input id="age" name="age" type="number" value="${status.value}" />
</spring:bind>