javascript - Angular (v4) 表单数据对象不匹配 json 数据

Question

我在 Angular (v4) 中设置了以下表单

我正在提取以下 json 数据

db.json文件内容

{
  "customer": {
    "title": "",
    "firstName": "D",
    "lastName": "",
    "address": {
        "line1": "",
        "line2": "",
        "town": "",
        "postcode": ""
    },
    "acceptData": false
  }
}

但是当我显示表单输出时 <pre>{{ form.value | json }}</pre>我得到以下 JSON 数据

表单数据

{
  "title": "",
  "firstName": "D",
  "lastName": "",
  "line1": "",
  "line2": "",
  "town": "",
  "postcode": "",
  "acceptData": false
}

你可以看到地址对象丢失了，我确定我做错了什么，很简单，但我盯着代码看了好几个小时，却无法修复它。我想要 customer对象以匹配 db.json 的内容以上。

表单标记

<form (ngSubmit)="handleSubmit(form.value, form.valid)" #form="ngForm" novalidate>

    <select
      id="title"
      name="title"
      [ngModel]="details?.title"
      (ngModelChange)="details.title=$event">
      <option value="" selected>Select</option>
      <option value="Mr">Mr</option>
      <option value="Mrs">Mrs</option>
    </select>


    <label for="firstName">First name</label>
    <input
      type="text"
      name="firstName"
      id="firstName"
      maxlength="20"
      required
      #firstName="ngModel"
      [ngModel]="details?.firstName"
      (ngModelChange)="details.firstName=$event"
      [ngClass]="{ 'error': firstName.errors?.required && firstName.dirty }">
      <!--
        Display invalid error based on firstName.error value
        In case there is no inital value - hide it by checking .dirty value which would be false -->
    <div *ngIf="firstName.errors?.required && firstName.dirty" class="error">First name is required</div>

    <label for="lastName">Last name</label>
    <input
      type="text"
      name="lastName"
      id="lastName"
      maxlength="20"
      required
      #lastName="ngModel"
      [ngModel]="details?.lastName"
      (ngModelChange)="details.lastName=$event">
    <div *ngIf="lastName.errors?.required && lastName.dirty" class="error">Last name is required</div>

    <label for="address">Address
      <input
        type="text"
        name="line1"
        [ngModel]="details?.address.line1"
        (ngModelChange)="handleChange($event)"
        placeholder="Line1">
        <input
        type="text"
        name="line2"
        [ngModel]="details?.address.line2"
        (ngModelChange)="details.address.line2=$event"
        placeholder="Line2">
        <input
        type="text"
        name="town"
        [ngModel]="details?.address.town"
        (ngModelChange)="details.address.town=$event"
        placeholder="town">
        <input
        type="text"
        name="postcode"
        [ngModel]="details?.address.postcode"
        (ngModelChange)="details.address.postcode=$event"            
        placeholder="postcode">
    </label>

    <label>
      <input
        type="checkbox"
        name="acceptData"
        [ngModel]="details?.acceptData"
        (ngModelChange)="details.acceptData=$event">
    </label>

    <button
      type="submit"
      [disabled]="form.invalid">
      Submit
    </button>

    <div>
      <br />
      Form Data
      <pre>{{ form.value | json }}</pre>
    </div>

  </form>

非常感谢任何帮助

Answer 1

只需包装以下表单控件:

"line1": "",
"line2": "",
"town": "",
"postcode": ""

在带有 ngModelGroup 的 div 中

<div ngModelGroup="address">
   <!-- input fields belonging to address here --> 
</div>

DEMO

似乎您可能还想将所有内容包装在 customer 中以匹配 JSON？然后做同样的事情，用 ngModelGroup="customer"

包裹所有东西