У меня странное поведение FormGroup.
Что я делаю в точности, так это то, что я генерирую FormControls в нужную группу форм в соответствии с количеством ключевых свойств массива.
Допустим, у меня есть следующий массив:
arrayData = [
{_id: 123, _name: 'XYZ', gender: 'Male'},
{_id: 124, _name: 'XYW', gender: 'Female'}
];
Извлеченные свойства arra следующие:
this.odkDataIndexes = ['_id', 'name', 'gender'];
Теперь для каждого индекса мне нужно сгенерировать управление формой в группу форм indexesForm:
async createIndexesForm(extractedIndexesArray) {
const controls = extractedIndexesArray.reduce((g, k) => {
g[k] = '';
return g;
}, {});
this.indexesForm = this.fb.group({controls});
console.log(this.indexesForm);
}
Эта функция будет запущена, как только пользователь нажмет на кнопку, имеющую событие нажатия: (click)=generateMappingFields():
async generateMappingFields() {
this.showFields = false;
this.removeUnnecessaryFieldsMsg = '';
if (this.odkDataIndexes.length > 0) {
await this.createIndexesForm(this.odkDataIndexes).then(() => {
this.showFields = true;
this.tabIndex = 1;
});
}
}
Для вывода console.log(this.indexesForm); создается видимость для:
И он содержит следующие элементы управления:
Это те же самые индексы, которые я извлек из моих данных.
Теперь мне нужно отобразить эти элементы управления следующим образом:
<div class="flexColEven">
<mat-spinner *ngIf="!indexesForm" value="50" class="setSpinnerOnTop" diameter="75" [color]="medair-color">
</mat-spinner>
<div *ngIf="showFields && indexesForm">
<div [formGroup]="indexesForm" *ngIf="indexesForm" class="flexRow">
<!-- {{indexesForm.valid | json}} -->
<div *ngFor="let controlName of odkDataIndexes">
<span></span>
<div>
<h3>ONA field: {{controlName}}</h3>
</div>
<mat-form-field class="formFieldWidth" color="warn" appearance="fill">
<mat-label>{{controlName}}</mat-label>
<mat-select [formControlName]="controlName">
<mat-option *ngFor="let de of dataElementsDetails; let i = index;"
[value]="de.id">
{{de.displayName}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
</div>
Когда будет создан indexesForm, я покажу div с раскрывающимся списком для каждого контроллера, который отображается правильно, но показывает В то же время произошла ошибка для каждого контроллера:
core. js: 6185 Ошибка: Ошибка: не удается найти элемент управления с именем: '_id'
core. js: 6185 Ошибка: не удается найти элемент управления с именем: '_tag'
...
Но поля отображаются правильно, так как это stackblitz показывает вам .
И когда мне нужно получить значение каждого выпадающего списка:
mapping() {
this.odkDataIndexes.forEach((arrayIndexControl) => {
console.log(arrayIndexControl);
console.log(this.indexesForm.get(arrayIndexControl));
});
}
, я ясно вижу arrayIndexControl, который является именем элемента управления формы indexesForm group, но вторая консоль отображает следующий ответ:
null
И если я утешенный (this.indexesForm.get(arrayIndexControl).value);, он выдаст ошибку undefined.
Вот stackblitz с примером данных, которые у меня есть.