Tengo un menú desplegable que el usuario usa para cambiar entre diferentes formas angulares.
HTML
<form [formGroup]="evalForm"> <mat-form-field appearance="fill"> <mat-label>Select Analysis Group</mat-label> <mat-select (selectionChange)="groupSelected($event)"> <mat-option *ngFor="let item of groupDropdown | async" [value]="item.value">{{item.text}}</mat-option> </mat-select> </mat-form-field> <ng-container *ngFor="let groups of groupSections;"> <input type="text" [formControlName]="groups?.name"> </ng-container> </form>¿Cómo debería verse Angular para que los formularios reactivos funcionen cuando alguien selecciona un elemento en el menú desplegable?
Qué hace actualmente groupSelected() (pseudocódigo básico que no funciona):
groupSelected(selectedItem) { // 1) Grabs the FormControlNames from the DB const formControlNamesList = getItemsFromDB(selectedItem); // 2) Sets FormControlNames for DOM // [{groups:{name: 'keyOne'}}, {groups:{name: 'keyTwo'}},{groups:{name: 'keyThree'}}] this.groupSections = setGroupSections(formControlNamesList); // 3) Creates a formControlNamesList Object in the form // {"keyOne": FormControl, "keyTwo": FormControl, "keyThree": FormControl} const formObj = formatForAngularForms(formControlNamesList); // 4) Set the Reactive Form this.evalForm = this.fb.group(new FormGroup(formObj)); } formatForAngularForms(formControlNamesList) { const formObj = {}; for(let i=0;i<formControlNamesList.length;i++) { formObj[formControlNamesList[i].name] = new FormControl(null,[Validators.required]); } return formObj; }Por el momento, la consola explota con errores sobre cómo no puede encontrar FormControlName y sospecho que tiene que ver con el momento en que todo se procesa, pero no estoy completamente seguro de si es eso o no. Necesito los formularios para generar formularios completamente nuevos cada vez que se selecciona un nuevo valor del menú desplegable. La interfaz de usuario siempre será dinámica y cada vez que cambie el menú desplegable, los FormControlNames de entrada podrían ser diferentes según lo que envíe la base de datos.
He leído que tal vez FormArray podría ser útil, pero no puedo encontrar un ejemplo en ninguna parte que coincida con lo que estoy buscando hacer.
¿No debería esperar las respuestas del backend antes de proceder a crear el formulario? Si getItemsFromDB() devuelve un observable, podría hacer async/await:
async groupSelected(selectedItem) { const formControlNamesList = await getItemsFromDB(selectedItem);