Angular form in login.component.html not sending data to login.component.ts

Issue

I have a simple login form with email and password and when I try to send data to login.components.ts the form is empty

login.component.html:

    <mat-spinner *ngIf="isLoading"></mat-spinner>
    <form *ngIf="!isLoading" #loginForm="ngForm" (ngSubmit)="login(loginForm)">
        <mat-form-field appearance="fill" class="login-full-width">
          <mat-label>Enter your email</mat-label>
          <input matInput [formControl]="email" type="email" name="email" placeholder="E-Mail" required>
          <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
        </mat-form-field>
        <mat-form-field appearance="fill" class="login-full-width">
            <mat-label>Enter your password</mat-label>
            <input matInput [formControl]="password" name="password" [type]="hide ? 'password' : 'text'" required>
            <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
              <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
            </button>
        </mat-form-field>
        <button mat-raised-button color="primary" type="submit">Login</button>
    </form>
</mat-card>

login.component.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormControl, NgForm, NgModel, Validators } from '@angular/forms';
import { response } from 'express';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {

    constructor(private http: HttpClient) {  }

    ngOnInit(): void {
    }

    email = new FormControl('', [Validators.required, Validators.email]);
    password = new FormControl('', [Validators.required]);
    hide = true;
    isLoading = false;
    httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    }


    login(form: NgForm) {      
      console.log(form.value); <=========================== this is empty
      this.http.post<{message: string}>('http://localhost:3000/login', form.value, this.httpOptions)
        .subscribe((responseData) => {
          console.log(responseData.message);
        })
    }

    getErrorMessage() {
        if (this.email.hasError('required')) {
            return 'You must enter a value';
        }

        return this.email.hasError('email') ? 'Not a valid email' : '';
    }
}

Console log is giving empty object

The "hello from express.js" is from the backend, which works fine (even tested with postman)

Solution

I think you are making the mistake of combining template-driven forms with reactive forms.

I will suggest using one approach to get the data out of it.

Example [formControl] is a reactive form item and you are submitting the form through the template-driven form. They don’t work together.

Answered By – U.Aasd

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.