We Keep Coding

Add forms to a Django formset dynamically using htmx?

There are several writeups on how to use javascript to add forms dynamically to a Django formset. For example this or this.
I just learned about htmx.
How can I add forms dynamically to a Django formset using htmx instead of hand-coded javascript? I thought maybe I could use click-to-load, but it seems odd to call back to the server to get an empty row. Maybe this just isn't an htmx thing.

With HTMX, instead of the complication of formsets, you can dynamically add forms, and swap in the resulting model instance on submit.
This example todo app provides a demonstration of the approach. It allows you to add additional items by appending a form, and upon submitting successfully, swaps in the model instance resulting from that form submission. The end result is much like using formsets.

I just answered a similar question here: The right way to dynamically add Django formset instances and POST usign HTMX?
Here's the summary of my approach:
Create a view function to bring in your new formset via an hx-get.
In that view function, build the html of your new formset by starting with
YourFormset.empty_form to get the basic html, and then replace the default "__prefix__" with the number representing the index the new formset should have in its id, name and label attributes. For example, if it's the second formset on the page its id will be id_form-1-title (changed from id_form-__prefix__-title).
In the html for the new formset, also include a hidden input element to replace the one creted by django's ManagementForm to update the value of form-TOTAL_FORMS. Place hx-swap-oob="true" on that input so that it replaces the old element.
A longer explanation with example code is at: The right way to dynamically add Django formset instances and POST usign HTMX?
Docs reference: https://docs.djangoproject.com/en/4.1/topics/forms/formsets/

Angular Form nesting and conditional field issues

I am wanting to create an angular form dynamically from json.
This form has a variety of field types (input, date, number, select)
These field types can also be secondary conditional fields based on select values. (See formData.js)
The form needs root level objects in the FormGroup in angular, but also needs FormArrays for fields that the user can add more of (multiSelect:true in the data).
I have it working to render the top level fields, and the mutliselect fields.
The issue is when I am trying to render the conditional fields and have it work in a structure of angular Forms values collection.
I have put together a stackblitz of the form element of my application.
The form is built in a loop from the formData, with a dynamic Field Directive using factoryResolver to create the components.
The error I specifically get is control.registerOnChange is not a function. The angular form Object has all the fields where they are needed in this iteration including multiselect fields.
But the conditionals don't currently render.
Any help on this would be appreciated, and if any more information is needed let me know.
https://stackblitz.com/edit/angular-bxznoc

Passing Reactive Form Fields as Prop to Component

I have two reactive forms that are very similar. I'd like to share markup code for the fields between these to forms. The problem is when I move fields to an ng-template element, I get an error because I have defined formControlName on the elements when they are not wrapped by an element with formGroup set.
How can I share field markup between forms with Reactive Form?
I've made a basic stackblitz to represent the issue: https://stackblitz.com/edit/angular-w3qqqb
I know this can be done with template forms but I'd like to use reactive forms.

form controls are hidden when adding form tags

So, I'm having a little issue here with angular and forms
I'm creating a dynamic form, and it works correctly, but I needed to add some validations.
So I started to follow this guide and I set it up correctly, but when I set the form tags to surround my form controls, I'm getting a blank form
But, if I comment the form tags, I get my form perfectly
Any idea of why this is happening???
I have a couple of validation to show fields based on values, like
custConfig is part of the scope, could the name of the form be interfering with the retrieval of the custConfig variable? and if its such, how can I fix this?
Thanks

Your using a repeater
ng-repeat="deliver in shipmentDetails"
Do you have anything in your object shipmentDetails array? if not then the form will not show anything

adding fields to a form via javascript / jquery - how to save state

I have a situation where i have to modify a form (to dynamically add a table) via jquery after it's been rendered / created.
The problem is that when the form is submitted, and redisplayed because of errors or validation issues, I don't know of a good way to save and redisplay the data they've entered into the fields I've created dynamically.
Any suggestions would be appreciated.

You probably want to use something like jQuery Populate.

Dynamically added data don't differ from the static added ones. You have to use 'validate()' method to prevent submitting and rendering the html-code with errors, in this case user will see the dynamically added data.