Управление формой отсутствует случайным образом для реактивной формы с фильтрующим патрубком - PullRequest
Новая
       26

Управление формой отсутствует случайным образом для реактивной формы с фильтрующим патрубком

1 голос
/ 22 мая 2019

Ниже приведена простая реактивная форма с фильтром массива флажков. Как только рендеринг страницы получит ошибку 

Cannot find control with path: 'accountsArray -> 555'

Однако фильтр работает отлично, но при удалении любого символа из фильтра выдает ошибку 

Cannot find control with path: 'accountsArray -> 123'

Элемент управления формы не найден на основе поиска.

Ниже приведен код длины, но это поможет вам ясно понять.

Компонент: 

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormArray, FormGroup, FormControl } from '@angular/forms';
import { SubAccount } from './account-model';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  searchForm: FormGroup;
  searchTerm = '';
  formUpdated = false;

  accounts = [
    new SubAccount('123'),
    new SubAccount('555'),
    new SubAccount('123555')
  ];
  subAccount = [];



  constructor(private fb: FormBuilder) { }

  get accountsArray(): FormArray {
    return this.searchForm.get('accountsArray') as FormArray;
  }

  addAccount(theAccount: SubAccount) {
    this.accountsArray.push(this.fb.group({
      account: theAccount
    }));
  }

  ngOnInit() {
    this.formUpdated = false;
    this.searchForm = this.fb.group({
      accountSearch: '',
      accountsArray: this.fb.array([new FormControl('')])
    });

    this.accounts.forEach((field: any) => {
      this.subAccount.push({ key: field.key, value: field.key });
    });

    const fieldFGs = this.subAccount.map((field) => {
      const obj = {};
      if (field.value) {
        obj[field.value] = true;
      } else {
        obj[field] = true;
      }
      return this.fb.group(obj);
    });
    const fa = this.fb.array(fieldFGs);
    this.searchForm.setControl('accountsArray', fa);
    this.formUpdated = true;
  }

  getAccountNumber(account: SubAccount) {
    return Object.keys(account)[0];
  }
}

Вид: 

<div [formGroup]="searchForm" *ngIf="formUpdated">
	<label for="search">Find an account...</label>
  <input id="search" formControlName="accountSearch" [(ngModel)]="searchTerm" />
	<div formArrayName="accountsArray" *ngIf="formUpdated">
		<div *ngFor="let account of accountsArray.controls | filter: 'key' :searchTerm; let ind=index">
      <input type="checkbox" id="checkbox_claim_debtor_{{ind}}" formControlName="{{getAccountNumber(account.controls)}}"/>
        <span> {{getAccountNumber(account.controls)}} </span>
		</div>
	</div>
</div>

Труба: 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(items: any[], field: string, value: string): any[] {
    if (!value && !items) {
      return items;
    }
    return items.filter((item) => {
      const val = Object.keys(item.controls)[0];
      if (val && val.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
        return true
      } else {
        return false;
      }
    });
  }
}

Ценю вашу помощь.

Ссылка на стек:

https://stackblitz.com/edit/angular-9ouyqr

1 Ответ

0 голосов
/ 22 мая 2019

, пожалуйста, проверьте [formGroupName] = "ind" , он не записывается при переборе массива формы, имя формы группы должно быть дополнено индексом формы 

<div [formGroup]="searchForm" *ngIf="formUpdated">
    <label for="search">Find an account...</label>
  <input id="search" formControlName="accountSearch" [(ngModel)]="searchTerm" />
    <div formArrayName="accountsArray" *ngIf="formUpdated">
        <div [formGroupName]="ind" *ngFor="let account of accountsArray.controls | filter: 'key' :searchTerm; let ind=index"
    >
      <input type="checkbox" id="checkbox_claim_debtor_{{ind}}" formControlName="{{getAccountNumber(account.controls)}}"/>
        <span> {{getAccountNumber(account.controls)}} </span>
        </div>
    </div>
</div>
...