Add inputs dynamically when click on button in angular 4

Question

I would create a form with the possibility to add inputs dynamically
I found a question about the same problem in angular 2 but I can't make it working in my exemple

Here's my component ts file :

export class AjoutProjetComponent implements OnInit {
    isLinear = false;
    firstFormGroup: FormGroup;
    secondFormGroup: FormGroup;

    constructor(private _formBuilder: FormBuilder) {}

    ngOnInit() {
        this.secondFormGroup = this._formBuilder.group({
            pers: [this._formBuilder.array([this.createItem()])]
        });
    }
    createItem(): FormGroup {
        return this._formBuilder.group({
            name: ['', Validators.required]
            poste: ['', Validators.required],

        });
    }
    addItem(): void {
        const control = < FormArray > this.secondFormGroup.controls['pers'];
        control.push(this.createItem());
    }

}

then HTML file

<mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>Constituez votre équipe</ng-template>
        <div formArrayName="pers">
            <mat-form-field *ngFor="let control of secondFormGroup.controls.pers.controls; let i= index">
                <input matInput placeholder="Nom collaborateur" formControlName="name" required>
            </mat-form-field>

        </div>
    </form>
</mat-step>
        <div>{{secondFormGroup.value | json}}</div>

When I click in my favorite icon I get this error :

ERROR TypeError: control.push is not a function at AjoutProjetComponent.addItem

How can I make adding dynamically inputs working ?

UPDATE I have updated my html code so that I could print two inputs but when I run my code I get this error now

ERROR Error: Cannot find control with path: 'pers -> name'

Armen Vardanyan · Accepted Answer · 2017-11-21 22:16:46Z

1

You did not declare your FormArray properly. You use arrays only to initialize simple FormControls, not FormGroups or FormControls, change to :

this.secondFormGroup = this._formBuilder.group({
        pers: this._formBuilder.array([this.createItem()]) // remove opening and closing brackets
    });

To see the inputs added dynamically to the html, you need to use an ngFor loop. I think you somewhat misunderstood the usage of formArrayName, which only adds context to the template to use with FormArrays. Try this:

<ng-container formArrayName="pers">
  <input placeholder="Address"  
    *ngFor="let control of secondFormGroup.controls.pers.controls"
    [formControl]="control.controls.name" required />
</ng-container>

And read more about FormArrayName directive here

edited Nov 21, 2017 at 22:16

answered Nov 21, 2017 at 11:40

Armen Vardanyan

3,3251 gold badge16 silver badges34 bronze badges

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

2 Comments

Hamza Haddad Over a year ago

II don't get any error but , no input field is getting added to my page.

Hamza Haddad Over a year ago

Thank you that's working , but I have a question: What is the difference between [formControl] and formControlName

Collectives™ on Stack Overflow

Add inputs dynamically when click on button in angular 4

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related