如何使用对象数组以角度 4 获取表单数据 [英] how to get form data in angular 4 with array of objects

查看：23
本文介绍了如何使用对象数组以角度 4 获取表单数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的 angular 4 表单代码.但它不起作用.如何处理?错误 TypeError: 无法读取未定义的属性0". 帮我解决这个问题.

 
<div class="表单组"><input type="text" name="id" class="form-control" [(ngModel)]="user.id">

<div class="表单组"><label for="fname">名字</label><input type="text" name="fname" class="form-control" [(ngModel)]="user.fname">

<div class="表单组"><label for="lname">Last Name</label><input type="text" name="lname" class="form-control" [(ngModel)]="user.lname">

<div class="表单组"><label for="age">年龄</label><input type="text" name="age" class="form-control" [(ngModel)]="user.age">

<div class="表单组"><label for="mobile_number">Mobile_Number</label><input type="text" name="mobile_number" class="form-control" [(ngModel)]="user.phone[0].mobile_number">

<input type="submit" value="save" class="btn btn-success"></表单>

导出类用户{身份证号码;年龄:人数；fname:字符串；名称:字符串；电话:电话[];}出口类电话{pid:数字；mobile_number:号码;}

这是我在控制台中遇到的错误

UserFormComponent.html:17 错误类型错误:无法读取未定义的属性0"在 Object.eval [as updateDirectives] (UserFormComponent.html:21)在 Object.debugUpdateDirectives [作为 updateDirectives] (core.es5.js:13067)在 checkAndUpdateView (core.es5.js:12251)在 callViewAction (core.es5.js:12599)在 execComponentViewsAction (core.es5.js:12531)在 checkAndUpdateView (core.es5.js:12257)在 callViewAction (core.es5.js:12599)在 execEmbeddedViewsAction (core.es5.js:12557)在 checkAndUpdateView (core.es5.js:12252)在 callViewAction (core.es5.js:12599)

解决方案

你要这样试试

This is my angular 4 form code. but it not works. how to handle this ? ERROR TypeError: Cannot read property '0' of undefined. help me to solve this. 

  <form (ngSubmit)="processForm()">
      <div class="form group">
          <input type="text" name="id" class="form-control" [(ngModel)]="user.id">
      </div>
      <div class="form group">
          <label for="fname">First Name</label>
          <input type="text" name="fname" class="form-control" [(ngModel)]="user.fname">
      </div>
      <div class="form group">
          <label for="lname">Last Name</label>
          <input type="text" name="lname" class="form-control" [(ngModel)]="user.lname">
      </div>
      <div class="form group">
          <label for="age">Age</label>
          <input type="text" name="age" class="form-control" [(ngModel)]="user.age">
      </div>
      <div class="form group">
          <label for="mobile_number">Mobile_Number</label>
          <input type="text" name="mobile_number" class="form-control" [(ngModel)]="user.phone[0].mobile_number">
       </div>
      <input type="submit" value="save" class="btn btn-success">
  </form>
</div> 

export class User {
    id:Number;
    age:Number;
    fname:string;
    lname:string;
    phone:Phone[];
}

export class Phone{
    pid:Number;
    mobile_number:Number;
}

This is the error i'm getting in the console

UserFormComponent.html:17 ERROR TypeError: Cannot read property '0' of undefined
    at Object.eval [as updateDirectives] (UserFormComponent.html:21)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)
    at checkAndUpdateView (core.es5.js:12251)
    at callViewAction (core.es5.js:12599)
    at execComponentViewsAction (core.es5.js:12531)
    at checkAndUpdateView (core.es5.js:12257)
    at callViewAction (core.es5.js:12599)
    at execEmbeddedViewsAction (core.es5.js:12557)
    at checkAndUpdateView (core.es5.js:12252)
    at callViewAction (core.es5.js:12599)

解决方案

you have to try like this 

<input type="text" name="mobile_number" 
  class="form-control" 
   [(ngModel)]="user.phone && user.phone[0].mobile_number">

这篇关于如何使用对象数组以角度 4 获取表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆