React最终表单中的表单验证不起作用

如何解决React最终表单中的表单验证不起作用

我正在使用 react final form 为我的一个项目创建注册表。一切正常，但阻碍是验证消息未按预期显示。

下面是我的代码，

/** @format */

// CSS Section

// Component Section
import React from 'react';
import { Field,Form } from 'react-final-form';
import { combineValidators,isrequired } from 'revalidate';

function PatientCreation() {
    // React Final Form's onSubmit event handler.
    const onSubmit = (values: any) => {
        alert(JSON.stringify(values));
    };

    const validate = combineValidators({
        name1: isrequired({ message: 'Name is required' }),age: isrequired({ message: 'Age is required' }),phone: isrequired({ message: 'Phone number needed' }),});
    return (
        <div>
            <div className='content-wrapper'>
                <div className='content-header'>
                    <div className='container-fluid'>
                        <div className='row mb-2'>
                            <div className='col-sm-6'>
                                <h1 className='m-0'>Patient Creation</h1>
                            </div>
                        </div>
                        <div className='row mb-2'>
                            <div className='col-md-6'>
                                <Form
                                    onSubmit={onSubmit}
                                    validate={validate}
                                    render={({ handleSubmit,invalid,pristine }) => (
                                        <form onSubmit={handleSubmit}>
                                            <div className='form-group'>
                                                <label htmlFor='name1'>Name</label>
                                                <Field
                                                    name='name1'
                                                    className='form-control'
                                                    component='input'
                                                    placeholder='Name'
                                                />
                                            </div>
                                            <div className='form-group'>
                                                <label htmlFor='age'>Age</label>
                                                <Field
                                                    name='age'
                                                    className='form-control'
                                                    component='input'
                                                    placeholder='Age'></Field>
                                            </div>
                                            <div className='form-group'>
                                                <label htmlFor='phone'>Phone</label>
                                                <Field name='phone'>
                                                    {({ input,Meta }) => (
                                                        <div>
                                                            <input
                                                                type='text'
                                                                className='form-control'
                                                                {...input}
                                                                placeholder='Phone'
                                                            />
                                                            {Meta.touched && Meta.error && (
                                                                <span>{Meta.error}</span>
                                                            )}
                                                        </div>
                                                    )}
                                                </Field>
                                            </div>
                                            <button
                                                type='submit'
                                                className='btn btn-block btn-success'>
                                                Submit
                                            </button>
                                        </form>
                                    )}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default PatientCreation;

我正在使用 adminLTE-3 组件。我的表单验证应该类似于此 https://adminlte.io/themes/v3/pages/forms/validation.html

因为我最近开始研究 react 和 adminLTE-3。我遇到了很多链接，但找不到合适的解决方案。由于我的任务截止日期，我需要尽快解决这个问题。

任何快速帮助都值得赞赏。提前致谢。

注意：目前我已经包含了电话文本框的验证以进行测试。