Primeng Dropdown 未绑定 Angular FormArray 中的选项

Question

我正在尝试在 Angular 7 的表单数组中绑定primeng 下拉列表。但是给定的选项没有得到绑定。

如果在表单的外部使用相同，则它会绑定。你能帮我解决这个问题吗？我在其中犯了什么错误。

这是stackblitz的代码

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

Answer 1

你可以试试这些

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);
    }  
}