¿Cómo se pasan datos de validación de correo electrónico a un servidor MySQL usando Angular?

Pude hacer una aplicación CRUD con SpringBoot y MySQL Server, pero no tenía validación de correo electrónico, por lo que podía enviar cualquier tipo de texto usando esto en el componente del empleado.html

 <div class="form-group">
            <label>
                Last Name </label>
            <input type="email" class="form-control" id="emailId" required [(ngModel)]="employee.emailId" name="emailId">
        </div>

Sin embargo, ahora que incluí la validación, tuve que cambiar ngModel por formControlName en este código

<form [formGroup]="loginForm">
            <div class="form-group">
                <label>
                    Email Id </label>
                <input type="email" class="form-control" id="email" required formControlName="email" name="email">

                <form [formGroup]="loginForm">
                    <div class="invalid" *ngIf="loginForm.controls['email']?.invalid && (loginForm.controls['email'].dirty || loginForm.controls['email'].touched)">

                        <div class="font-style8" *ngIf="loginForm.controls['email'].errors?.['required']">

                            This field is required.

                        </div>
                        <div class="font-style8" *ngIf="loginForm.controls['email'].errors?.['email']">
                            Please enter an email in this field.
                        </div>
                    </div>
                </form>
</div>
</form>

Y viene con esto en el archivo mecanografiado.

  ngOnInit(): void {
    this.loginForm=this.fb.group({
      email:['',[Validators.required, Validators.email]]
      
    })
  }

Entonces, estoy tratando de descubrir cómo transferir los datos del correo electrónico a Employee.emailId usando una función. Buscando formas, encontré setValue, pero no estoy seguro de cómo implementarlo, si ese es el mejor método.

Answer

FormControl es la mejor manera de validar los valores de entrada. ¿Por qué usas 2 formgroup? Con 1 es suficiente. Puede suscribirse a los cambios del valor de control, para eso necesita escribir:

this.loginForm.get('email').valueChanges (changes => {...Your function})

Solo si necesita el valor en "tiempo real", si no lo necesita, puede usar

Employee.emailId = this.loginForm.get('email').value when u need it.