preface

Form form is the most familiar to us, but many UI frameworks on the market for form form encapsulation, make its function is very powerful, such as form validation, form beautification…

Today we will discuss antD form verification

When analyzing antD-Form components, it is found that some functions of antD-Form are implemented by RC-field-form, so the next focus is directly on how rC-field-form implements form verification

You can learn

  1. What are the Form and Field components
  2. What is useForm
  3. Form verification process
  4. Why and how does a form refresh strongly

Form validation process

Code implementation

Demo

What does Form do

  1. Creating a formStore Warehouse &formInstance

  • FormStore: all methods of a form instance, store…

  • FormInstance: Exposes the form instance to the outside

What Field did

  1. Register your instance with formStore

    • From formInstance. GetInternalHooks registerField method, by registered to formStore registerField method will Field example, concentrated from fromStore facilitate access to the Field examples and do check

  1. Override the trigger validation event according to validateTrigger

Override the Child property, primarily to trigger the event

The default trigger event is onChange, and when the Input component fires onChange, a validateField is issued

dispatch({
    type: 'validateField',
    namePath,
    triggerName,
});
Copy the code

  1. ValidateFields check

The async-Validator framework is used to verify and return error information, which is cached on the instance Field, and then the component is forcibly brushed to display the error information on the page

There are two “Field” brushes and “Form” brushes

conclusion

  1. Form creates formStore and formInstance through useForm
  2. Field, instantiated to host itself in formStore
  3. OnChange → validateFields → Save Error → Force Update → getFieldsError → View
  4. FormStore data changes, need to brush, re-render the page
  5. There are two strong flushes:
    1. Feild: enclosing forceUpdate ()
    2. Form: forceUpdate