Te he modificado el stackblitz para que tengas un ejemplo funcionando
https://stackblitz.com/edit/angular-ivy-f9cafp?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts,src%2Fenvironments%2Fenvironment.ts&view=editor
También te dejo a continuación la explicación:
- Estas usando formGroup y para que te relacione los campos de tu formulario, debe estar inicializado. Esto se puede hacer en el evento onInit.
- Por un lado tienes los datos de tu formulario y por otro he puesto unas variables que serian las que se envien al backend (API). Esto sería mejor hacerlo directamente cogiendo el dato del formulario (lo tienes en la función logar)
- La función logar enlaza el evento onSubmit que tienen los formularios para recoger que el evento de enviar el formulario se ha lanzado.
Dejo por aquí las dos partes del código:
AppComponent.html
<form [formGroup]="formulario" (ngSubmit)="logar()">
<div class="row">
<div class="col-lg-6 form-group mb-3">
<span class="input-group">Usuario</span>
<input
type="text"
class="form-control"
placeholder="Nombre de usuario"
formControlName="usuario"
/>
</div>
</div>
<div class="col-lg-6 form-group mb-3">
<span class="input-group">Contraseña</span>
<input
type="password"
class="form-control"
placeholder="Contraseña"
formControlName="contrasena"
/>
</div>
<!-- Selec option que no retorna los valores -->
<div class="col-lg-6 form-group mb-3">
<span class="input-group">Empresa</span>
<select
class="form-select campo-select"
formControlName="empresa"
>
<option value="" disabled selected>Seleccione empresa</option>
<option [value]="emp.idEmpresa" *ngFor="let emp of empresa">
{{ emp.nombreComercial }}
</option>
</select>
</div>
<button type="submit">Enviar</button>
<div>{{ usuario }}, {{ contrasena }}, {{ idEmpresa }}</div>
</form>
AppComponent.ts
import { Component, OnInit, VERSION } from '@angular/core';
import {
FormGroup,
FormControl,
} from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
formulario: FormGroup;
constructor() {}
ngOnInit(): void {
this.formulario = new FormGroup({
usuario: new FormControl(''),
contrasena: new FormControl(''),
empresa: new FormControl(''),
});
}
empresa: any = [
{ idEmpresa: 1, nombreComercial: 'Empresa 1' },
{ idEmpresa: 2, nombreComercial: 'Empresa 2' },
{ idEmpresa: 3, nombreComercial: 'Empresa 3' },
];
usuario = '';
contrasena = '';
idEmpresa = '';
logar() {
this.usuario = this.formulario.value['usuario'];
this.contrasena = this.formulario.value['contrasena'];
this.idEmpresa = this.formulario.value['empresa'];
/*this.http.put(environment.API_URL + 'usuario', val).subscribe((res) => {
this.refreshList();
this.cerrar();
});*/
}
}
PD: Los datos no se sincronizan del backend (API)
Espero que te sirva