如何使用对象数组获得角度为4的表单数据

时间:2018-06-18 18:54:27

标签: angular angular-ngmodel

这是我的4角形式代码。但它不起作用。怎么处理这个?错误TypeError: Cannot read property '0' of undefined.帮助我解决这个问题。

  <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;
}

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

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)

1 个答案:

答案 0 :(得分:0)

你必须尝试这样

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