redux-Form Validate nur die fileds auf ausgewählten Registerkarte Inhalt

Question

Gibt es einen Weg, um einig Anfangswert zu übergeben und sie aktualisiert, wenn die Registerkarte geklickt wird, und bestätigen Sie nur eine bestimmte Gruppe von Feldern

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import {Field,reduxForm} from 'redux-form' 
import { selectreport, decrementStep } from '../../actions.js' 

class Step1 extends Component { 
    constructor (props) { 
    super(props) 

    this.handleChangeTab = this.handleChangeTab.bind(this) 
    this.stepBack = this.stepBack.bind(this) 
    } 
    stepBack (e) { 
    e.preventDefault() 
    console.log('reduce step by 1') 
    this.props.dispatch(decrementStep(this.props.step)) 
    } 
    handleChangeTab (e) { 
    const { title: key } = e.target 
    console.log('click values are ', key) 
    this.props.dispatch(selectreport(key)) 
    } 

    renderField(field){ 
    const className = `row form-group ${field.meta.touched && field.meta.error ? 'has-error' : ''}`; 
    return(
     <div className=" col-xs-12 col-md-offset-3 col-md-9"> 
     <div className={className}> 
      <label className="col-xs-12 col-lg-12">{field.label}</label> 
      <input 
      type="text" 
      placeholder={field.placeholder} 
      className="form-control" 
      {...field.input} /> 
      <div className="text-danger"> 
      {field.meta.touched ? field.meta.error : ''} 
      </div> 
     </div> 
     </div> 
    ); 
    } 
    onSubmit(values){ 
    const { step, report } = this.props 
    } 
    render() { 
    const { step, report, parsedAddress,handleSubmit } = this.props 
    const { Line1, Line2} = parsedAddress 
    let st = JSON.stringify(step) 
    return (  
     <form className="" onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
      <div className=""> 
      <div className="row"> 
       <div className="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3">Enter details.</div> 
      </div> 
      <div className="row"> 
       <div className="nav nav-pills col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3 PADD0"> 
       <div className={report == 'address' ? ('col-xs-6 active') : 'col-xs-6'}> 
        <a data-toggle="tab" href="#address" title="address" onClick={this.handleChangeTab}>Address</a></div> 
       <div className={report == 'phone' ? 'col-xs-6 active' : 'col-xs-6'}> 
        <a data-toggle="tab" href="#phone" title="phone" onClick={this.handleChangeTab}>Phone</a></div> 
       </div> 
      </div> 
      <div className="row"> 
       <div className="tab-content PADD20PX text-centered col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-6 "> 
       <div id="address" className={report == 'address' ? 'tab-pane fade in PADD20PX active' : 'tab-pane fade in PADD20PX'}> 
        <Field 
        label="Address" 
        name="Line1" 
        placeholder="123 Sample Street" 
        component={this.renderField} 
        /> 
        <Field 
        label="address2" 
        name="Line2" 
        placeholder="APT" 
        component={this.renderField} 
        /> 
       </div> 
       <div id="phone" className={report == 'phone' ? 'tab-pane fade in PADD20PX active' : 'tab-pane fade in PADD20PX'}> 
        <Field 
        label="PhoneNumber" 
        name="phone" 
        placeholder="123.456.7890" 
        component={this.renderField} 
        /> 
       </div> 
       </div> 
      </div> 
      </div> 
      <div className="row PADDBOX"> 
      <div className="col-xs-12"> 
       <div className="pull-left"> 
       <div className="pull-left"> 
        <button type="button btn-rounded" onClick={this.stepBack} className="btn btn-default">Back</button> 
       </div> 
       </div> 
       <div className="pull-right"><button type="submit">Search</button></div> 
      </div> 
      </div> 

     </form> 
     </div> 
    ) 
    } 
} 
function validate(values,props){ 
    console.log("inside validate",props); 
    const errors = {}; 
    if(!values.Line1){ 
     errors.Line1 = "Enter address"; 
    } 
    if(!values.Line2){ 
     errors.Line2 = "Enter address"; 
    } 
    if(!values.phone){ 
     errors.phone = "Enter phone number"; 
    } 

    return errors; 
} 

function mapStateToProps (state) { 
    return { 
    step: state.step, 
    parsedAddress: state.parsedAddress, 
    report: state.report 
    } 
} 


export default reduxForm({destroyOnUnmount: false,validate,form:'PostsnewForm'})(
    connect(mapStateToProps)(Step1) 
); 

Haben zwei Laschen eines für Adresse und Telefon. Der Versuch, das Formular während der Adressregistrierung einzureichen, kann nicht gesendet werden, selbst wenn ich alle Validierungen überlasse, da die Überprüfung auf der Registerkarte fehlschlägt

Gibt es eine Möglichkeit, einen globalen Status an die Validierungsfunktion zu übergeben und bestimmte Felder basierend auf zu validieren ein Attribut im globalen Zustand.

Answer 1

Try this:

function validate(values) { 
    // console.log(values) -> {title: 'asdf', categories: 'asdf', content: 'asdf'} 
    const errors = {}; 

    // validate the inputs from 'values' 
    if (!values.title || values.title.length < 3) { 
    errors.title = "Enter a title that is at least 3 characters!";; 
    } 

    // if errors is empty, the form is fine to submit 
    // If errors have any properties, redux form assumes form is invalid 
    return errors; 
} 
if (!values.categories) { 
    errors.categories = 'Enter some categories'; 
} 
if (!values.content) { 
    errors.content = 'Enter some content, please'; 
} 

export default reduxForm({ 
    validate, 
    form: 'PostsNewForm' 
})(PostsNew); 

eine if-Anweisung für die Felder, die Sie nicht möchten, validieren.