0
379
ViewsAngular/IONIC Formgroup does not get applied to template inputs
i've created an Ionic Project with Angular and made a small Login-Form with e-mail and password. Therefore i'm using Angular's FormGroup and Formbuilder as the official docs of Ionic describe it: https://ionicframework.com/docs/v3/developer-resources/forms/
I'm giving the e-mail input a default-value to see if it's working and also the Login-Button is disabled as long as the form is in-valid (both fields required by Validators). But the inputs are not matching with the state of my form, the state always stays the same as it has been initialized and the form is never getting valid.
Output of the formGroup value in the console (created after writing into input fields of course):
Hope that somebody here got an Idea, what it could be. Thank you.
My Code:
export class LoginComponent {
private loginForm: FormGroup;
constructor(
private authService: AuthService,
private formBuilder: FormBuilder
) {
this.loginForm = this.formBuilder.group({
mail: ['buildermail@form.com', Validators.required],
pass: ['', Validators.required],
});
}
login() {
console.log(this.loginForm.value); // Output: 'buildermail@form.com', null -> doesn't matter what's in the actual inputs
}
}<ion-card-content class="content__card-content">
<form [formGroup]="loginForm" (ngSubmit)="login()">
<ion-item class="content__card-content__username">
<ion-label position="floating">E-Mail</ion-label>
<ion-input
formControlName="mail"
type="email"
[required]="true"
></ion-input>
</ion-item>
<ion-item class="content__card-content__password">
<ion-label position="floating">Password</ion-label>
<ion-input
formControlName="pass"
type="password"
[required]="true"
></ion-input>
</ion-item>
<ion-button type="submit" [disabled]="!loginForm.valid">Login</ion-button>
</form>
</ion-card-content>2 answers
Answer question0
Change formControlName="password" to formControlName="pass" in html file
Also "loginForm" private to public
0
Solved it: The formgroup has not been applied as it has noot been provided Correctly. I needed to import 'ReactiveFormsModule' and 'FormsModule' in the module where the component is declared. Also i then needed to import this module into my app.module.ts - Ionic didn't show an error here by compilation, by compiling with angular itself, it threw an error that it's not provided correctly.