Angular 5 表格数组
Angular 5 FormArray
我的 Angular 5 / Angular Material 应用程序中有这个 FormArray:
this.form = new FormGroup({
customerNumberContainers: new FormArray([
new FormGroup({
contactTenant: new FormControl('', [Validators.required, Validators.minLength(2)]),
customerNumber: new FormControl('', [Validators.required, Validators.minLength(2)])
}),
]),
...
其实我不知道如何运行通过这个FormArray。
我已经在
上试过了
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formGroupName="customerNumberContainers">
<div *ngFor="let customerNumberContainer of form.controls['customerNumberContainers']; index as i">
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Tenant" formControlName="customerNumberContainer[i].contactTenant">
</mat-input-container>
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Customernumber" formControlName="customerNumberContainer[i].customerNumber">
</mat-input-container>
</div>
</div>
...
实际上你应该怎么做:
有一个方法 return 你的控制数组
get customerNumberContainers(): FormArray {
return this.form.get("customerNumberContainers") as FormArray;
}
您将使用变量 i 来管理数组中的表单组
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formArrayName="customerNumberContainers">
<div *ngFor="let customerNumberContainer of customerNumberContainers.controls; index as i" [formGroupName]="i">
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Tenant" formControlName="contactTenant">
</mat-input-container>
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Customernumber" formControlName="customerNumber">
</mat-input-container>
</div>
</div>
...
您可以创建添加方法和删除方法来管理数组中的表单组
add(data?: any) {
/// data is to set up values to your internal form (useful for edition)
this.customerNumberContainers.push(this.fb.group({
}))
}
remove(index: number) {
this.customerNumberContainers.removeAt(index)
}
希望对你有所帮助
问候
改变你的
<div *ngFor="let customerNumberContainer of form.controls['customerNumberContainers']; index as i">
收件人:
<div *ngFor="let item of getControls(); let i = index">
并在您的 .ts 文件中添加:
getControls() {
const fa = this.form.get('customerNumberContainers') as FormArray; return
fa.controls;
}
最终结果应该是:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formArrayName="customerNumberContainers">
<div *ngFor="let item of getControls(); let i = index">
<div [formGroupName]="i">
<mat-input-container class="full-width-input" style="min-
width:100px;">
<input matInput placeholder="Tenant" formControlName="contactTenant">
</mat-input-container>
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Customernumber" formControlName="customerNumber">
</mat-input-container>
</div>
</div>...
希望这对您有所帮助:)
Have a look at the working demo
Explanation:
- 要在 Angular 中使用表单数组,需要做很多事情。请参阅 Aligator.io 博客 post。
- 不带方括号使用时:
formControlName="value"
,值表示为字符串。
- 当使用方括号时:
[formControlName]="customerNumberContainer[i].contactTenant"
,则接受变量。
你打算在表单数组中有多个表单组吗?
this.form = new FormGroup({
customerNumberContainers: new FormArray([
new FormControl('', [Validators.required, Validators.minLength(2)]),
new FormControl('', [Validators.required, Validators.minLength(2)])
])
});
如果不是,应该是这个样子。并记住在更改表单数组的值时使用常量
const arr = <FormArray>this.form;
然后就可以推等了...
arr.push(new FormControl(''));
如果不这样做,某些表单数组函数将无法使用。
我的 Angular 5 / Angular Material 应用程序中有这个 FormArray:
this.form = new FormGroup({
customerNumberContainers: new FormArray([
new FormGroup({
contactTenant: new FormControl('', [Validators.required, Validators.minLength(2)]),
customerNumber: new FormControl('', [Validators.required, Validators.minLength(2)])
}),
]),
...
其实我不知道如何运行通过这个FormArray。 我已经在
上试过了<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formGroupName="customerNumberContainers">
<div *ngFor="let customerNumberContainer of form.controls['customerNumberContainers']; index as i">
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Tenant" formControlName="customerNumberContainer[i].contactTenant">
</mat-input-container>
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Customernumber" formControlName="customerNumberContainer[i].customerNumber">
</mat-input-container>
</div>
</div>
...
实际上你应该怎么做:
有一个方法 return 你的控制数组
get customerNumberContainers(): FormArray {
return this.form.get("customerNumberContainers") as FormArray;
}
您将使用变量 i 来管理数组中的表单组
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formArrayName="customerNumberContainers">
<div *ngFor="let customerNumberContainer of customerNumberContainers.controls; index as i" [formGroupName]="i">
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Tenant" formControlName="contactTenant">
</mat-input-container>
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Customernumber" formControlName="customerNumber">
</mat-input-container>
</div>
</div>
...
您可以创建添加方法和删除方法来管理数组中的表单组
add(data?: any) {
/// data is to set up values to your internal form (useful for edition)
this.customerNumberContainers.push(this.fb.group({
}))
}
remove(index: number) {
this.customerNumberContainers.removeAt(index)
}
希望对你有所帮助
问候
改变你的
<div *ngFor="let customerNumberContainer of form.controls['customerNumberContainers']; index as i">
收件人:
<div *ngFor="let item of getControls(); let i = index">
并在您的 .ts 文件中添加:
getControls() {
const fa = this.form.get('customerNumberContainers') as FormArray; return
fa.controls;
}
最终结果应该是:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formArrayName="customerNumberContainers">
<div *ngFor="let item of getControls(); let i = index">
<div [formGroupName]="i">
<mat-input-container class="full-width-input" style="min-
width:100px;">
<input matInput placeholder="Tenant" formControlName="contactTenant">
</mat-input-container>
<mat-input-container class="full-width-input" style="min-width:100px;">
<input matInput placeholder="Customernumber" formControlName="customerNumber">
</mat-input-container>
</div>
</div>...
希望这对您有所帮助:)
Have a look at the working demo
Explanation:
- 要在 Angular 中使用表单数组,需要做很多事情。请参阅 Aligator.io 博客 post。
- 不带方括号使用时:
formControlName="value"
,值表示为字符串。 - 当使用方括号时:
[formControlName]="customerNumberContainer[i].contactTenant"
,则接受变量。
你打算在表单数组中有多个表单组吗?
this.form = new FormGroup({
customerNumberContainers: new FormArray([
new FormControl('', [Validators.required, Validators.minLength(2)]),
new FormControl('', [Validators.required, Validators.minLength(2)])
])
});
如果不是,应该是这个样子。并记住在更改表单数组的值时使用常量
const arr = <FormArray>this.form;
然后就可以推等了...
arr.push(new FormControl(''));
如果不这样做,某些表单数组函数将无法使用。