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 class="form-outline mb-4">
<label class="form-label" for="emailLogin">Email-Adresse</label>
<input formControlName="emailLogin" type="email" id="emailLogin"
class="form-control form-control-lg"/>
<ng-container
*ngIf="loginForm.controls['emailLogin'].dirty || loginForm.controls['emailLogin'].touched">
<p class="error" *ngIf="loginForm.controls['emailLogin'].errors?.['required']">
Dieses Feld darf nicht leer sein</p>
<p class="error" *ngIf="loginForm.controls['emailLogin'].errors?.['email']">
Es muss eine E-Mail eingegeben werden</p>
</ng-container>
</div>
<!-- Passwort input -->
<div class="form-outline mb-4">
<label class="form-label" for="passwordLogin">Passwort</label>
<input formControlName="passwordLogin" type="password" id="passwordLogin"
class="form-control form-control-lg"/>
<ng-container
*ngIf="loginForm.controls['passwordLogin'].dirty || loginForm.controls['passwordLogin'].touched">
<p class="error" *ngIf="loginForm.controls['passwordLogin'].errors?.['required']">
Dieses Feld darf nicht leer sein</p>
<p class="error" *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"
class="btn btn-secondary btn-block mb-4 w-100">Einloggen
</button>
</form>
>Solution :
submitLogin() {
const formData = this.loginForm.getRawValue();
}