时间戳

首页 > 解决方案 > 将表单数据保存在包含数组 [Angular] 的模态类中

javascript - 将表单数据保存在包含数组 [Angular] 的模态类中

问题描述

如何保存包含数组的表单数据。所以我遇到了一个问题，即地址为空，而其他数据（如城市区域）不为空。这里有人有想法吗？

用户界面

 export interface UserData {
    id: string;
    email: string;
    adresses: string[];

  }

组件.ts

onSubmit() {

    const {adresse1, ...rest} = this.form;

    const userData: UserData = {...rest, adresses: [adresse1]};

    this.userservice.updateProfile(userData, this.currentUser.id).subscribe(
      data => {
        console.log(data);
        this.isSuccessful = true;
      },
      err => {
        this.errorMessage = err.error.message;
      }
    );
  }

组件.html

<div class="form-group">
        <label>Address</label>
    <input type="text" class="form-control" placeholder=""
            name="adresse"
            [(ngModel)]="form.adresse"
            required
            #adresse="ngModel">

  </div> <!-- form-group end.// -->
<div class="form-row">
        <div class="form-group col-md-6">
          <label>Region</label>
      <input type="text" class="form-control"
      name="region"
      [(ngModel)]="form.region"
      required
      #region="ngModel">
    </div> <!-- form-group end.// -->

在此处输入图像描述

标签： javascriptjavaarraysangulartypescript

解决方案

您正在从不是表单对象一部分的内部方法读取adresse1，this.form您onSubmit()的地址实际上存储在adresse属性中。请将提交块中的代码更新为

const {adresse, ...rest} = this.form;
const userData: UserData = {...rest, adresses: [adresse]};

推荐阅读