gpt4 book ai didi

angular - 组angular 6中的嵌套formarray

转载 作者:行者123 更新时间:2023-12-03 15:57:03 24 4
gpt4 key购买 nike

再会。

我一直在寻找解决方案,尽管有一个与我要问的观点相似的问题,但我敢肯定,这是一个更加独特的地方,而不是重复的。

这是我的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为空,我也无法提交表单。

最佳答案

您需要满足以下条件:

  • 带有div的父formGroupName="schema"
  • 在其中,一个带有divformArrayName="currencies"
  • 在其中,一个带有divngFor="let currencyGroup of currencyFormGroups; let i = index;"。请注意,currencyFormGroups是您的组件类中的 setter/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。请相应地进行更改。

    关于angular - 组angular 6中的嵌套formarray,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52831105/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com