在 Angular 中创建基于模板的表单

Question

我试图在 Angular 中创建一个表单，但是当我想从我的组件中的表单访问值时遇到了一些问题。

我的表单如下所示：

<div class="col-md-6">
  <form #createTaskForm="ngForm" (ngSubmit)="saveTask(createTaskForm.value)" autocomplete="off" novalidate>
    <div class="form-group">
      <label for="taskDescription">Task Description:</label>
      <input [(ngModel)]="task.description" name="taskDescription" required id="taskDescription" type="text" class="form-control" placeholder="Description..." />
    </div>
    <div class="form-group">
      <label for="taskDate">Date:</label>
      <input [(ngModel)]="task.date" name="taskDate" required id="taskDate" type="text" class="form-control" placeholder="(mm/dd/yyyy)..." />
    </div>

    <button type="submit" class="btn btn-primary">Save</button>
    <button type="button" class="btn btn-success" (click)="cancel()">Cancel</button>
  </form>
</div>

这是组件：

export class CreateTaskComponent implements OnInit {

  task: Task;

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

  ngOnInit() {
  }

  saveTask(valuesFromForm) {
    console.log(valuesFromForm);
    this.taskService.save(valuesFromForm);
    this.router.navigate(['/tasks']);
  }

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

当我想查看表单中的值时收到此错误：

ERROR TypeError: Cannot read property 'description' of undefined

Answer 1

这是一个 JavaScript 错误而不是 angular 错误，简化任何属性没有值它被认为是未定义和访问属性的未定义的值将引发此错误。

ERROR TypeError: Cannot read property 'description' of undefined

要解决问题，只需使用任务 class

实例初始化您的属性

task: Task = new Task()

在 Angular 中创建基于模板的表单

Create a template based form in Angular

angular

typescript

angular-template-form