角度形式的 ngModel

Question

我正在尝试从 TS 文件中的表单访问数据。 我收到错误：RROR TypeError：无法读取未定义的属性“名称”

我的代码是这样的：

 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>

我没有发现我的错误，知道吗？

谢谢

Answer 1

使用安全导航操作符进行模板绑定。 这样，如果未定义“数据”，您的代码将不会尝试从中读取道具name 。

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

如果 prop data未定义，并且您想使用data作为容器来存储表单值，那么您至少必须创建一个空对象，例如，将数据初始化为data = {}它将在飞。

Answer 2

解决方案是您永远不应该使数据为空。 并将数据初始化为

 data = {} as employee;