Question

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

2020-07-28

541

html angular typescript angular-forms

这是我的 angular 9 表单代码。但是它不起作用。如何处理？错误 TypeError：无法读取未定义的属性“mobile_number”。帮我解决这个问题。

<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

（以下答案是我在 stackoverflow how to get form data in angular 4 with array of object 答案中看到的，但它引发了错误，例如 mobile_number 未定义）

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

我的 typescript 文件：

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

Answer 1

您只想编辑一个电话号码？无需数组。

如果您想编辑多个电话号码，可以尝试以下方法：

<div class="form group" *ngFor="let phone of user.phone; index as i;">
    <label for="mobile_number">Mobile_Number {{i+1}}</label>
    <input type="text" name="mobile_number" class="form-control" [(ngModel)]="phone.mobile_number">
</div>

添加“添加”按钮并用新电话对象填充电话数组。

Answer 2

为您的 User 类型创建一个接口

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

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

public user = {} as User;

CheckThis