В пользовательском интерфейсе установлены флажки с использованием угловых реактивных форм

Question

У меня есть форма, которая отправляет правильные данные в мой массив API / Forms при "сохранить". Существует множество флажков, которые пользователь может выбрать. После выбора я хочу дать резюме выбранных значений. Я могу представить это после сохранения формы, так как значения будут в массиве реактивных форм, однако я хочу подобрать значение для целей презентации перед сохранением / отправкой формы. StackBlitz - https://stackblitz.com/edit/angular-fgupp3

Я почти достиг этого, однако первый флажок возвращает значение true / false, тогда как остальные флажки возвращают желаемое значение

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, может быть решена путем изменения функциональной строки if в onChange 76 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
    });
}