1

I am working on Angular Reactive forms. I want to add controls dynamically to form. But when I add a control it added twice at first time I don't know why, afterward it works fine. here is the code:

<form [formGroup]="reviewForm" >        
    <span *ngIf="isClicked">              
        <div formArrayName="controlArray">
            <div 
              class="form-group"
              *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">            
              <label>{{label}} </label>                                      
              <input 
                type="{{control.value}}"                       
                class="form-control"                                        
                [formControlName]="i" >                       
            </div>  
        </div>  
    </span>
    <button type="button" (click)="addControl()">Add</button>         
</form>

component class code, addControl() is invoked on Add button click event:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {  
  reviewForm: FormGroup;
  inputArray: string[] = [
    'text', 'radio', 'checkbox', 'select', 'textarea', 'button'
  ];

  selectedControl: string = '';   
  isClicked:boolean= false;
  label: string;
  isRequired:boolean = false;
  placeHolderValue: string = "";
  ngOnInit(){
    this.reviewForm = new FormGroup({   
      // 'placeHolder' : new FormControl(null),   
      'controlArray': new FormArray([
        new FormControl(null)
    ])
    });
  }

  addControl(){    
      this.isClicked = true;
      const control = new FormControl(this.selectedControl);
      (<FormArray>this.reviewForm.get('controlArray')).push(control);      
      // console.log(this.selectedControl);      
    }  

  onSubmit(){
    console.log(this.reviewForm);
  }
}
2
  • can you show the rest of your ts code ? Commented Oct 18, 2017 at 11:02
  • Thanks for your response @Med_Ali_Rachid, I have added the rest part of ts code. Commented Oct 18, 2017 at 11:10

1 Answer 1

2

what happens is very normal , because when ur componenet is created , isClicked = false and your formArray contains already one FormControl that is not shown in the beginning because of this condition : <span *ngIf="isClicked">

when you add a new Control to the FormArray , now it contains two FormControls and isClicked becomes true , and two formControl are shown.

this the reason of this behavior

Hope it helps :)

Sign up to request clarification or add additional context in comments.

1 Comment

Exactly, this was the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.