Alright, folks, let’s dive into my little adventure with “ant contract.” I’m no expert, just a guy who likes to tinker, so bear with me.
First, I needed to get my hands dirty. I mean, literally, I needed to install something. I went ahead and grabbed the Ant Design library. They have this thing called “antd” – pretty straightforward, right? So, I opened up my terminal, you know, that black box with the blinking cursor, and typed in some command magic:
npm install antd
Or, if you’re into that Yarn thing:
yarn add antd
I hit enter and watched the little progress bar do its thing. It felt like waiting for water to boil, but hey, gotta be patient.
Once that was done, I started messing around with a basic form. I mean, everyone needs a form at some point, right? Contact forms, registration forms, you name it. So, I cracked open my code editor and started typing away.
I used Form component, Input component, and maybe a Button, just the usual suspects. It looked something like this:
<Form>
<* label="Name">
<Input />
</*>
<*>
<Button type="primary" htmlType="submit">
Submit
</Button>
</*>
</Form>
Pretty basic, huh? But it’s a start. You’ve got your labels, your input fields, and a submit button to make it all happen. I wrapped the input in a , that gives it some nice layout and spacing, and added a button to make it go.
Then I wanted to add some validation, to make sure that people are entering in the required information. You know basic stuff, like a simple required rule.
I went into that and added a ‘rules’ prop. I added a ‘required’ rule, and a message if someone tried to submit without filling it out.
<*
label="Name"
name="name"
rules={[
required: true,
message: 'Please input your name!',
>
<Input />
</*>
After that, I hooked up the form to actually do something when you hit that submit button. I added an onFinish function to my Form and console logged the values. I did this to make sure the form was submitting all the correct data.
<Form onFinish={onFinish}>
</Form>
Then somewhere outside of the actual form, I defined what that function will actually do.
const onFinish = (values) => {
*('Success:', values);
And there you have it! A basic form, built with Ant Design, with some simple validation. Nothing fancy, but it gets the job done. I’m still learning all the ins and outs, but this was a good starting point for me. Hope this helps someone out there!
