如何使用对象数组获取角度9中的表单数据[2020年7月29日更新的问题]

问题描述

这是我的角度9表单代码.但它不起作用.如何处理呢?错误TypeError:无法读取未定义的属性'mobile_number'.帮我解决这个问题.

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

    <form (ngSubmit)="processForm()">
<section *ngFor="let user of users;let i=index">
          <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 && user.phone[0].mobile_number">
           </div>
          <input type="submit" value="save" class="btn btn-success">
</section>
      </form>

我创建了这样的类:

export class User {
constructor(
public id:Number,
public age:Number,
public  fname:string,
public lname:string,
public  phone:Phone[]){}
}

export class Phone{
constructor(
public pid:Number,
public mobile_number:Number){}
}

如何为具有此类类型的输入分配ngModel

How can i assign ngModel for input filed with these type of classes

(下面的答案是我从stackoverflow 答案，但是它会抛出错误，例如mobile_number未定义)

(Below answer I had seen it from stackoverflow how to get form data in angular 4 with array of objects answers but it is throwing error like mobile_number is undefined)

<input type="text" name="mobile_number"
  class="form-control"
   [(ngModel)]="user.phone && user.phone[0].mobile_number">
Can someone help me with this?

我的打字稿文件:

users:User[]=[new User(null,null,null,null,[])];

推荐答案

为您的用户类型创建界面

Create an interface for your User type

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

    export interface User {

     id:Number;
     age:Number;
      fname:string;
     lname:string;
      phone:Phone[];
    }

并创建一个User类型的对象来保存值

And create an object of type User to hold the values

public user = {} as User;

选中此

这篇关于如何使用对象数组获取角度9中的表单数据[2020年7月29日更新的问题]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！