Angular 6 dynamic form rendering

Question

I want to build a form reading fields from a list of values:

<form [formGroup]="fileForm" (ngSubmit)="onSubmit(fileForm.value)">
                            <section class="col col-8">
                                <div>
                                    <label *ngFor="let metadato of metadatiAbilitati" class="input">
                                        <input type="text" placeholder="{{metadato.chiave}}"
                                            [formControl]="fileForm.get(metadato.chiave)" />
                                    </label>
                                </div>
                                <!-- <label class="input">
                                    <input type="file" name="file" placeholder="seleziona file" />
                                </label> -->
                            </section>
                            <!-- <div> -->
                            <button type="submit">Aggiungi</button>
                            <!-- </div> -->
                        </form>

in component ts file I have:

constructor(private transazioneService: TransazioneService, fb: FormBuilder) { 
    this.fileInputs = [];
    let fields = {};

    this.metadatiAbilitati.forEach(m => {
      let input = this.fileForm.controls[`m.chiave`];
      this.fileInputs.push(input);
      fields[m.chiave] = m.chiave;
    });

     this.fileForm = fb.group(fields);

  }

But from browser I got this error:

Finally, In main module I import ReactiveFormsModule. Anyone can help me?

possible duplication of this... https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form — Naieem Mahmud Supto, Mar 07 '19 at 11:44
No, I Didn't. Is formModule use for template-driven solution? I don't want to use that. — Vitto Lib, Mar 07 '19 at 11:50
I have also imported FormsModule, but It still doesn't work. — Vitto Lib, Mar 07 '19 at 12:00
import ReactiveFormsModule in your module.or can you paste your module code here — Naieem Mahmud Supto, Mar 07 '19 at 13:04
` @NgModule({ imports: [ CommonModule, homeRouting, SharedModule, FormsModule, ReactiveFormsModule ], declarations: [HomeComponent, ListaTransazioniComponent, CronologiaComponent], providers: [TransazioneService] }) export class HomeModule { } ` — Vitto Lib, Mar 07 '19 at 14:17

score 0 · Answer 1 · answered Mar 07 '19 at 15:30

0

Finally, I have solved my problem. Chrome was caching previous changes, so I didn't see right fix.

answered Mar 07 '19 at 15:30

Vitto Lib

45
1
9

Angular 6 dynamic form rendering

1 Answers1