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

问题描述

这是我的棱角4表单代码.但它不起作用.如何处理呢?错误TypeError: Cannot read property '0' of undefined.可以帮助我解决此问题.

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)

推荐答案

您必须尝试这样

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

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