Utilizzo di WTForms FieldList

Question

Uso WTForms con Flask tramite l'estensione Flask.WTF. Tuttavia, questa domanda non è specifica di Flask.

WTForms include uno FieldList field for lists of fields. Mi piacerebbe usare questo per creare un modulo in cui gli utenti possano aggiungere o rimuovere elementi. Ciò richiederà una sorta di framework Ajax per aggiungere dinamicamente i widget, ma la documentazione di WTForms non ne fa menzione.

Altre strutture come Deform come with Ajax support. Esiste un framework simile disponibile per WTForms?

Answer 1

Ho usato qualcosa di simile con il mio FieldList/FormField per consentire l'aggiunta di ulteriori voci:

$(document).ready(function() { 
    $('#add_another_button').click(function() { 
     clone_field_list('fieldset:last'); 
    }); 
}); 

function clone_field_list(selector) { 
    var new_element = $(selector).clone(true); 
    var elem_id = new_element.find(':input')[0].id; 
    var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1; 
    new_element.find(':input').each(function() { 
     var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-'); 
     $(this).attr({'name': id, 'id': id}).val('').removeAttr('checked'); 
    }); 
    new_element.find('label').each(function() { 
     var new_for = $(this).attr('for').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-'); 
     $(this).attr('for', new_for); 
    }); 
    $(selector).after(new_element); 
} 

Rimuovere pulsanti sarebbe molto più complicato.

(Codice in gran parte preso in prestito dalla risposta a Dynamically adding a form to a Django formset with Ajax.)

Answer 2

Dalla tua descrizione, non vedo perché Ajax sia particolarmente necessario, anche se ovviamente hai bisogno della logica JavaScript per aggiungere/rimuovere righe. Ho implementato questa funzionalità usando WTForms, ma senza alcun supporto speciale da WTForms stesso; devi solo assicurarti che quando crei i widget lato client, lo fai usando i nomi dei campi che WTForms analizzerà correttamente nella lista lato server. È possibile clonare una riga esistente utilizzando JavaScript sul lato client per aggiungere righe, in modo che il rendering di una riga sia coerente tra le righe generate lato server e le righe create lato client.