Generate HTML Form using ReactiveFormsModule angular 9

Question

I am trying to build master APIs for the control panel. For that I need to generate the dynamic form in .ts file. Let me explain.

// Here is an array for generate 3 inut fields
const UserFields = [
    {
        name : 'name',
        type : 'text
    },
    {
        name : 'email',
        type : 'email
    },
    {
        name : 'password',
        type : 'text
    }
]

When I generate input filed in form using *ngFor and FormGroup its works fine. But in some cases, I need N level fields. In that case, I need to use Recursive Function to generate HTML Form

So I created Recursive Function and bind using innerHTML but the issue is that. FormGrop not working in that case.

Here is My Recursive Function

recursiveFields(formElement = ''){
    UserFields.map( (field : any)  => {
      // email or text or number
        formElement += `<input
        name="${field.name}" 
        type="${field.type}"
        [formControlName]="${field.name}" 
        class="form-control" />`;
      }
    });

    return formElement;
  }

recursiveFields() is working fine and generates HTML what I need. But After submit form I can't get value from FormGrop.

How can I achieve this Gole? Please help me. :)

Take a look at this question and the answers: https://stackoverflow.com/questions/62352286/angular-deeply-nested-reactive-form-cannot-find-control-with-path-on-nested-for/62355590?noredirect=1#comment110679045_62355590 — julianobrasil, Jul 30 '20 at 18:42
And also this other answer: https://stackoverflow.com/a/62399246/6433166 — julianobrasil, Jul 30 '20 at 18:44
And this blog post: https://dev.to/julianobrasil/writing-nested-recursive-angular-reactive-forms-a-clean-approach-57fk — julianobrasil, Jul 30 '20 at 18:44
@julianobrasil Thanks for your suggestion. Let me check is it okay for me or not. Thanks :) — Kaushik Makwana, Jul 30 '20 at 18:52
I wouldn't take that path. It would be something like deconstruct everything angular is doing for you. Instead of thinking in terms of innerHTML, try to move your paradigm to components and json data. — julianobrasil, Jul 31 '20 at 01:23

Generate HTML Form using ReactiveFormsModule angular 9

0 Answers0