Угловая 6 - функция не определена

Question

У меня есть простая форма и составная часть для нее.Когда я набираю что-то в поле ввода, я хочу запустить метод внутри файла TS.Но он говорит мне, что это не определено:

Uncaught ReferenceError: printTask is not defined
    at HTMLInputElement.onchange ((index):13)
onchange @ (index):13

add-task.component.html:

<h5 class="card-title">Add new task</h5>
<form >
  <div class="form-group">
    <label for="taskName"></label>
    <input class="form-control" type="text" name="taskName" id="taskName" placeholder="Enter task name"
           [(ngModel)]="task.id" onchange="printTask()">
  </div>
  <div class="form-group">
    <label for="dueDate"></label>
    <input class="form-control" type="date" name="dueDate" id="dueDate" placeholder="Enter task name"
           [(ngModel)]="task.dueDate" onchange="printTask()">
  </div>
</form>

add-task.component.ts

import {Component, OnInit} from '@angular/core';
import {Task} from "../../models/task";

@Component({
  selector: 'app-add-task',
  templateUrl: './add-task.component.html',
  styleUrls: ['./add-task.component.css']
})
export class AddTaskComponent implements OnInit {

  task: Task = {
    id: undefined,
    name: '',
    dueDate: '',
    completed: false

  };

  constructor() {
  }

  ngOnInit() {
  }

  printTask() {
    console.log('test');
  }
}

Answer 1

Синтаксис привязки события в Angular равен (change)="function()", а не onchange.Это должно решить вашу проблему.

Answer 2

Попробуйте:

<h5 class="card-title">Add new task</h5>
<form >
  <div class="form-group">
    <label for="taskName"></label>
    <input class="form-control" type="text" name="taskName" id="taskName" placeholder="Enter task name"
           [(ngModel)]="task.id" (change)="printTask()">
  </div>
  <div class="form-group">
    <label for="dueDate"></label>
    <input class="form-control" type="date" name="dueDate" id="dueDate" placeholder="Enter task name"
           [(ngModel)]="task.dueDate" (change)="printTask()">
  </div>
</form>

Answer 3

Вы должны использовать change или ngModelchange

[(ngModel)]="task.dueDate" (change)="printTask()">