У меня есть Angular компонент, который отображает данные из FormArray, но есть и другая FormGroup, которая становится видимой только при нажатии кнопки.
Когда компонент загружается, если я нажимаю на кнопка, чтобы сделать другую форму видимой сразу же, тогда она работает. Однако если я сначала нажму на другую кнопку или один из входов FormArray, когда сделаю другую форму видимой, произойдет ошибка с «Не удается найти элемент управления». Нажатие, чтобы закрыть и затем снова отобразить другую форму, будет работать правильно.
Я потратил часы, пытаясь отследить, что идет не так, и это только кажется, когда есть * ngFor для l oop через элементы FormArray. Я свел это к следующему примеру:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-test-filter-component',
templateUrl: './test-filter-component.component.html',
styleUrls: ['./test-filter-component.component.scss']
})
export class TestFilterComponentComponent implements OnInit {
public testform: FormGroup;
public otherForm: FormGroup;
public otherFormVisible = false;
constructor() {}
get orders() {
return this.testform.get('orders') as FormArray;
}
anotherClick() {}
ngOnInit() {
this.testform = new FormGroup({
orders: new FormArray([])
});
this.otherForm = new FormGroup({
test: new FormControl('testvalue')
});
for(let idx = 0; idx < 50; idx++) {
this.orders.push(new FormGroup({id: new FormControl(idx), name: new FormControl('test')}));
}
}
}
<div *ngIf="otherFormVisible">
<form [formGroup]="otherForm">
<input formControlName="test">
</form>
</div>
<button class="btn btn-primary" (click)="otherFormVisible = !otherFormVisible">other form</button>
<button class="btn btn-primary" (click)="anotherClick()">Click here first</button>
<form [formGroup]="testform">
TEST CONTROL
<div formArrayName="orders" *ngFor="let order of orders.controls; let i = index">
<div [formGroupName]="i">
<input formControlName="id">
<input formControlName="name">
</div>
</div>
</form>
Если вы нажмете прямо на «другая форма», она правильно отобразит другую форму, но если вы нажмете «Сначала нажмите здесь» или любой другой сначала из других входных данных будет выдано сообщение об ошибке:
Ошибка: ошибка: не удается найти элемент управления с именем: 'test'
Если кто-нибудь знает, как это работает правильно, избавил бы меня от многих разочарований.