Form not reading input to submit

Question

I am developing an Angular app where there is a simple login system where the user details are already in the DB(so no registration). I want it to be so that when a user types username and password, the system simply verifies that the user is stored in the DB in order to redirect into the system.

While I type the input into the form, it doesn't seem to be reading the input when triggering the method.

HTML:

<div class="login-content">
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-control nzErrorTip="Please input your username!">
      <nz-input-group nzPrefixIcon="user">
        <input type="text" nz-input formControlName="email" placeholder="Username" />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control nzErrorTip="Please input your Password!">
      <nz-input-group nzPrefixIcon="lock">
        <input type="password" nz-input formControlName="password" placeholder="Password" />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <div nz-row class="login-form-margin">
    <div nz-col [nzSpan]="12">
      <label nz-checkbox formControlName="remember">
        <span>Remember me</span>
      </label>
    </div>
    <div nz-col [nzSpan]="12">
      <a class="login-form-forgot">Forgot password</a>
    </div>
  </div>
  <button nz-button class="login-form-button login-form-margin"
          [nzType]="'primary'"
          (click)="loginToSystem()"
  >Log in</button>
</form>
</div>

ts:

ngOnInit(): void {
    this.validateForm = this.fb.group({
      email: [this.userNameLogin, [Validators.required]],
      password: [this.passwordLogin, [Validators.required]],
      remember: [true]
    });
    console.log(this.userNameLogin, this.passwordLogin);
  }

loginToSystem() {
    const fd1 = new FormData();
    const fd2 = new FormData();

    fd1.append('email', this.userNameLogin);
    fd2.append('password', this.passwordLogin);

    this.backendService.login(fd1, fd2)
      .subscribe(data => {
        this.loginData = data;
        console.log(data);
        // console.log(this.userNameLogin, this.passwordLogin);
      });
    // console.log(this.userNameLogin, this.passwordLogin);

    // this.router.navigate(['dashboard']);

  }

for reference, this is the service method:

login(username, password): any {
  const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });

  const params = new HttpParams()
      .set('email', username)
      .set('password', password);

  return this.http
      .post(this.uri + '/login', { headers, params })
      .pipe(catchError(this.errorHandler));

  }

The input values after click come as undefined on both counts

Appreciate any insight on the matter, Thank you!

Answer 1

I would go about this this way

In my TS file

  validateForm = this.fb.group({
    email: ['', [Validators.required]],
    password: ['', [Validators.required]],
    remember: [true]
  });
  loginToSystem() {
    if (this.validateForm.valid) {
      this.backendService.login(this.validateForm.value).subscribe({
        next: () => {
          // Do some action after login here
        },
        error: () => {
          // Error while trying to login in
        }
      })
    } else {
      // Form not filled, alert user
    }
    
  }

Backend service

login = ({ email, password }: { email: string; password: string }) => 
  this.http.post(this.uri + '/login', { email, password }).pipe(
    catchError(this.errorHandler)
  );

Answer 2

Try modifying your code as follows

formData(){
  return this.validateForm.value;
}

loginToSystem() {
        let email = this.formData().email;
        let password = this.formData().password;

        this.backendService.login(email, password)
          .subscribe(data => {
            this.loginData = data;
            console.log(data);
            // console.log(this.userNameLogin, this.passwordLogin);
          });
        // console.log(this.userNameLogin, this.passwordLogin);
    
        // this.router.navigate(['dashboard']);
    
      }

Backend service

login(username, password): any {
  const headers = new HttpHeaders({
      'Content-Type': 'application/json'
    });

  const params = {
    email: email,
    password: password
  }

  return this.http
      .post(this.uri + '/login', { headers, params })
      .pipe(catchError(this.errorHandler));

  }