How to create form Builder for Dynamic fields Angular 4?

how to dynamically add and remove form fields in angular 6
angular 4 dynamic form fields
angular 6 dynamic forms example
adding form fields dynamically in angular 8
angular 4 dynamic forms example
dynamic form builder
dynamic formcontrolname angular 6
add/remove input fields dynamically with angular 4

I was creating fields dynamically based on Json. For example if my json array has 3 value then i will create 3 input checkbox dynamically like below

<ng-template ngFor let-numberOfRow [ngForOf]="numberOfRows">
   <mat-checkbox [formControlName]="numberOfRow.row" [value]="numberOfRow.row" [name]="numberOfRow.row">All</mat-checkbox>
</ng-template>

now i m trying to create formBuilder for this fields like below but its not working. Could someone please tell me how to declare formbuilder for dynamic fields ?

public ngOnInit() {
   this.myForm= this.fb.group(this.formFields);
}
public formFields() {
    let empArr = [];
    for (let val of this.myArrayList) {
        empArr.push(val + ": ''");
    }
    let allFields = '{' + empArr.join(',') + '}';
    return allFields;
}

basically the above formFields function will return string like this { allRow: '', firstRow: '', secondRow: '', thirdRow: '' }

so instead if declaring statically this.myForm= this.fb.group({ allRow: '', firstRow: '', secondRow: '', thirdRow: '' }); i want to declare the fields dynamically.

You can do this by first building the FormControl in code using the control method of the FormBuilder and then using the addControl method of the FormGroup. For example like this:

this.myForm.addControl('controlName', 
   this.fb.control({ disabled: false, value: controlValue }, validators, asyncValidators));

Then you need to bind it using the FormControlDirective instead of the FormControlName directive because the control is already created. The binding will then look like this:

<mat-checkbox [formControl]="myForm.controls['controlName']" [value]="numberOfRow.row" [name]="numberOfRow.row">All</mat-checkbox>

Building dynamic forms, Develop a component to create form controls dynamically. The type attribute of the element will be defined based on the type field specified in the options  I was creating fields dynamically based on Json. For example if my json array has 3 value then i will create 3 input checkbox dynamically like below &lt;ng-template ngFor let-numberOfRow [ngForOf]="

As per @charlietfl issue is i am sending the string data instead of object, so i send as object like below now its working fine.

public ngOnInit() {
    this.myForm= this.fb.group(this.formFields());
 }
 public formFields() {
     let empArr = {};
     for (let val of this.myArrayList) {
         empArr[val] = '';
     }
     return empArr;
 }

so the above method formField created object like { allRow: '', firstRow: '', secondRow: '', thirdRow: '' } so now its working fine. Thanks everyone :)

How to create form Builder for Dynamic fields Angular 4?, You can do this by first building the FormControl in code using the control method of the FormBuilder and then using the addControl method of  import { FormBuilder, FormGroup, FormArray } from '@angular/forms'; Initializing the Form. Now we’ll initialize our form using FormBuilder in the ngOnInit hook. For this example we’ll create an order form that allows the user to add new items dynamically:

building with formBuilder example:

component.ts

  form: FormGroup;

  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit() {
    this.form = this.fb.group({
      dropOffAddress : ['', Validators.required]
    })

  }

  addInput() {
    this.form.addControl(`input-${Object.keys(this.form.value).length}`, new FormControl('', [Validators.required]))
  }

  removeInput(key: string) {
    this.form.removeControl(key)

  }

component.html

<form [formGroup]="form" *ngIf="show">
  <ng-container *ngFor="let f of form.controls | keyvalue">
    <mat-form-field appearance="outline" class="w-100" color="primary">
      <mat-label>Label of Input</mat-label>
      <mat-icon (click)="addInput()" color="accent" matPrefix>add</mat-icon>
      <input type="text" [formControlName]="f.key" [name]="f.key" autofocus matInput placeholder="Digite um endereço">
      <mat-icon (click)="removeInput(f.key)" matSuffix>remove</mat-icon>
      <mat-error *ngIf="form.invalid">Please fill the field</mat-error>
    </mat-form-field>
  </ng-container>
</form>

Create a dynamic form with configurable fields and validations using , Dynamic form can be very useful and more economical to create the FormBuilder, Validators, FormControl } from "@angular/forms";import  Create a form object modellink. A dynamic form requires an object model that can describe all scenarios needed by the form functionality. The example hero-application form is a set of questions—that is, each control in the form must ask a question and accept an answer. The data model for this type of form must represent a question.

How to create forms dynamically in Angular 7 using FormControl, Feb 21, 2019 · 4 min read As you can see the list above describes what fields to add. Now, to create a form dynamically in angular, we will need to do following A tech-savvy creator type — leading change through data-driven decisions  I am building a form builder for my application that through a JSON object, builds a complete form. In principle it works fine, but I can't add dynamic inputs. When I use the &quot;addInput&quot;

Reactive Forms in Angular: Dynamically Creating Form Fields With , Reactive Forms in Angular: Dynamically Creating Form Fields With import { FormBuilder, FormGroup, FormArray } from '@angular/forms';. Creating a dynamic form. Now that we’ve got the theory out of the way, we can continue on to creating a dynamic form. Let’s kick things off by creating the module for our dynamic forms. Grab the seed project here. Follow the setup instructions inside the readme file. View the final source code. DynamicFormModule

angular-dynamic-form-builder, Angular 6 dynamic from builder with Reactive Forms. public form: FormGroup;. unsubcribe: any. public fields: any[] = [. {. type: 'text',. name: 'firstName',. Reactive-forms in Angular is very powerful to handle changes in value, check the statuses, and perform validations on a form-field in particular form because of supporting FormGroup, FormControl

Comments
  • Why are you creating a string in formFields()? First of all if you want an object, create an object Secondly never try creating json manually, it is error prone , more work than needed and there are serializers in most languages to convert objects to json
  • thanks @charlietfl, i was sending data as string caused error. now passed value as Object its working fine :)
  • thanks @AlesD issue is i was sending data as STRING type, so now changed to Object now working fine.