角（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"