How to bind angular property to model as array?

Question

My component is

import { Component } from '@angular/core';

export class LocationModel {
  name: string;
  position: { 
    center: any[]
  }
} 

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  model: LocationModel = new LocationModel();

  onSubmit() {    
    console.log(this.model);
  }
}

And HTML component template is:

<form (ngSubmit)="onSubmit(f)">
 Location name: 
 <input 
   type="text"
   [(ngModel)]="model.name"
   name="firstName"><br>
lon: 
 <input 
   type="text" 
   [(ngModel)]="model.positon.center[1]"
   name="lon"><br>
lat:
 <input 
   type="text" 
   [(ngModel)]="model.positon.center[0]"
   name="lat"><br>
 <input type="submit" value="Submit">
</form>

{{model|json}}

But I could not create a json template like following:

{ "name": "some name", "position": { "center": [ 30.6067, 490.5563189 ] } }

Answer 1

Can you please try like this,

Assigning initial value to center

export class LocationModel {
  name: string;
  position: { 
    center: ["",""]
  }
} 

Html:

<form (ngSubmit)="onSubmit(f)">
 Location name: 
 <input 
   type="text"
   [(ngModel)]="model.name"
   name="firstName"><br>
lon: 
 <input 
   type="text" 
   [(ngModel)]="model.positon.center[1]"
   name="lon"><br>
lat:
 <input 
   type="text" 
   [(ngModel)]="model.positon.center[0]"
   name="lat"><br>
 <input type="submit" value="Submit">
</form>

{{model|json}}