使用Angular将表单转换为嵌套Json-Ngmodel

时间:2019-05-09 06:35:30

标签: angular angular-ngmodel

我有一个嵌套的Json模型类,并且有一个与其关联的表单。提交表单时,我没有嵌套的json结构。

尝试过[{ngModel}] =“ service.clientObject.address.address1”,但提交表单后,我仍未获得嵌套的json结构

我的HTML

<form class="form-inline" (ngSubmit)="createClient(form)" #form="ngForm" 
  autocomplete="off">
<div class="form-group mb-2">
   <label class="label-style label-top"><b>Address:</b> </label>
   <div>
    <div class="ml-md-3 mb-1"><input name="address1" placeholder="Address 
        Line1" #address1=ngModel              
          [(ngModel)]="service.clientObject.address.address1"
           class="form-control input-length">
    </div>
  </div>
 </div>

Component.ts中的构造函数

 import { ClientsServiceService } from 'src/app/clients-service.service';

 //and inside my component class I have constructor like this
  constructor(private service: ClientsServiceService) {}

服务等级

import { CreateClient } from 'src/app/shared/models/createClient.model';

export class ClientsServiceService {
 clientObject: CreateClient;
 constructor() {
   this.clientObject = new CreateClient();
  }}

模型类

// client class
import { Address } from './address.model';
export class CreateClient {
  address: Address;}

//Address Class
 export class Address{
address1: string;
address2: string;
country: string;
state: string;
zipcode: string;}

现在提交期望表格

{
  Address:{address1:"Some address"}
}

但是得到

 {address1:"Some address"}

0 个答案:

没有答案