在 UI 中使用 Angular 反应形式显示选中的复选框

Question

我有一个表单可以在“保存”时将正确的数据发送到我的 api/forms 数组。用户可以选择一系列复选框。选择后，我想给出所选值的摘要。我可以在表单保存之后呈现这个值，因为值将在反应表单数组上，但是我想在保存/表单提交之前获取值以用于演示目的。 StackBlitz - https://stackblitz.com/edit/angular-fgupp3

我已经差不多完成了，但是第一个复选框会返回一个真/假值，而其余的复选框会返回所需的值

component.html

<form [formGroup]="form" (ngSubmit)="onSubmit('formSubmit')" novalidate>

    <div class="row">
      <div class="col-md-8">{{form.value.selection}}</div> <!--present selected values here -->
        <div class="col-md-8">
            <input type="text" formControlName="title" class="form-control" placeholder="Title">
        </div>

        <div class="col-md-6">
            <label formArrayName="selection" *ngFor="let order of form.controls.selection.controls; let i = index">
                <input (change)="onChange(i, $event)" type="checkbox" [formControlName]="i">
                {{ordersData[i].name}}
            </label>
        </div>
    </div>
    <div class="form-group text-center">
        <button class="btn btn-success btn-info" (click)="goToNext(Work)"> Next </button>
    </div>

</form>

component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { Personal } from '../data/formData.model';
import { FormDataService } from '../data/formData.service';
import { of } from 'rxjs';
import { FormGroup, FormBuilder, ValidatorFn, FormArray, FormControl } from '@angular/forms';

@Component({
    selector: 'mt-wizard-personal',
    templateUrl: './personal.component.html',
})

export class PersonalComponent implements OnInit {
    personal: Personal;
    form: FormGroup;
    ordersData = [];
    selectedItems: any[] = [];

    constructor(private formBuilder: FormBuilder, private router: Router, private formDataService: FormDataService) {
    }

    ngOnInit() {
        this.personal = this.formDataService.getPersonal();
        this.form = this.createEntry(this.formBuilder);

        // synchronous orders
        // this.ordersData = this.getOrders();
        // this.addCheckboxes();

        of(this.getOrders()).subscribe(selection => {
            this.ordersData = selection;
            this.addCheckboxes();
        });
    }

    createEntry(formBuilder: FormBuilder) {
        return this.formBuilder.group({
            title: this.personal.title,
            creationDate: this.personal.creationDate,
            //selection: new FormArray([], minSelectedCheckboxes(1))
            selection: new FormArray([])
        });
    }

    private addCheckboxes() {
        this.ordersData.forEach((o, i) => {
            const control = new FormControl; // if first item set to true, else false
            (this.form.controls.selection as FormArray).push(control);
        });
    }


    getOrders() {
        return [
            { id: 100, name: 'order 1' },
            { id: 200, name: 'order 2' },
            { id: 300, name: 'order 3' },
            { id: 400, name: 'order 4' }
        ];
    }

    onChange(i: boolean) {
        console.log(i);
        if (i) {
            const selectedOrderIds = this.form.value.selection
                .map((v, i) => v ? this.ordersData[i].id : null)
                .filter(v => v !== null);

            return this.form.value.selection = selectedOrderIds;
        }
    }

    save(form: any): boolean {
        const selectedOrderIds = this.form.value.selection
            .map((v, i) => v ? this.ordersData[i].id : null)
            .filter(v => v !== null);
        console.log(selectedOrderIds);
        this.form.value.selection = selectedOrderIds;
        const data: Personal = Object.assign({}, this.form.value);
        this.formDataService.setPersonal(data);

        return true;
    }

    goToNext(form: any) {
        if (this.save(form)) {
            // Navigate to the work page
            this.router.navigate(['/work']);
        }
    }

}

Answer 1

第一个值标记为true而不是100的问题可以解决更改onChange函数第76行中的if if (i || i===0)：

   onChange(i: boolean) {
        if (i || i===0) {
            const selectedOrderIds = this.form.value.selection
                .map((v, i) => v ? this.ordersData[i].id : null)
                .filter(v => v !== null);
            return this.form.value.selection = selectedOrderIds;
        }
    }

不幸的是，在 javascript number = 0; if(number) 中，这是一个虚假的表达式。 另外OnInit 方法有点乱，取而代之的是getOrders() 我将在组件中使用一个变量，如下所示：

orders = [
  { id: 100, name: 'order 1' },
  { id: 200, name: 'order 2' },
  { id: 300, name: 'order 3' },
  { id: 400, name: 'order 4' }
]

可以在组件 .ts 和 .html 中使用，我将像这样简化“OnInit”：

ngOnInit() {
    this.personal = this.formDataService.getPersonal();
    const ordersArray = new FormArray([]);
    this.orders.forEach(order => {
      ordersArray.push(new FormControl);
    });

    this.form = this.formBuilder.group({
        title: this.personal.title,
        creationDate: this.personal.creationDate,
        selection: ordersArray
    });
}