Typescript 使用FormArray/FormGroup创建和编辑表单动态输入文本框值？以角的形式反应

在我的angular 7应用程序中，我需要实现在表单中动态填充输入文本框的功能，并且需要创建/编辑API的值。 我已经完成了以角度形式动态填充输入文本框。现在我需要用这些字段创建和编辑。你能建议怎么做吗？在安圭拉7

用例例如：

---

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

如果您有API返回的对象，并且希望将这些值预填充到formarray中，然后，您必须在表单组内创建一个动态表单数组，并在收到的对象上迭代，并将所需的值分配给该表单数组内的表单控件

如果你已经发布了你尝试过的代码，那就太好了。 我刚刚创建了一个示例对象和一个formarray

.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)
}
}

<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>

导出类XYZ{
语言=[{Id:1，lang:english}，{Is:2，lang:French}；]
动态：FormGroup；
恩戈尼尼特（）{
this.dynamic=this.fb.group({
Langs:this.fb.array（[]）
});
for（在这个.Languages中设x）{
this.filtersFormArray.push（this.createFilterGroup（this.Languages[x].lang））；
}
createFilterGroup（文本）{
返回此.fb.group({
displayText:[文本]
});
}
获取filtersFormArray（）{
返回（this.dynamic.get（'Langs'）；
}
}
savelangs（）{
console.log（this.dynamic.value）
}
}

.html文件中的

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)
}
}

<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>

拯救

---

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

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