angular - 动态构建具有值和标签的表单控件的方法

Question

我刚刚开始使用响应式表单。用例是我从 API 获取过滤器，然后像这样动态构建表单控件。构造函数:

constructor(
  private fb: FormBuilder,
) {
  this.typesArray = this.fb.group({});
  this.form = this.fb.group({
    typesArray:  this.typesArray,
  });
}

// a bit further I do this after finishing an API call:
response.forEach((type: any) => {
  (this.form.get('typesArray') as FormGroup).addControl(type.id, new FormControl(false));
});

这会产生一行复选框:

<div *ngFor="let Type of objectKeys(typesArray.controls)">
    <ion-checkbox class="ion-no-margin" type="checkbox" [formControlName]="Type"></ion-checkbox>
    <ion-label class="ion-no-margin" class="ml-2">**HERE I WANT THE LABEL**</ion-label>
</div>

该值由 [formControlName] 绑定(bind)，即类型 Id。 有没有办法将标签(type.title 例如“Book”、“DVD”)添加到表单控件？

我不想为了显示正确的标签而不得不用我的值和标签构建一个单独的数组。

Answer 1

你不需要单独的数组。标题或任何其他字段可以通过原始过滤器数组中的索引进行解析。

工作样本:

export interface Filter {
    id: number;
    title: string;
    selected: boolean;
}

@Component({
    selector: 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls: ['./demo.component.scss'],
})
export class DemoComponent implements OnInit {

    filters: Filter[] = [{ id: 1, title: 'Book', selected: true }, { id: 2, title: 'DVD', selected: false }];
    form: FormGroup;

    get typesArray(): FormArray {
        return this.form.get('typesArray') as FormArray;
    }

    constructor(private readonly formBuilder: FormBuilder) {}

    ngOnInit(): void {
        this.form = this.formBuilder.group({
            typesArray: new FormArray([]),
        });

        this.filters.forEach((filter) => {
            this.typesArray.push(this.formBuilder.control(filter.selected));
        });

        this.typesArray.valueChanges.subscribe((checkboxValues: boolean[]) => {
            const selectedFilters = checkboxValues
                .map((selected, index) => {
                    return { ...this.filters[index], selected };
                })
                .filter((filters) => filters.selected);

            console.log(selectedFilters);
        });
    }
}

<table>
    <tbody>
    <tr *ngFor="let control of typesArray.controls; let i = index;">
        <td>{{ filters[i].title }}</td>
        <td><input type="checkbox" [formControl]="control"></td>
    </tr>
    </tbody>
</table>