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

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

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

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

Answer 2

解决方案是永远不要让数据为空。并将数据初始化为

 data = {} as employee;

Angular形式的ngModel

2 个答案: