title: register an angular form in a nested json
body: <p>I am trying to convert a html form to a nested json.
  These are my classes : </p>
  
  <pre><code>export class Config {
  id: string;
  name: string;
  email: string;
  lchart:ComponentLinechart;
  }
  
  export class ComponentLinechart {
  name_linechart : String;
  xAxis_linechart : String;
  yAxis_linechart : String;
  }
  </code></pre>
  
  <p>The formcomponent.ts:-</p>
  
  <pre><code>export class FormsComponent implements OnInit {
  newConfig: Config = new Config();
  constructor(private service : MyserviceService, private configservice:ConfigurationService) {
  }
  email = new FormControl('', [Validators.required, Validators.email]);
  xAxisControl = new FormControl('', Validators.required);
  yAxisControl = new FormControl('', Validators.required);
  name_linechart = new FormControl('', Validators.required);
  name = new FormControl('', Validators.required);
  getConfig(): void {
  this.configservice.getConfig()
    .subscribe(data =&gt; this.configs = data );    
  }
  
  createConfiguration(todoForm: NgForm): void {
  this.configservice.createConfig(this.newConfig)
    .subscribe(createconfig =&gt; {        
      todoForm.reset();
      this.newConfig = new Config();
      this.configs.unshift(createconfig)
    });
   }
  </code></pre>
  
  <p>The formcomponent.html :-</p>
  
  <pre><code>&lt;form #todoForm="ngForm" (ngSubmit)="createConfiguration(todoForm)" novalidate&gt;
  &lt;div class="example-container"&gt;
  
   &lt;mat-form-field appearance="fill"&gt;
        &lt;mat-label&gt;Enter your name&lt;/mat-label&gt;
           &lt;input matInput [(ngModel)]="newConfig.name" name="name" [formControl]="name" required&gt;
   &lt;/mat-form-field&gt;
  
   &lt;br&gt;
  
   &lt;mat-form-field appearance="fill"&gt;
      &lt;mat-label&gt;Enter your email&lt;/mat-label&gt;
      &lt;input matInput placeholder="pat@example.com" [(ngModel)]="newConfig.email" name="email" 
  [formControl]="email" required&gt;
      &lt;mat-error *ngIf="email.invalid"&gt;{{getErrorMessage()}}&lt;/mat-error&gt;
    &lt;/mat-form-field&gt;
    &lt;br&gt;
  
    &lt;mat-form-field appearance="fill"&gt;
      &lt;mat-label&gt;Name-linechart&lt;/mat-label&gt;
         &lt;input matInput [(ngModel)]="newConfig.name_linechart" name="name_linechart" 
  [formControl]="name_linechart" required&gt;
  &lt;/mat-form-field&gt;
  &lt;br&gt;
    &lt;mat-form-field *ngIf = "sales" &gt;
      &lt;mat-label&gt;xAxis-linechart&lt;/mat-label&gt;
      &lt;mat-select [(ngModel)]="newConfig.xAxis-linechart" name="xAxis-linechart" 
  [formControl]="xAxisControl" required&gt;
        &lt;mat-option  *ngFor="let field of fields"  [value] = "field"&gt;
          {{field}}
        &lt;/mat-option&gt;
      &lt;/mat-select&gt;
      &lt;mat-error *ngIf="xAxisControl.hasError('required')"&gt;Please choose a field&lt;/mat-error&gt;
    &lt;/mat-form-field&gt;
    &lt;br&gt;
  
    &lt;mat-form-field *ngIf = "sales" &gt;
      &lt;mat-label&gt;yAxis-linechart&lt;/mat-label&gt;
      &lt;mat-select [(ngModel)]="newConfig.yAxis-linechart" name="yAxis-linechart"   
  [formControl]="yAxisControl" required&gt;
        &lt;mat-option  *ngFor="let field of fields"  [value] = "field"&gt;
          {{field}}
        &lt;/mat-option&gt;
      &lt;/mat-select&gt;
      &lt;mat-error *ngIf="yAxisControl.hasError('required')"&gt;Please choose a field&lt;/mat-error&gt;
    &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Expected result : </p>
  
  <pre><code>{     
      "name": "adam",
      "email": "adam@gmail.com",
      "lchart": {
          "name_linechart": "books",
          "xAxis_linechart": "library",
          "yAxis_linechart": "percentage"
      }
  }
  </code></pre>
  
  <p>But this is what I get :</p>
  
  <pre><code>{
      "name": "adam",
      "email": "adam@gmail.com",
      "lchart": null
  }
  </code></pre>
  
  <p>I tried to write newConfig.lchart.name_linechart in the formcomponent.html but it gives me the error : </p>
  
  <pre><code>TypeError : cannot read property name_linechart of undefined.
  </code></pre>