0

I am trying to build a WebApp using ionic 4 and Angular 9. I haven't any experience with backend but already worked in frontend during a project for my studies in CS. I am trying to implement a log-in page similarly as I did in that project and the log-in button in the UI (HTML file) does not trigger the login method in the ts file. I really do not understand why. Maybe someone can help me?

This is (a part of) the HTML-file: I already tried to add and remove ngSubmit in the form-tag and moving the ion-button tag between and outside the form-tags

<ion-content style="position: absolute; top: 100px">
  <div class="bigSideBorder">
    <form [formGroup]="loginForm" (ngSubmit)="logIn()">
      <div style="text-align: center; margin-top: 15px">
        <ion-title style="font-size: 30px; font-weight: bold">Log In</ion-title>
      </div>
      <div class="form-group">
        <ion-item>
          <ion-input type="text" formControlName="username" class="form-control"
                   placeholder="Benutzername"></ion-input>
        </ion-item>
      </div>
      <div class="form-group">
        <ion-item>
          <ion-input type="password" required class="form-control" formControlName="password" (keyup.enter)="logIn()"
                   placeholder="Passwort"> </ion-input>
        </ion-item>
      </div>
    </form>
    <ion-button color="secondary" [hidden]="false" (click)="logIn()" style="width: 100%; height: 50px; padding-left: 12px; padding-right: 15px; font-size: 16px"> Log In</ion-button>
  </div>
</ion-content>

And here is (a part of) the ts-file. I added some console logs in logIn() method to see which statements are executed but even the first log is not done when pushing the button.

export class LogInPage implements OnInit {

  loginForm = this.builder.group({
    username: ['', Validators.required],
    password: ['', Validators.required]
  });

  ngOnInit() {
  }

  constructor(private router: Router,
              private authentication: AuthenticationService,
              private builder: FormBuilder) {

  }

  logIn(){
    // ToDo: Why does this not get triggered by button?
    console.log('Hello');
    if (this.username.valid && this.password.valid) {
      console.log('Passing Request to AuthenticationService');
      this.authentication.logIn(this.username.value, this.password.value).subscribe((success) => {
        this.router.navigate(['/home']).then(r => {});
      }, (error) => {
        console.log('error: ' + error.message);
      });
    }
  }

  private get username() {
    return this.loginForm.get('username');
  }
  private get password() {
    return this.loginForm.get('password');
  }


}
Hamada
  • 1,836
  • 3
  • 13
  • 27
Sophie Pfister
  • 1
  • 1
  • Does this help? https://stackoverflow.com/questions/54404372/ion-button-click-not-firing-up-function-in-ionic-4 – SAM Jun 24 '20 at 08:06
  • 1
    The best solution is a concept in Angular called Guards with canActivate() . – Hamada Jun 24 '20 at 09:14
  • Get the button inside the form tag to trigger the ngSubmit with the type set to sumbit like so: ` ... ` – Tomas Vancoillie Jun 24 '20 at 12:00
  • Thanks a lot @TomasVancoillie, it worked. I still don't get why it does not get triggered "just" with the (click) attribute as this worked for all other buttons in the UI but I'll surely find out :) – Sophie Pfister Jun 24 '20 at 16:00

0 Answers0