Primeng Dropdown 未绑定 Angular FormArray 中的选项
Primeng Dropdown not binding the options in Angular FormArray
我正在尝试在 Angular 7 的表单数组中绑定 primeng 下拉列表。但是给定的选项没有绑定。
如果相同,则使用表单的外部进行绑定。你能帮我解决这个问题吗?我犯了什么错误。
这是 stackblitz 上的代码
https://stackblitz.com/edit/angular-form-array-example-d7vksr?file=package.json
你可以试试这些
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);
}
}
我正在尝试在 Angular 7 的表单数组中绑定 primeng 下拉列表。但是给定的选项没有绑定。
如果相同,则使用表单的外部进行绑定。你能帮我解决这个问题吗?我犯了什么错误。
这是 stackblitz 上的代码
https://stackblitz.com/edit/angular-form-array-example-d7vksr?file=package.json
你可以试试这些
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);
}
}