如何将表单提交数据推送到数组中

Question

我使用的是angular版本9。我创建了一个包含5个字段的表单，分别是全名、电子邮件、电话、公司和地址。我在表单中使用ngForm指令来获取每次提交的提交数据，并处理ngSubmit事件来获取表单数据。但我无法将该对象添加到数组中。如何做到这一点？这是我的密码。。。

import { Component, OnInit } from '@angular/core';
import { NgForm, EmailValidator } from '@angular/forms';
import { ContactListService } from '../contact-list.service';
import { JsonPipe } from '@angular/common';
@Component({
selector: 'app-new-contact',
templateUrl:'./new-contact.component.html',
styleUrls: ['./new-contact.component.css']
})
export class NewContactComponent implements OnInit {
constructor(private contactList: ContactListService) { }
arraydata:formData[];
ngOnInit(): void {
}
data(f:NgForm){
this.arraydata.push(f.value);
}
}
interface formData{
fullName:string;
email:string;
phone:number;
company:string;
address:string;
}

<form #f="ngForm" (ngSubmit)="data(f)">
<div class="form-group row">
<label for="fullName" class="col-sm-2 col-form-label">Full Name</label>
<div class="col-sm-10">
<input type="text" required ngModel name="fullName" name="fullName" class="form-control"
id="fullName" placeholder="Please Enter Your Full Name">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" required ngModel name="email" name="email" class="form-control" id="email"
placeholder="Please Enter Your Email">
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-sm-2 col-form-label">Phone</label>
<div class="col-sm-10">
<input type="number" required ngModel name="phone" name="phone" class="form-control" id="phone"
placeholder="Please Enter Your Phone Number">
</div>
</div>
<div class="form-group row">
<label for="company" class="col-sm-2 col-form-label">Company</label>
<div class="col-sm-10">
<input type="text" required ngModel name="company" name="company" class="form-control"
id="company" placeholder="Please Enter Your Company Name">
</div>
</div>
<div class="form-group row">
<label for="address" class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-10">
<input type="text" required ngModel name="address" name="address" class="form-control"
id="address" placeholder="Please Enter Your Address">
</div>
</div>
<button style="float:right" class="btn btn-primary">Create</button>
</form>

Answer 1

您尚未初始化数组arraydata。因此，它在您的组件中是未定义的。

只需将数组数据初始化为一个空数组，如

arraydata:formData[] =[]

Answer 2

工作演示StackBlitz链接

只需为formData分配空数组。。。

arraydata:FormData [] = [];

然后一切都很好。。