Trabajando con WTForms FieldList

Question

Uso WTForms con Flask a través de la extensión Flask.WTF. Sin embargo, esta pregunta no es específica de Flask.

WTForms incluye un FieldList field for lists of fields. Me gustaría utilizar esto para crear un formulario donde los usuarios puedan agregar o eliminar elementos. Esto requerirá algún tipo de marco Ajax para agregar widgets dinámicamente, pero la documentación de WTForms no lo menciona.

Otros marcos como Deform come with Ajax support. ¿Hay un marco similar disponible para WTForms?

Answer 1

he usado algo como esto con mi FieldList/FormField para permitir la adición de más entradas:

$(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); 
} 

quitar botones sería mucho más complicado.

(Código prestado su mayoría de respuesta a Dynamically adding a form to a Django formset with Ajax.)

Answer 2

De su descripción, no puedo ver por qué Ajax es particularmente necesario, aunque, por supuesto, necesita lógica de JavaScript para agregar/eliminar filas. Implementé esta funcionalidad usando WTForms, pero sin el apoyo especial de WTForms; solo necesita asegurarse de que cuando cree widgets del lado del cliente, haga esto usando los nombres de campo que WTForms analizará correctamente en la lista del lado del servidor. Puede clonar una fila existente utilizando el JavaScript del lado del cliente para agregar filas, de modo que la representación de una fila sea coherente en las filas generadas en el lado del servidor y las filas creadas en el lado del cliente.