首页 前端开发 如何使用对象数组获取角度为 9 的表单数据[2020 年 7 月 29 日更新的问题]
如何使用对象数组获取角度为 9 的表单数据[2020 年 7 月 29 日更新的问题]
[英] how to get form data in angular 9 with array of objects[Updated question on July-29-2020]
本文介绍了如何使用对象数组获取角度为 9 的表单数据[2020 年 7 月 29 日更新的问题]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的 angular 9 表单代码.但它不起作用.如何处理?错误类型错误:无法读取未定义的属性mobile_number".帮我解决这个问题.
<div class="表单组"><label for="fname">名字</label><输入类型=文本"名称=fname"类=表单控制"[(ngModel)]=user.fname">
<div class="表单组"><label for="lname">Last Name</label><输入类型=文本"名称=lname"类=表单控制"[(ngModel)]=user.lname">
<div class="表单组"><label for=age">Age</label><输入类型=文本"名称=年龄"类=表单控制"[(ngModel)]=user.age">
<div class="表单组"><label for="mobile_number">Mobile_Number</label><输入类型=文本"名称=手机号码"类=表单控制"[(ngModel)]=user.phone &&"user.phone[0].mobile_number">
<输入类型=提交"值=保存"class=btn btn-success"></节></表单>
我创建了这样的类:
导出类用户{构造函数(公众号:号码，公众年龄:数量，公共 fname:string,公共名称:字符串，公用电话:电话[]){}}出口类电话{构造函数(公共 pid:Number,public mobile_number:Number){}}我如何为这些类型的类提交的输入分配 ngModel
(在我从 stackoverflow 看到的答案下面 如何使用对象数组获取角度 4 的表单数据 答案但它抛出错误，如 mobile_number 未定义)
我的打字稿文件:
users:User[]=[new User(null,null,null,null,[])];
解决方案
为您的用户类型创建界面
导出接口电话{pid:数字；mobile_number:号码;}导出接口用户{身份证号码;年龄:人数；fname:字符串；名称:字符串；电话:电话[];}并创建一个 User 类型的对象来保存值
public user = {} as User;CheckThis
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>
I had created classes something like this:
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){}
}
How can i assign ngModel for input filed with these type of classes
(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?
My typescript file:
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[];
}
And create an object of type User to hold the values
public user = {} as User;
CheckThis
这篇关于如何使用对象数组获取角度为 9 的表单数据[2020 年 7 月 29 日更新的问题]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
