Angular/IONIC Formgroup does not get applied to template inputs

user_10658853 0
Viewed 547

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): 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>

ionic-framework angular forms data-binding
2 Answers

Change formControlName="password" to formControlName="pass" in html file

Also "loginForm" private to public

user_108054790

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.

user_106588530
Related