在Angular 4的formArray中一次迭代两个元素 [英] Iterate two elements at once in a formArray in Angular 4

问题描述

我对angular 4还是比较陌生，并且遇到了以下问题:我正在建立一个包含formArray的反应形式.我的表单组是:

I am relatively new to angular 4 and I am stuck with the following problem: I am building a reactive form which contains a formArray. My form group is:

buildListInfoForm() {
this.listInfoForm = this._fb.group({
    id: new FormControl({value: this.currentListInfo.id, disabled: true}),
    belongsToProject: [this.currentListInfo.projectIri, Validators.required],
    labels: this._fb.array([]),
    comments: this._fb.array([])
});

我的标签是对象:

labels = {
    name: '',
    language: ''
}

每个标签都有名称和语言.我需要以反应形式获取每种语言的相应标签名称.
即，我有一个下拉菜单，可以在其中选择语言，然后在其旁边有一个输入字段，其中根据所选语言显示正确的名称.此名称应该是可编辑的，并且还应该可以添加更多字段(语言+名称组合).
我觉得这应该很容易做到，但是我完全陷入了困境，因为我只能设法迭代名称或语言，而不能同时迭代……

Each label has a name and a language. I need to get the corresponding label name for each language in a reactive form.
i.e. I have a dropdown menu where I can select the language and next to it I have an input field where according to the selected language, the correct name is show. This name should be editable and also it should be possible to add more fields (language+name combinations).
I feel this should be easy to do but I am completely stuck, as I only manage to iterate either the name or the language, but not both at the same time…

<h4>Labels</h4>
<span *ngIf="labels" formArrayName="labels">
     <div *ngFor="let label of labels.controls; let i=index" [formGroupName]="i">
        <mat-form-field class="width-80">
            <input matInput
                placeholder="Value"
                formControlName="value">
        </mat-form-field>
        <mat-form-field class="width-10">
            <mat-select formControlName="language">
                <mat-option value="" disabled>Select language</mat-option>
                <mat-option value="en">en</mat-option>
                <mat-option value="de">de</mat-option>
                <mat-option value="fr">fr</mat-option>
                <mat-option value="it">it</mat-option>
                <!--<mat-option *ngFor="let label of labels.controls" [value]="label.get('language').value">-->
                <!--{{label.get('language').value}}-->
                <!--</mat-option>-->
            </mat-select>
        </mat-form-field>
     </div>
     <button mat-button
        class="right"
        [color]="'primary'"
        (click)="addLabel()">
            Add Label
     </button>
</span>

有什么建议吗?

推荐答案

您正在为循环中的每个标签创建 select 元素.我想那不是您所需要的.如果您绝对需要每个选项旁边有一个输入，则可以将这些选项包装到div中，并在每个选项旁边添加一个输入标签，如下所示:

You are creating a select element for each label in a loop. I guess that's not what you need. If you absolutely need to have an input next to each option you can wrap the options into divs and add an input tag next to each option like so:

<h4>Labels</h4>
<span *ngIf="labels" formArrayName="labels">
    <mat-select formControlName="language">
        <div *ngFor="let label of labels.controls; let i=index" [formGroupName]="i">
            <mat-form-field class="width-80">
                <input matInput
                    placeholder="Value"
                    value="label.get('name').value"
                    formControlName="value">
            </mat-form-field>
            <mat-form-field class="width-10">
                <mat-option value="" disabled>Select language</mat-option>
                <mat-option[value]="label.get('language').value">
                    {{label.get('language').value}}
                </mat-option>
            </mat-form-field>
        </div>
    </mat-select>
    <button mat-button
        class="right"
        [color]="'primary'"
        (click)="addLabel()">
            Add Label
    </button>
</span>

这篇关于在Angular 4的formArray中一次迭代两个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！