ngModel в угловой форме - PullRequest
Новая
       26

ngModel в угловой форме

0 голосов
/ 13 декабря 2018

Я пытаюсь получить доступ к данным из моей формы в файле TS.Я получил ошибку: RROR TypeError: Невозможно прочитать свойство 'name' из неопределенного

Мой код такой: 

import { Component, OnInit } from '@angular/core';
import { employee } from '../models/Employee';
import { NgForm } from '@angular/forms'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-employee-form',
  templateUrl: './employee-form.component.html',
  styleUrls: ['./employee-form.component.css']
})
export class EmployeeFormComponent implements OnInit {\

  data: employee;

  constructor() { }

  ngOnInit() {
  }

  onSubmit(form:NgForm ) { 
    alert("Hello "  + JSON.stringify(this.data));
  }
}
<div class="container"> 
    <form #form="ngForm" (ngSubmit)="onSubmit(form)">
      <div class="form-group">
        <label for="form">name</label>
        <input type="text" class="form-control" id="name"  [(ngModel)]="data.name" required>
      </div>

      </div>
      <button type="submit" class="btn btn-success" >Submit</button>
    </form>
</div>

Я не нашел свою ошибку, любая идея?

спасибо

1 Ответ

0 голосов
/ 13 декабря 2018

Сделайте привязку шаблона с оператором безопасной навигации.Таким образом, если «data» не определен, ваш код не будет пытаться прочитать из него prop name. 

<input type="text" class="form-control" id="name"  [(ngModel)]="data?.name" required>

В случае, если prop data не определен и вы хотите использоватьdata в качестве контейнера для хранения значений формы, вам нужно как минимум создать пустой объект, например, инициализировать данные как data = {}. Он создаст ключи на лету.

...