Ошибка при попытке создать форму на основе шаблона - PullRequest
Новая
       7

Ошибка при попытке создать форму на основе шаблона

0 голосов
/ 06 февраля 2020

Я хочу создать форму, управляемую храмом, и хочу получить доступ к значениям из формы, но я получил эту ошибку: 

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
  }

}

Я хочу получить доступ к значениям из формы ... Не могли бы вы, скажите, пожалуйста, что я делаю не так?

1 Ответ

0 голосов
/ 06 февраля 2020

По сути, у вас есть класс компонента, который реализует OnInit. В большинстве объектно-ориентированных сред происходит фактическая инициализация внутри constructor, но не в Angular. В Angular конструктор инициализирует класс, а не компонент. Подробнее .

Итак, в основном у вас есть обработчик событий, который ngOnInit, который запускается вскоре после конструктора, и ngOnInit фактически инициализирует компонент. Ваш шаблон попытается использовать task, предполагая, что это свойство компонента, но сможет сделать это только в том случае, если он инициализирован для компонента.

Подробнее о хуках жизненного цикла: https://angular.io/guide/lifecycle-hooks

...