0
271
ViewsCómo agregar campos dinámicos en forma angular
Tengo que crear un formulario dinámico donde la etiqueta y los campos de entrada sean campos de texto (el usuario los completará en tiempo de ejecución). Y el usuario puede agregar tantos campos como necesite. Tengo requerimientos donde tengo que generar. archivo de propiedades en backend. Donde se requiere un par clave-valor y el usuario decide cuánto par clave-valor necesita.
·
Juan Pablo Isaza
1 answers
Answer question0
Crear FormGroup como
keyValueFA = new FormArray([this.newKeyValueFG]); propertyFG = new FormGroup({ keyValue: this.keyValueFA, });getter para crear un nuevo FormGroup
get newKeyValueFG(): FormGroup { return new FormGroup({ key: new FormControl(null), value: new FormControl(null), }); }Otros métodos para configurar, eliminar, obtener FormGroup
get keyValueArrayFGControls(): FormGroup[] { return this.keyValueFA.controls as FormGroup[]; } addNewKeyValueFG(): void { this.keyValueFA.push(this.newKeyValueFG); } removeNewKeyValueFG(index: number): void { this.keyValueFA.removeAt(index); } En plantilla iterar keyValueArrayFGControls
<form [formGroup]="propertyFG"> <div formArrayName="keyValue" *ngFor="let fg of keyValueArrayFGControls; let i = index" > <div [formGroup]="fg"> {{ i + 1 }}) <div><input type="text" formControlName="key" placeholder="Key" /></div> <div> <input type="text" formControlName="value" placeholder="Value" /> </div> <button (click)="removeNewKeyValueFG(i)">Remove</button> </div> </div> <button (click)="addNewKeyValueFG()">Add</button> </form>
·
Juan Pablo Isaza
Report
Answer question