使用 FormArray/FormGroup 创建和编辑表单动态输入文本框值？具有角度的反应形式答案

【问题标题】：Create and edit form dynamic input text boxes values using FormArray/FormGroup? With reactive forms in angular使用 FormArray/FormGroup 创建和编辑表单动态输入文本框值？具有角度的反应形式
【发布时间】：2020-02-17 17:04:08
【问题描述】：

在我的 Angular 7 应用程序中，我需要实现在表单中动态填充输入文本框的功能，并且需要创建/编辑 API 值。我完成了以角度形式动态填充输入文本框。现在我需要使用这些字段进行创建和编辑。你能建议如何做到这一点吗？在 Angular7 中。

用例例如：我有一个带有 id 和名称的语言数组对象，例如。 Languages=[{1,En}, {2, Fr}...] 从 api 接收。现在第一步，我需要使用 FormArray/FormGroup 角度表单指令为每个文本框填充语言名称作为标签的那些语言的输入文本框。创建和编辑在这些文本框中输入的值。需要实现保存功能..

【问题讨论】：

如果我正确理解了您的问题，您正在尝试创建一个 json 对象以使用来自 angular FormGroup 的数据发布到 API。您可以查看 myform.value 或 myform.getRawValue()。
感谢您的回复 Teja，我有一个带有 id 和名称的语言数组对象，例如。 Languages=[{1,En}, {2, Fr}...] 从 api 接收。现在第一步，我需要使用 FormArray/FormGroup 角度表单指令为每个文本框填充语言名称作为标签的那些语言的输入文本框。创建和编辑在这些文本框中输入的值。需要实现保存功能..

标签： typescript angular7 reactive

【解决方案1】：

如果您有一个由 API 返回的对象，并且想要将这些值预填充到您的表单数组中，那么您必须在表单组内创建一个动态表单数组并遍历您收到的对象并分配该表单数组中的表单控件所需的值。

如果你发布了你尝试过的代码会很好。 我刚刚创建了一个示例对象和一个表单数组。

在 .ts 文件中

export class XYZ {
    Languages = [{ Id: 1, lang: "english" }, { Is: 2, lang: "French" };]
    dynamic: FormGroup;

ngOnInit() {
    this.dynamic = this.fb.group({
        Langs: this.fb.array([])
    });

    for (let x in this.Languages) {
        this.filtersFormArray.push(this.createFilterGroup(this.Languages[x].lang));
    }

    createFilterGroup(text) {
        return this.fb.group({
            displayText: [text]
        });

    }
    get filtersFormArray() {
        return (<FormArray>this.dynamic.get('Langs'));
    }
}
savelangs() {
    console.log(this.dynamic.value)
}
}

在 .html 文件中

<div formArrayName="Langs">
    <div *ngFor="let filter of filtersFormArray.controls; let i = index;">
        <div [formGroupName]="i">
            <mat-form-field>
                <textarea matInput formControlName="displayText"></textarea>
            </mat-form-field>
        </div>
    </div>
</div>
<button (click)="savelangs()">Save </button>

您也可以编辑值，当单击保存按钮时，新值将打印在控制台中。

【讨论】：