Angular ReferenceError : Calling typescript function from html form or button

Question

So I'm pretty new to using Angular and I have a new Angular component, one TS file and one HTML file. In the HTML File, I have a form that is supposed to call a function in the corresponding typescript file when the submit button is pressed. Seems simple, but I'm constantly getting the following error :

Uncaught ReferenceError: validateLogin is not defined at :4200/HTMLInputElement.onclick (http:/localhost:4200/validateLogin();?email=email%40lol.com&password=password:13:283) onclick @ validateLogin();?email=email%40lol.com&password=password:13 VM569:1 Uncaught ReferenceError: validateLogin is not defined at :1:1

Two ReferenceErrors, one for the attempt with onclick and once for the attempt with the action attribute in form. On submit, I want the div to disappear, and the text "Success" to display. Here is the two files :

import { Component } from '@angular/core';
import { NullAstVisitor } from '@angular/compiler';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'TaManagementApp';
  toggleLoginHTML = true;

  constructor() {
    this.toggleLoginHTML = true;
  } 

  validateLogin() {
//  if ()
    this.toggleLoginHTML = false;
  }
}

And

<!--The content below is only a placeholder and can be replaced.-->
<div *ngIf=toggleLoginHTML>
  <div style="text-align:center">
    <h1>
      TA Management System
    </h1>
  </div>
  <button onclick='validateLogin()'></button>
  <div style="text-align:center">
    <form action="javascript:validateLogin()">
      Email: <input type="email" name="email" value="email"><br>
      Password: <input type="password" name="password" value="password"><br>
      <input type="submit" value="Submit" onclick='validateLogin()'>
    </form>
  </div>
</div>

<div *ngIf=!toggleLoginHTML>
  <h1>
    Success
  </h1>
</div>

Any insight for a beginner would be appreciated, thank you!

You should use the built in click bindings (click)="validateLogin()" — user184994
– user184994, Commented Nov 4, 2018 at 21:10

DLM · Accepted Answer · 2018-11-04 21:34:00Z

1

Like user184994 and qiAlex said, you should use Angular built in click binding by using (click)="validateLogin()" instead of onclick.

However I wanted to suggest you to try an take a look at the Angular Reactive Form Guide in which they explain fairly well how to implement a straightforward binding between your form and your model and possibly build very complex forms. Also take a look at the Form Validation Guide for some deeper information on how to validate your form inputs.

answered Nov 4, 2018 at 21:34

DLM

5655 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

qiAlex · Accepted Answer · 2018-11-04 21:13:16Z

0

Instead of

<button onclick='validateLogin()'></button>
...
<input type="submit" value="Submit" onclick='validateLogin()'>

Try

<button (click)="validateLogin()"></button>
...
<input type="submit" value="Submit" (click)="validateLogin()">

answered Nov 4, 2018 at 21:13

qiAlex

4,3562 gold badges22 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular ReferenceError : Calling typescript function from html form or button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related