角（V4）形式的数据对象不匹配JSON数据

Question

我有以下形式在角（V4）

我拉以下JSON数据

db.json文件内容

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

设置

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

FORM DATA

{ 
    "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

只是包装下面的表单控件：一个div内

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

与ngModelGroup

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

DEMO

看来你也许也想包装内customer一切相匹配的JSON？然后做同样的事情，用ngModelGroup="customer"