组 angular 内的嵌套格式数组 6
nested formarray within group angular 6
美好的一天。
我在寻找解决方案,尽管有一个与我所问的问题类似的观点,但我确信这个问题更独特,而不是重复。
这是我的 html 表格:
<div class="form-group col-md-6" formGroupName="schema">
<div formArrayName="currencies">
<input type="text" class="form-control" id="percentage" formControlName="percentage" placeholder="Discount %*" required>
</div>
</div>
这是我的 ts formBuilder。
this.createPromo = this.fb.group({
type: ['promotion'],
name: ['', Validators.required],
description: ['', Validators.required],
enabled: ['', Validators.required],
promotion_type: ['', Validators.required],
start: ['', Validators.required],
end: ['', Validators.required],
schema: this.fb.group({
currencies: this.fb.array([
this.fb.group({
percentage: '',
currency: 'ZAR'
})
])
}),
});
所以我希望我的表单作为分组数组提交。但是,控制台中的错误如下 Cannot find control with path: 'schema -> currencies -> percentage'
,因此我无法提交我的表单,因为即使输入数字后 percentage
仍为空。
您的场景需要以下内容:
- A parent
div
与 formGroupName="schema"
.
- 里面有一个
div
和 formArrayName="currencies"
。
- 里面是
div
和 ngFor="let currencyGroup of currencyFormGroups; let i = index;"
。请注意 currencyFormGroups
是组件 Class 中的 getter。
- 其中,
div
和 [formGroupName]="i"
其中 i
是我们在 *ngFor
. 中动态创建的索引
- 事实上,两个
input
分别带有 formControlName="percentage"
和 formControlName="currency"
。
.
以下是转换为代码的所有这些步骤:
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators, FormBuilder } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
createPromo: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.createPromo = this.fb.group({
'type': ['type'],
name: ['name', Validators.required],
description: ['description', Validators.required],
enabled: ['enabled', Validators.required],
promotion_type: ['promotion_type', Validators.required],
start: ['start', Validators.required],
end: ['end', Validators.required],
schema: this.fb.group({
currencies: this.fb.array([
this.fb.group({
percentage: 'percentage',
currency: 'ZAR'
}),
this.fb.group({
percentage: 'percentage',
currency: 'INR'
}),
])
}),
});
}
get currencyFormGroups() {
return (<FormArray>(<FormGroup>this.createPromo.get('schema')).get('currencies')).controls;
}
}
模板:
<form [formGroup]="createPromo">
...
<div formGroupName="schema">
<div formArrayName="currencies">
<div *ngFor="let currencyGroup of currencyFormGroups; let i = index;">
<div [formGroupName]="i">
<input
type="text"
name="percentage"
formControlName="percentage">
<input
type="text"
name="currency"
formControlName="currency">
</div>
</div>
</div>
</div>
</form>
这里有一个 Sample StackBlitz 供您参考。
PS: 为简单起见,我将所有表单控件视为 input
。请相应地进行更改。
美好的一天。
我在寻找解决方案,尽管有一个与我所问的问题类似的观点,但我确信这个问题更独特,而不是重复。
这是我的 html 表格:
<div class="form-group col-md-6" formGroupName="schema">
<div formArrayName="currencies">
<input type="text" class="form-control" id="percentage" formControlName="percentage" placeholder="Discount %*" required>
</div>
</div>
这是我的 ts formBuilder。
this.createPromo = this.fb.group({
type: ['promotion'],
name: ['', Validators.required],
description: ['', Validators.required],
enabled: ['', Validators.required],
promotion_type: ['', Validators.required],
start: ['', Validators.required],
end: ['', Validators.required],
schema: this.fb.group({
currencies: this.fb.array([
this.fb.group({
percentage: '',
currency: 'ZAR'
})
])
}),
});
所以我希望我的表单作为分组数组提交。但是,控制台中的错误如下 Cannot find control with path: 'schema -> currencies -> percentage'
,因此我无法提交我的表单,因为即使输入数字后 percentage
仍为空。
您的场景需要以下内容:
- A parent
div
与formGroupName="schema"
. - 里面有一个
div
和formArrayName="currencies"
。 - 里面是
div
和ngFor="let currencyGroup of currencyFormGroups; let i = index;"
。请注意currencyFormGroups
是组件 Class 中的 getter。 - 其中,
div
和[formGroupName]="i"
其中i
是我们在*ngFor
. 中动态创建的索引
- 事实上,两个
input
分别带有formControlName="percentage"
和formControlName="currency"
。
.
以下是转换为代码的所有这些步骤:
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators, FormBuilder } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
createPromo: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.createPromo = this.fb.group({
'type': ['type'],
name: ['name', Validators.required],
description: ['description', Validators.required],
enabled: ['enabled', Validators.required],
promotion_type: ['promotion_type', Validators.required],
start: ['start', Validators.required],
end: ['end', Validators.required],
schema: this.fb.group({
currencies: this.fb.array([
this.fb.group({
percentage: 'percentage',
currency: 'ZAR'
}),
this.fb.group({
percentage: 'percentage',
currency: 'INR'
}),
])
}),
});
}
get currencyFormGroups() {
return (<FormArray>(<FormGroup>this.createPromo.get('schema')).get('currencies')).controls;
}
}
模板:
<form [formGroup]="createPromo">
...
<div formGroupName="schema">
<div formArrayName="currencies">
<div *ngFor="let currencyGroup of currencyFormGroups; let i = index;">
<div [formGroupName]="i">
<input
type="text"
name="percentage"
formControlName="percentage">
<input
type="text"
name="currency"
formControlName="currency">
</div>
</div>
</div>
</div>
</form>
这里有一个 Sample StackBlitz 供您参考。
PS: 为简单起见,我将所有表单控件视为 input
。请相应地进行更改。