Come cancellare alcuni campi nel modulo - Redux-Form

Question

Sto lavorando su una pagina che ha molte convalide di input e collegamenti logici su di essa e ogni iterazione aumenta le dimensioni della pagina. Quindi, devo trovare una soluzione bella e scalabile.

Immaginate, quando l'utente seleziona un valore dal menu a discesa come 'A', alcuni campi devono essere disabilitati, alcuni campi devono essere cancellati e alcuni campi inizializzati con valori predefiniti. Posso cambiare un campo correlato (non ha come regola di convalida regexp o lunghezza constrait) valore con qualche piccolo codice come

this.props.dispatch(change('xForm','xField','xValue')) 

mio problema è che quando ho bisogno di cancellare più campi,

E 'sempre bloccato dal mio metodo di convalida e l'operazione di cancellazione è fallita (Nota: dovrei essere così ma non così)

.

Ho provato alcune strategie come di seguito ma i campi y, z, w hanno del testo e ha attivato la regola di convalida e gli errori di blocco. In questo modo, gli input hanno ancora valori vecchi, non cancellati.

//Clear  
    this.props.dispatch(change('xForm','yField','')) 
    this.props.dispatch(change('xForm','zField','')) 
    this.props.dispatch(change('xForm','wField','')) 

Quali sono le migliori pratiche per contribuire chiaramente o assegnare alcuni valori agli ingressi in redux forma di pagine che hanno ingressi altamente dipendenti.

Ho effettuato ricerche per 2 giorni ma non sono riuscito a trovare alcuna soluzione ottimale. (redux normalizer, redux form utils ecc.)

Grazie.

Answer 1

Wow, questa è una logica complicata. Il modo ideale in assoluto sarebbe utilizzare plugin() API per modificare i valori nel riduttore quando gli altri valori dei campi cambiano. È un'API complicata, perché hai il controllo totale per incasinare le cose nel riduttore, ma hai un requisito complicato.

Tuttavia, l'invio di tre azioni change() come hai detto tu stia funzionando correttamente. Potrebbe essere necessario/necessario untouch() i campi se hanno i messaggi di convalida Required che non si desidera visualizzare ancora.

Viene sempre bloccato dal metodo di convalida e l'operazione di cancellazione non è riuscita.

Puoi approfondire cosa significa, mostrare una traccia stack o un errore di console in uscita?

Answer 2

questo ha funzionato per me:

resetAdvancedFilters(){ 
     const fields = ['my','fields','do','reset','properly'] 
     for (var i = 0; i < fields.length; i++) { 
      this.props.dispatch(change('formName',fields[i],null)) 
      this.props.dispatch(untouch('formName',fields[i])) 
     } 
    } 

Answer 3

lì. sguardo

Let a http://redux-form.com/6.0.0-alpha.4/docs/faq/HowToClear.md/

Per modulo intero possiamo usare 4 metodi:

A) È possibile utilizzare l'API plug-in() per insegnare la redux forma riduttore per rispondere all'azione inviato quando la tua l'invio ha successo.

B) È sufficiente smontare il componente modulo

C) È possibile chiamare this.props.resetForm() da dentro il modulo dopo la vostra presentazione riesce.

D) Si può inviare reset() da qualsiasi dispositivo collegato

Answer 4

chiare più campi

import {change} from 'redux-form'; 

const fields = {name: '', address: ''}; 
const formName = 'myform'; 

const resetForm = (fields, form) => { 
    Object.keys(fields).forEach(field => dispatch(change(form, field, fields[field]))); 
} 

resetForm(fields,formName); 

Answer 5

Utilizzando il seguito, cancella i rispettivi campi multipli e cancella anche gli errori eventuali per coloro rispettivo campi.

Funzione comune per reimpostare più campi.

import {change, untouch} from 'redux-form'; 

//reset the respective fields's value with the error if any after 
resetFields = (formName, fieldsObj) => { 
     Object.keys(fieldsObj).forEach(fieldKey => { 

      //reset the field's value 
      this.props.dispatch(change(formName, fieldKey, fieldsObj[fieldKey])); 

     //reset the field's error 
      this.props.dispatch(untouch(formName, fieldKey)); 

     }); 
} 

Utilizzare la funzione comune di cui sopra come,

this.resetFields('userDetails', { 
    firstName: '', 
    lastName: '', 
    dateOfBirth: '' 
}); 

Answer 6

tenta di utilizzare la funzione di invio in meta oggetto con le seguenti payload:

meta.dispatch({ 
    type: '@@redux-form/CHANGE', 
    payload: null, 
    meta: { ...meta, field: name }, 
}) 

Questo dovrebbe fare il trucco per qualsiasi campo che si volere.

Answer 7

ho trovato un modo migliore per questo,

Possiamo usare initialize azione creatrice di RF.

let resetFields = { 
    firstName: '', 
    lastName: '', 
    dateOfBirth: '' 
} 

this.props.initialize(resetFields, true); //keepDirty = true; 

Se il parametro keepDirty è vero, i valori dei campi attualmente sporchi sarà trattenuto per evitare di sovrascrivere modifiche dell'utente.