Gewusst wie: löschen Sie einige Felder im Formular - Redux-Form

Ich bin das arbeiten auf einer Seite, die viele Eingabe-Validierungen und logischer Bindungen auf und jeder iteration die Größe der Seite wächst. So dass ich haben, um eine schöne zu finden und skalierbare Lösung.

Vorstellen, wenn Benutzer wählen Sie einen Wert aus der dropdown-als 'A', müssen einige Felder deaktiviert werden, werden einige Felder gelöscht werden müssen und einige Felder initilized mit default-Werten. Ändern kann ich einem verwandten Bereich (nicht Gültigkeitsregel wie regexp oder Länge constrait) Wert mit einigen wenig code wie

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

Mein problem ist, dass wenn ich löschen müssen mehrere Felder,

Es immer blockiert, von meinem Validierung der Methode und klare Bedienung ist fehlgeschlagen ( Hinweis : ich soll so sein, aber nicht so)

.

Ich habe versucht, einige Strategien, wie unten aber y -, z -, w-Felder sind text, und es löste Gültigkeitsregel und hanled Fehler. So, dass die Eingaben haben immer noch die alten Werte nicht gelöscht werden, diejenigen.

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

Was sind die besten Praktiken für die clear-Eingänge oder weisen Sie einige Werte für die Eingänge in der redux-form für Seiten, die sehr abhängig Eingänge.

Recherchiere ich seit 2 Tagen, aber ich konnte keine optimale Lösung. (redux normalizer, redux form utils usw.)

Dank.

  • sind Sie mit immutable.js?
  • Noch nicht anoop !
InformationsquelleAutor Tugrul | 2016-05-12
  1. 4

    Wow, das ist eine komplizierte Logik. Der absolut ideale Weg wäre, um die plugin() - API änderung der Werte in der reducer, wenn Ihr den anderen Bereich ändern sich die Werte. Es ist eine komplizierte API, weil Sie die totale Kontrolle um zu versauen Dinge in der reducer, aber Sie haben eine komplizierte Anforderung.

    Jedoch Entsendung von drei change() Aktionen, wie Sie sagten, Sie tun, sollte auch funktionieren. Vielleicht möchten/müssen untouch() die Felder auch, wenn Sie Required Validierung der Nachrichten, die Sie nicht anzeigen wollen, noch.

    Es immer blockiert, von meinem Validierung der Methode und klare Bedienung ist fehlgeschlagen.

    Können Sie näher erläutern, was das bedeutet, zeigen einen stack-trace oder der Konsole Fehler-Ausgabe?

    • Hallo Erik, ich löste das problem mit ein paar tricks. Keine ideale Lösung, aber funktioniert gut. Ich werde es verbessern, Ihre Anregungen mit.
    • Und ich werde erklären, wie ich es gelöst. Und beachten Sie, dass untouch() hat mich gerettet.
    • Dies ist ein wenig älter... derzeit bin ich auf 6.5.0 aber ich bin kämpfen, mit dem untouch-dispatching. Gibt es ein Beispiel, wie der Versand einer untouch () - Aktion ? Auch wenn ich "ändern" und dann "untouch" - Felder sind Sie immer noch eingereicht..
    • Ich traf das gleiche problem, und versuchen, die Methoden unten, keiner von Ihnen arbeiten, könnten Sie mir sagen, wie haben Sie das erreichen?
    InformationsquelleAutor Erik R.
  2. 15

    Dieser arbeitete für mich:

    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]))
        }
    }
    InformationsquelleAutor chickenchilli
  3. 9

    Mithilfe der unten, löscht es die jeweils mehrere Felder und löscht auch den Fehler, wenn alle für die jeweiligen Felder.

    Gemeinsame Funktion zum zurücksetzen mehrere Felder.

    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));

      });
}

    Verwenden Sie die oben genannten gemeinsamen Funktion,

    this.resetFields('userDetails', {
    firstName: '',
    lastName: '',
    dateOfBirth: ''
});
    • Ich habe es exacty so.
    • Dies funktioniert wie ein Charme. Danke Mann
    InformationsquelleAutor Aniruddha Shevle
  4. 1

    gibt.

    Schauen wir uns http://redux-form.com/6.0.0-alpha.4/docs/faq/HowToClear.md/

    Für die ganze form, die wir verwenden können 4 Methoden:

    A) können Sie das plugin benutzen () - API zu unterrichten, dass die redux-form reducer zu reagieren, die Aktion wird ausgelöst, wenn Ihre Einreichung erfolgreich war.

    B) Einfach unmounten Sie Ihr Formular-Komponente

    C) Sie können diesen Aufruf.Requisiten.resetForm() aus dem inneren Ihrer form nach Ihrer Vorlage erfolgreich.

    D) Sie können Versand-reset() von jeder angeschlossenen Komponente

    InformationsquelleAutor SerzN1
  5. 1

    Versuchen, die dispatch-Funktion in meta-Objekt mit folgender Nutzlast:

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

    Sollte den trick tun für jedes Feld, das Sie wollen.

    • Es funktioniert aber warum funktioniert es? Können Sie mir irgendwelche Hinweise oder Dokumentation?
    • Es funktioniert, weil, dass, Sie Versand die Aktion für die redux-Formular direkt. Wenn Sie mit redux-logger als middleware, Sie werden sehen, was redux-form wird der Versand unter der Haube. Und so können Sie Versand durch sich selbst.
    InformationsquelleAutor Zero
  6. 1

    Fand ich einen besseren Weg für diese,

    Wir können initialisieren Aktion Ersteller der RF.

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

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

    Wenn die keepDirty parameter true ist, werden die Werte der derzeit schmutzigen Felder wird beibehalten, um zu vermeiden überschreiben durch den Benutzer bearbeitet werden.

    InformationsquelleAutor Aniruddha Shevle
  7. 0

    klar mehrere Felder

    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);
    InformationsquelleAutor vijay
Schreibe einen Kommentar