Primeng Dropdown not binding the options in Angular FormArray

Question

I am trying to bind the primeng dropdown in the Array of form in Angular 7. But the given options are not getting bind.

If am same using out side of form its getting bind. Can you help me to resolve this. what mistake I did in it.

Here is the Code at stackblitz

https://stackblitz.com/edit/angular-form-array-example-d7vksr?file=package.json

Do you want the array to be populated in Select drop down under credentials ? — Raahul
– Raahul, Commented Jul 30, 2019 at 13:35

Bhagwat Tupe · Accepted Answer · 2019-07-30 14:08:59Z

3

you can try these

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

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="published"> Published
      <div *ngIf="form.controls.published.value">
        <h2>Credentials</h2>
        <button (click)="addCreds()">Add</button>
        <div formArrayName="credentials" *ngFor="let creds of form.get('credentials').controls; let i = index">
          <ng-container [formGroupName]="i">
            <input placeholder="Username" formControlName="username">
            <input placeholder="Password" formControlName="password">
              <p-dropdown formControlName="car" [options]="cars" placeholder="Select a Brand"></p-dropdown>
          </ng-container>
        </div>
      </div>
    </form>
    <div (click)="formData()"> SUBMIT </div> 
  `,
})
export class AppComponent  {
    form: FormGroup;
    creds :FormArray;
    cars:any[]=[];
    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            published: true,
            credentials: this.fb.array([]),
        });
        this.creds  = this.form.controls.credentials as FormArray
        this.cars = [
            {label: 'Audi', value: 'Audi'},
            {label: 'BMW', value: 'BMW'},
            {label: 'Fiat', value: 'Fiat'},
            {label: 'Ford', value: 'Ford'},
            {label: 'Honda', value: 'Honda'},
            {label: 'Jaguar', value: 'Jaguar'},
            {label: 'Mercedes', value: 'Mercedes'},
            {label: 'Renault', value: 'Renault'},
            {label: 'VW', value: 'VW'},
            {label: 'Volvo', value: 'Volvo'}
        ];
    }

    addCreds() {
        const creds = this.form.controls.credentials as FormArray;
        creds.push(this.fb.group({
            username: '',
            password: '',
            car: []
        }));
    }       

    formData(){
        console.log(this.form.value);
    }  
}

edited Jul 30, 2019 at 14:08

answered Jul 30, 2019 at 12:54

Bhagwat Tupe

1,9631 gold badge16 silver badges28 bronze badges

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

2 Comments

user3836476 Over a year ago

the above you have given is not wokring.

Bhagwat Tupe Over a year ago

If still you have facing any issue then tell me i will always ready for happily

Collectives™ on Stack Overflow

Primeng Dropdown not binding the options in Angular FormArray

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related