Вложенная группа форм запускает обнаружение изменений несколько раз - PullRequest
Новая
       103

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

0 голосов
/ 01 августа 2020

Используя этот в качестве ссылки, я реплицировал создание группы динамических c вложенных форм с использованием реактивных форм.

Но он запускает обнаружение изменений несколько раз при добавлении нового сформировать группу в массив форм.

мой код

компонент. html

<button mat-flat-button color="primary" (click)="addMaterial()">Add</button>

<form [formGroup]="positionFormGroup" novalidate>
  <table formArrayName="positionInfos">

    <div *ngFor="let data of Controls.controls; let i = index">
      <div [formGroupName]="i">

        <input type="text" formControlName="idMaterial" [matAutocomplete]="materialAuto">
        <mat-autocomplete #materialAuto="matAutocomplete">
          <mat-option *ngFor="let option of materialFilteredOptions | async" [value]="option.description">
            {{option.description}}
          </mat-option>
        </mat-autocomplete>
      </div>
    </div>

  </table>
</form>

component.ts 

export class AppComponent {
  positionFormGroup: FormGroup;
  materialControl: FormControl = new FormControl('');
  materialFilteredOptions: Observable<{ description: string; }[]>;
  options = [
    { description: 'item1' },
    { description: 'item2' },
    { description: 'item3' },
    { description: 'item4' }
  ]
  constructor(private formBuilder: FormBuilder) {
  }

  ngOnInit(): void {
    this.materialFilteredOptions = this.materialControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this.options)
      );
    this.positionFormGroup = this.formBuilder.group({
      positionInfos: new FormArray([])
    });

    this.addMaterial();

  }

  ngDoCheck(){
    console.log('triggered');
  }

  addMaterial() {
    (this.positionFormGroup.get('positionInfos') as FormArray).push(this.formBuilder.group({
      rowID: '0',
      position: '0',
      idMaterial: 'item1',
      quantity: 1,
      isDeleted: false,
      isActive: true
    }));
  }

  confirm(){
    console.log( this.positionFormGroup.get('positionInfos').value)
  }

  get Controls(){
    console.log( (this.positionFormGroup.get('positionInfos') as FormArray));
    return (this.positionFormGroup.get('positionInfos') as FormArray);
     
  }
}

Также поделился консолью. когда я добавляю новую группу форм в массив форм, это происходило. Я не понимаю, почему он несколько раз запускал обнаружение изменений.

Информация о консоли

Пожалуйста, дайте мне знать, если я что-то упустил. Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 02 августа 2020

Проведя небольшое исследование, я получил ответ. Каждый раз, когда происходит обнаружение изменений, шаблон повторно оценивает метод.

Вместо получателя элементов управления , напрямую используется свойство класса для получения элемента управления вложенной группы формы.

тс 

  this.control = this.getControls().controls;

  getControls(){
    console.log( (this.positionFormGroup.get('positionInfos') as FormArray));
    return (this.positionFormGroup.get('positionInfos') as FormArray);
  }

html

    <div *ngFor="let data of control; let i = index">
0 голосов
/ 01 августа 2020

Я должен изменить ChangeDetectionStrategy на onPu sh, поэтому компонент будет отображаться только один раз 

@Component({
  selector: "hello",
  templateUrl: "./hello.component.html",
  changeDetection: ChangeDetectionStrategy.OnPush,
})

ваш рабочий пример

...