I was trying validation of input field with hasFeedback, validateStatus of ANT Design. If I set validateStatus = 'error' for now which I actually would set with state, I was able to get alert from onFinish function. Am I missing something ?? I read documents and found onFinish will only trigger when validation has passed.
I want to validate that with my own validation rules and states.
function onfinish(){
alert('hi')
}
<Form
form={form}
onFinish={onfinish}
>
<Form.Item
label="Mobile Number"
validateStatus='error'
hasFeedback
name="mobileNumber"
>
<Input id='abc'/>'
</Form.Item>
</Form>
Related
As a part I'm working on, I need to take the data from a form when the user presses enter and use that data in a Modal. But the data doesn't seem to get extracted from the form. Here is my code :
const showModal = (info: any) => {
if(info.keyCode===13){
setIsModalOpen(true);
setData(info.form.note); // Some issue in this line
}
};
<SearchResults openModal={isModalOpen} message={data}/>
<Form name="control-ref" onKeyUp={showModal}>
<Form.Item name="note" id="note" rules={[{ required: true }]}>
<InputField
variant="search"
placeholder="Search"
addonAfter={selectAfter}
className="search-field"
/>
</Form.Item>
</Form>
I just need to find how to access form data. Please help
I am using joi validation for validating inputs in react project. String inputs working fine but select,date,checkbox inputs not working.
Below code for date picker and typehead select option method. here if we submit empty date and empty select option error is throwing. after choosing values errors not fading.
<DatePicker
type="date"
id={"initialDate"}
value={getSelectedDate(tripData.initialPaymentDate)}
format={dateFormat}
clearIcon={null}
required={true}
showLeadingZeros={true}
onChange={(date: any) => {
setTripData({
...tripData,
initialPaymentDate: date,
});
}}
defaultValue={tripData.initialPaymentDate}
{...register("initialDate")}
/>
<Typeahead
inputProps={{ autoComplete: "nope" }}
id="airlineData"
//onChange={(data) => {
// setTravelSuppliers({...travelSuppliers, airline: data });
//{...register("airlineData")}
// }}
options={airLinesData}
defaultSelected={travelSuppliers["airline"]}
// defaultValue={travelSuppliers["airline"]}
{...register("airlineData")}
/>
Here checkbox code is available, checkbox no errors showing.
<input
className="form-check-input"
type="checkbox"
id="acknowledge"
defaultValue='false'
{...register("acknowledge")}
/>
I'm trying to create a form inside modal using react class component and antd, but i couldn't find a way to get the data submited in the form. i tried to console the event of the onOk in antd modal but i same no data.
i also found an example but it was with function component and hooks Form.useForm()
here is the simple if anyone can help : Simple
any hint will be helpful thanks.
The solution is to hide the footer of the modal and add submit for the form exemple :
<Modal
title={this.props.formTitle}
visible={this.state.modalVisible}
confirmLoading={this.state.confirmLoading}
onCancel={this.handleCancel}
footer={[]}//this to hide the default inputs of the modal
>
<Form
layout="vertical"
name="form_in_modal"
initialValues={{
modifier: 'public',
}}
onFinish={this.handleOk}>
<Form.Item
name="title"
label="Title"
rules={[
{
required: true,
message: 'Please input the title of collection!',
},
]}>
<Input />
</Form.Item>
<Form.Item name="description" label="Description">
<Input type="textarea" />
</Form.Item>
<Form.Item name="modifier" className="collection-create-form_last-form-item">
<Radio.Group>
<Radio value="public">Public</Radio>
<Radio value="private">Private</Radio>
</Radio.Group>
//this is the submit of the form
<Button key="submit" type="primary" loading={this.state.confirmLoading} htmlType="submit">
submit
</Button>
</Form.Item>
</Form>
</Modal>
I tried this out myself with limited TS(JS) knowledge using Antd & React framework.
The steps are as follow.
construct an object e.g:
let obj1 = {
variableA : "",
variableB : ""
}
In your form body get the value using
<Form.Item ... onChange={(event)=>obj1.variableA=event.target.value}/>
In this case, the event keyword will return the final input value to instances (e.g variableA) within obj1 with given input from different form, which you can operate on after the form submission finish in a quasi-java style.
You can test it by creating alert(obj1.variableA) or console.log function to see if that's the desired value, in my case it works well with string and numeric input.
As I am not doing front end, so I might make mistakes and do feel free to point it out.
So, the main problem is, that antd form does not detect my custom input based on antd standard input:
There is a piece of form code (AddProduct):
<Form.Item
className="m-t-10"
name="price"
rules={[
{
required: true,
message: `${t('FORM.ERR.SHOP.PRICE')}`,
},
]}
>
<CurrencyInput size="small" placeholder={t('FORM.SHOP.PRICE_VAT')} name="price" />
</Form.Item>
There is my custom input (CurrencyInput):
return (
<Input size={props.size} placeholder={props.placeholder} name={props.name} type="number" prefix={settings[6].value} />
)
The problem is when I try to submit the form it does not detect currency input, throws err that this field is required. Any ideas are it possible to implement custom input, basically, it's more HOC than custom input
You need to pass to your custom component all props, because Form.Item pass to there onChange and value props
function CustomInput({size, placehodler, name, ...restProps}) {
return (
<Input size={size} placeholder={placeholder} name={name}
type="number" prefix={settings[6].value} {...restProps} />
)
}
In reactjs i am using ant design form. In that form i dont want default validation using getfielddecorator. I want to validate fields with my own validation.How it validate?
For example
<Form onSubmit={this.handlesubmit.bind(this)}> <FormItem>
<input/>
</FormItem>
<FormItem >
<input/>
</FormItem>
<ButtonAnt className="btng" type="primary" htmlType="submit">Save</ButtonAnt>
</Form>
According to the docs,
We provide properties like validateStatus help hasFeedback to
customize your own validate status and message, without using
Form.create and getFieldDecorator.
Also, it seems there is a validator prop (amongst others) that you can use to write your own validator function.
I do it like this
<Form.Item
help={HasError && meta.error}
validateStatus={HasError ? "error" : "validating"}
>
<Input {...input} {...props} className={classes.Input}></Input>
</Form.Item>