I have an angular and angular material project where I am trying to bring a list of employees from a database and show them in a form, the form is creating the spaces correctly but the inputs are not filled with the right information, because I don't know how to link the element to the matInput.
I know that the information does arrive because as I mentioned the spaces corresponding to the number of employees are created and I can use the properties as seen in the code below.
Does anyone have an idea of how I could link the matinput with the info that arrives?
ts file and html file:
import { Component, OnInit } from '@angular/core';
import { empleadoLista } from '../modelos/empleadoLista.interface';
import { RegempleService } from '../regemple.service';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-empleado',
templateUrl: './empleado.component.html',
styleUrls: ['./empleado.component.css']
})
export class EmpleadoComponent implements OnInit {
listaE: empleadoLista[];
regFrom:FormGroup;
regForm = new FormGroup({
cdidentificacion: new FormControl('', Validators.required),
dsnombres: new FormControl('', Validators.required),
dsapellidos: new FormControl('', Validators.required),
cdtelefono: new FormControl('', Validators.required),
dsciudad: new FormControl('', Validators.required),
dsdireccion: new FormControl('', Validators.required),
cdtelefonoemergencia: new FormControl('', Validators.required)
});
constructor(private api: RegempleService) { }
ngOnInit(): void {
this.api.getAllEmp().subscribe(data => { this.listaE = data });
}
}
<mat-grid-list cols="1" rowHeight="700px" id="registrf" *ngFor="let emp of listaE">
<mat-grid-tile>
<div class="example-container">
<h2>Empleado {{emp.dsnombres}}</h2>
<form [formGroup]="regForm">
<div class="dosenlinea">
<mat-form-field appearance="fill" class="width-100 ml-2">
<mat-label>Identificacion</mat-label>
<input matInput type="text" id="doc" formControlName="cdidentificacion" value="{{emp.cdidentificacion}}" isDisabled>
</mat-form-field>
<br>
<mat-form-field appearance="fill" class="width-100 ml-2">
<mat-label>Nombre</mat-label>
<input matInput type="text" id="nombre" formControlName="dsnombres" value="{{emp.dsnombres}}">
</mat-form-field>
<br>
</div>
<div class="dosenlinea">
<mat-form-field appearance="fill" class="width-100 ml-2">
<mat-label>Apellidos</mat-label>
<input matInput type="text" id="apellido" formControlName="dsapellidos" value="{{emp.dsapellidos}}">
</mat-form-field>
<br>
<mat-form-field appearance="fill" class="width-100 ml-2">
<mat-label>Telefono</mat-label>
<input matInput type="text" id="tel" formControlName="cdtelefono" value="{{emp.cdtelefono}}">
</mat-form-field>
<br>
</div>
<div class="dosenlinea">
<mat-form-field appearance="fill" class="width-100 ml-2">
<mat-label>Ciudad</mat-label>
<input matInput type="text" id="city" formControlName="dsciudad" value="{{emp.dsciudad}}">
</mat-form-field>
<br>
<mat-form-field appearance="fill" class="width-100 ml-2">
<mat-label>Direccion</mat-label>
<input matInput type="text" id="dir" formControlName="dsdireccion" value="{{emp.dsdireccion}}">
</mat-form-field>
<br>
</div>
<mat-form-field appearance="fill" class="width-100 ml-2">
<mat-label>Telefono Emergencias</mat-label>
<input matInput type="text" id="tel_eme" formControlName="cdtelefonoemergencia" value="{{emp.cdtelefonoemergencia}}">
</mat-form-field>
<br>
<div class="btsrg">
<button mat-raised-button color="primary" type="submit" id="btton">
<span>Modificar</span>
</button>
<button mat-raised-button color="primary" type="clear" id="btton">
<span>Eliminar</span>
</button>
</div>
</form>
</div>
</mat-grid-tile>
</mat-grid-list>