Redux Form 7.4.2, Как предотвратить отправку формы при рендеринге компонента и отображать ошибки - PullRequest
Новая
       68

Redux Form 7.4.2, Как предотвратить отправку формы при рендеринге компонента и отображать ошибки

0 голосов
/ 26 декабря 2018

Я использую reduxForm 7.4.2 , работая с проверкой на стороне клиента в простой форме.

Форма отправляется при загрузке страницы и показывает ошибку, как показано ниже:

enter image description here

Я хочу запретить отправку формы при загрузке страницы и отображать ошибки только тогда, когда пользователи нажимают кнопку "Отправить"

Воткомпонент формы с использованием reduxForm: 

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => {
  console.log(error);
  return(
    <div className="form-group">
      <label>{label}</label>
        <input {...input} placeholder={label} type={type} className="form-control" />
        {error && <div className="invalid-feedback d-block">{error}</div>}

    </div>
  )
}




const validate = values => {
    const errors = {}
    if (!values.name) {
      errors.name = 'Name is Required'
    } else if (values.name.length < 2) {
      errors.name = 'Must be 2 characters or more'
    }
    if (!values.email) {
      errors.email = 'Email is Required'
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
      errors.email = 'Invalid email address'
    }
    if (!values.password) {
      errors.password = 'Password Required'
    } else if (values.password.length < 6) {
      errors.password = 'Password must be 6 characters'
    }
    return errors
  }

const Form1Child=(props)=>{
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit} className="needs-validation" noValidate>
      <Field name="name" type="text" component={renderField} label="Name"/>
      <Field name="email" type="email" component={renderField} label="Email"/>
      <Field name="password" type="password" component={renderField} label="Password"/>
      <div>
        <button className="btn btn-primary" type="submit" disabled={submitting}>Submit</button>
        <button className="btn btn-default" type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )
}

export default reduxForm({
    form: 'form1',
    validate 
  })(Form1Child)

Вот родительский компонент: 

import React, { Component } from 'react'
import Form1Child from './Form1Child';

class Form1 extends Component {
    constructor(){
        super();
        this.state={

        }
    }

    handleSubmit=values=>{
        alert(JSON.stringify(values));
    }

  render() {
    return (
      <Form1Child onSubmit={this.handleSubmit}/>
    )
  }
}
export default Form1;
...