Formy-реагировать, как сказать, какая проверка сделала недействительным ввод

У меня есть этот компонент формы (в машинописном тексте), который использует "формы-реагировать". после отправки с неверной формой, я могу получить имена недопустимых полей (переменная 'fieldsWithErrors' в 'onInvalidSubmit').

что мне нужно, в случае нескольких функций проверки для поля ('validationFunc1', 'validationFunc2' в моем примере), чтобы знать, какая функция проверки вызывала недопустимое состояние.

Спасибо!

import * as React from 'react';
import Formsy from 'formsy-react';
import {Input} from '../controls/Input/Input';

export class MyForm extends React.Component {
  onValidSubmit(_formData) {/**/ }
  onChange() {/**/ }

  private fields = [
    {
      id: 'fieldName',
      validations: {
        validationFunc1: () => {/* some validation*/ },
        validationFunc2: () => {/* some other validation*/ }
      }
    }
  ];

  onInvalidSubmit() {
    const fieldsWithErrors = this.getFieldsWithErrors();
    console.log(fieldsWithErrors);
  }

  getFieldsWithErrors() {
    const inputs: Formsy.WrappedComponent[] =
      (this.refs.form as any).inputs;
     const haveErrors = 
      ({props}) => !this.refs[props.name]['isValid']();
    return inputs.filter(haveErrors)
      .map(({props}) => props.name);
  }

  render() {
    return (
      <Formsy ref="form"
        onInvalidSubmit={() => this.onInvalidSubmit()}
        onValidSubmit={(formData) => this.onValidSubmit(formData)}
        onChange={() => this.onChange()}>
        {this.fields.map((field) => {
          return (
            <div key={field.id}>
              <Input
                name={field.id}
                validations={field.validations}
              /></div>);
        })}
        <button>Submit</button>
      </Formsy >
    );
  }
}

0 ответов

Другие вопросы по тегам