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

您应该使用 change 或 ngModelchange

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

Answer 2

Angular中的事件绑定语法为(change)="function()"，而不是onchange。那应该可以解决您的问题。

Answer 3

尝试一下：

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

Angular 6-函数未定义

3 个答案: