亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將表單提交數據推送到數組

如何將表單提交數據推送到數組

慕妹3242003 2023-12-04 14:23:55
我正在使用 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>
查看完整描述

2 回答

?
慕尼黑的夜晚無繁華

TA貢獻1864條經驗 獲得超6個贊

您尚未初始化數組 arraydata。因此它在您的組件中未定義。

只需將 arraydata 初始化為一個空數組,如下所示

arraydata:formData[] =[]


查看完整回答
反對 回復 2023-12-04
?
拉丁的傳說

TA貢獻1789條經驗 獲得超8個贊

工作演示StackBlitz 鏈接

只需分配formData空數組...

  arraydata:FormData [] = [];

然后一切正常..


查看完整回答
反對 回復 2023-12-04
  • 2 回答
  • 0 關注
  • 175 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號