尝试创建模板驱动表单时出错

Question

我想创建一个寺庙驱动的表格，我想从表格中访问值，但是我收到了这个错误：

CreateNewTaskComponent.html:8 ERROR TypeError: Cannot read property 'id' of undefined

这是我的表格：

<form #taskForm="ngForm" (ngSubmit)="addANewTask(taskForm.value)">
        <div class="form-group">
          <label for="id">Task Id:</label>
          <input [(ngModel)]="task.id"  type="text" class="form-control" name="id" id="id" placeholder="">
        </div>
        <div class="form-group">
          <label for="description">Description</label>
          <input [(ngModel)]="task.description"  type="text" class="form-control" name="description" id="description" placeholder="">
        </div>
        <div class="form-group">
          <label for="date">Date</label>
          <input [(ngModel)]="task.date"  type="text" class="form-control" name="date" id="date" placeholder="">
        </div>
        <button type="submit" class="btn btn-success">Submit</button>
        <button (click)="cancel()" type="cancel" class="btn btn-primary">Cancel</button>
      </form>

这是我的组件：

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

  task: Task;

  constructor(
    private taskService: TaskService,
    private router: Router) {
  }

  addANewTask(form) {
    console.log(form);
  }

  cancel() {
    this.router.navigate(['/tasks']);
  }

  ngOnInit() {
     this.task = new Task(); //This line solved the issue
  }

}

我想访问表单中的值...请问我做错了吗？

Answer 1

基本上你有一个组件 class，它实现了 OnInit。在大多数面向对象的环境中，在 constructor 中进行实际的初始化，而不是在 Angular 中。在 Angular 中，构造函数正在初始化 class 而不是组件。 Read more.

所以，基本上你有一个事件挂钩，它是 ngOnInit，它在构造函数之后不久运行，ngOnInit 将实际初始化组件。您的模板将尝试使用 task，假设它是组件的属性，但只有在为组件初始化时才能这样做。

有关生命周期挂钩的更多信息：https://angular.io/guide/lifecycle-hooks

尝试创建模板驱动表单时出错

Error when I tried to create a template driven form

angular

angular-forms