Save user input from Angular ReactiveForm in variable-CodePudding

I have a ReactiveForm in Angular with validators. I'm trying to hand over the input data the user made to my component.ts and save it in a variable.

In my html file:

<form [formGroup]="loginForm" (ngSubmit)="submitLogin(emailLogin, passwordLogin)">

and in my component.ts:

emailLogin: string = "";
passwordLogin: string = "";

submitLogin( emailLogin: string, passwordLogin: string) {
  this.emailLogin = emailLogin;
  this.passwordLogin = passwordLogin;
  console.log(this.passwordLogin);
  console.log(this.emailLogin);
}

Everything I get in the console is a empty string and I don't know why

I'm very thankful for any help!

Full html-form:

<form [formGroup]="loginForm" (ngSubmit)="submitLogin(emailLogin, passwordLogin)">

  <!-- Email input -->
  <div >
    <label  for="emailLogin">Email-Adresse</label>
    <input formControlName="emailLogin" type="email" id="emailLogin"
           />
    <ng-container
      *ngIf="loginForm.controls['emailLogin'].dirty || loginForm.controls['emailLogin'].touched">
      <p  *ngIf="loginForm.controls['emailLogin'].errors?.['required']">
        Dieses Feld darf nicht leer sein</p>
      <p  *ngIf="loginForm.controls['emailLogin'].errors?.['email']">
        Es muss eine E-Mail eingegeben werden</p>
    </ng-container>


  </div>

  <!-- Passwort input -->
  <div >
    <label  for="passwordLogin">Passwort</label>
    <input formControlName="passwordLogin" type="password" id="passwordLogin"
           />
    <ng-container
      *ngIf="loginForm.controls['passwordLogin'].dirty || loginForm.controls['passwordLogin'].touched">
      <p  *ngIf="loginForm.controls['passwordLogin'].errors?.['required']">
        Dieses Feld darf nicht leer sein</p>
      <p  *ngIf="loginForm.controls['passwordLogin'].errors?.['minlength']">
        Das Passwort muss mindestens 8 Zeichen lang sein</p>
    </ng-container>
  </div>

  <!-- Submit button -->
  <button [disabled]="!(loginForm.valid && (loginForm.dirty || loginForm.touched))" type="submit"
          >Einloggen
  </button>

</form>

CodePudding user response：

submitLogin() {
const formData = this.loginForm.getRawValue();
}

CodePudding user response：

emaillon and passwordLogin are strings, not FormControls. Their value is not written. Remove those fields and change the method:

submitLogin() {
  const emailLogin = this.loginForm.get('emailLogin').value;
  const passwordLogin = this.loginForm.get('passwordLogin').value;
  console.log(passwordLogin);
  console.log(emailLogin);
}