Динамически добавляя select, чьи параметры меняются, поскольку пользователь делает выбор без сброса уже выбранных значений? - PullRequest
Новая
       27

Динамически добавляя select, чьи параметры меняются, поскольку пользователь делает выбор без сброса уже выбранных значений?

0 голосов
/ 15 января 2019

У меня проблема с динамически добавляемыми элементами формы, когда добавление нового набора элементов сбрасывает значение предыдущего элемента.

При добавлении еще одного набора оно показывает выбранное значение предыдущего выбора, но один, но очищает выбранное значение непосредственного предыдущего выбора. Это не влияет на элементы ввода. 

    HTML code:

    <div class="form-group" [formGroup]="delegateesForm">
        <div formArrayName="items" *ngFor="let item of delegateesForm.get('items')?.controls; let i = index;">
        <div class="input-group mb-2 mr-sm-2 mb-sm-0" [formGroupName]="i">
            <mat-form-field class="mat-full-width">
            <mat-select formControlName="delegateeEmployeeNumber" placeholder="Employee Number">
                <mat-option *ngFor="let emp of employees" [value]="emp.employNumber">
                {{ emp.employNumber }} {{ emp.firstName }} {{ emp.lastName }}
                </mat-option>
            </mat-select>
            </mat-form-field>
            <mat-form-field class="mat-full-width">
            <input matInput formControlName="title" placeholder="Delegation Title">
            </mat-form-field>
            <mat-form-field class="mat-full-width">
            <input matInput formControlName="comments" placeholder="Delegation Comments">
            </mat-form-field>
        </div>
        <hr />
        </div>
    </div>
    <button type="button" mat-raised-button (click)="addItem()" color="warn">Add Delegatee</button>
    <hr />

    Typescript code:

    employees$: Observable<shared.Employee[]>;
    employees: shared.Employee[];
    delegateesForm: FormGroup;
    delegateesItems: FormArray;
    delegations: Array<any>;
    delegationsEmployeesIds: Array<any>;
    modelData;
    .
    .
    .
    constructor(private formBuilder: FormBuilder) 
    {
        this.delegations = [];
            this.delegationsEmployeesIds = [];
            this.modelData=[];
    }
    ...
    ngOnInit() {
            this.delegateesForm = this.formBuilder.group({
            items: this.formBuilder.array([this.createItem()])
        });
    }

    createItem(): FormGroup {
        return this.formBuilder.group({
            delegateeEmployeeNumber: "",
            title: "",
            comments: ""
        });
    }

    addItem(): void {
        this.employees$=undefined;
        this.employees$=this.getEmployeesInDepartment();
        this.employees$.subscribe(emps => {
            this.employees=emps;

            this.delegateesItems = this.delegateesForm.get("items") as FormArray;
            this.delegateesItems.push(this.createItem());
            console.log("this.delegateesForm.value ",this.delegateesForm.value);
            this.modelData = Object.assign({}, this.delegateesForm.value);
            Object.entries(this.modelData.items[0]).forEach(([key, val]) => console.log(`key val ${key}: ${val}`));
            for(let i=0;i<this.employees.length;i++)
            {
                console.log(this.modelData);
                if(this.modelData.items!==undefined)
                {
                    const emp=this.employees[i];
                    this.modelData.items.forEach(delegatee => {
                        if(delegatee.delegateeEmployeeNumber===emp.employNumber)
                        {
                            this.employees.splice(i,1);
                        }
                    });
                }
            }
        });

    }

Ожидаемый результат состоит в том, что нажатие на кнопку Добавить делегата создаст новый набор элементов ввода, который не включает ни одного ранее выбранного сотрудника, как это происходит.

Тем не менее, он всегда очищает выбранное значение выбора самого непосредственного предыдущего выбора, хотя входы всегда сохраняют свои значения.

...