Angular 2 Reactive Forms - Dynamically Create Input Fields

Question

Using dynamic forms, I need to give users the ability to create form fields dynamically. There should be a "Add" button, and when the user clicks on this button, 4 input fields will be created.

I can create one field dynamically so far. Below is my code

In HTML, I use an index to create formControlName

<div class="row">
          <div class="col-xs-12">
            <div formArrayName="properties">

              <button class="btn btn-default btn-xs" type="button" (click)="onAddProperty()">Add</button>
              <div class="form-group" *ngFor="let propertyControl of searchForm.get('properties').controls; let i = index">
                <input type="text" class="form-control" [formControlName]="i">

                <!--       <input type="text" class="form-control" [formControlName]="'B'"+"i">
              <input type="text" class="form-control" [formControlName]="'C'"+"i">
              <input type="text" class="form-control" [formControlName]="'D'"+"i"> -->
              </div>
            </div>
          </div>
        </div>

and then in the component by clicking the control on the FormArray

searchForm: FormGroup;
onAddProperty() {
    const control = new FormControl(null);
    (<FormArray>this.searchForm.get('properties')).push(control);
  }

Now I can click the "Add" button any number of times, and for each click one input field will be created.

4 . , ControlName. , , 1 , 4 .

Answer 1

, for . , ( ). , formControlName formArray, - :

<div formArrayName="properties">
  <div *ngFor="let prop of searchForm.get('properties').controls; let i=index">
    <input type="text" class="form-control" [formControlName]="i">
  </div>
</div>

, 4 :

onAddProperty() {
  for(var i=1; i<=4; i++) {
    <FormArray>this.searchForm.get('properties').push(new FormControl());
  }
}

DEMO

Answer 2

Plunker

<form novalidate (ngSubmit)="onSubmit()" [formGroup]="users">
      <div formArrayName="data">
        <ng-container *ngFor="let user of fData.controls; index as i">
          <div [formGroupName]="i">
            <label>
              <span>Full name</span>
              <input type="text" placeholder="Name" formControlName="name">
            </label>
            <div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('required')">
              Name is required
            </div>
            <div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('minlength')">
              Minimum of 2 characters
            </div>
            <div formGroupName="account">
              <label>
                <span>Email address</span>
                <input type="email" placeholder="Email" formControlName="email">
              </label>
              <div
                class="error"
                *ngIf="user.get('account').get('email').hasError('required') && user.get('account').get('email').touched">
                Email is required
              </div>
              <label>
                <span>Confirm address</span>
                <input type="email" placeholder="Address" formControlName="confirm">
              </label>
              <div
                class="error"
                *ngIf="user.get('account').get('confirm').hasError('required') && user.get('account').get('confirm').touched">
                Confirming email is required
              </div>
            </div>
            <button type="submit" [disabled]="user.invalid">Sign up</button>
          </div>
        </ng-container>
      </div>
    </form>