Angular Form Containing input values that should create a JSON object with other JSON objects as atributes

Im trying to create a form that will return as its value an JSON object that contains as an attribute a list of objects. Form value JSON example :

{
    "name" : "contestName",
    "teams" :[
        {
          "name":"team1",
          "wins":1,
          "loses":1},
        {
          "name":"team2",
          "wins":2,
          "loses":2}
             ]

}

My Form Looks like :

  <form id="form" #ContestForm="ngForm"  (ngSubmit)="addNewContest(ContestForm.value)">
          <div class="form-group" [(ngModel)]="contest" >
            <input type="Contest Name" [(ngModel)]="name"  class="form-control" placeholder="Contest Name">

          <br>

          <div class="form-group" [(ngModel)]="teams"  *ngFor="let i of [].constructor(2)">
            <br>
            <label>Team {{i}} :</label>
            <br><br>
            <input type="Name" [(ngModel)]="name"  class="form-control" placeholder="Name">

          <br>
          <div class="form-group">
            <input type="Wins" [(ngModel)]="wins"  class="form-control" placeholder="Wins">
          </div>
          <br>
          <div class="form-group">
            <input type="Loses" [(ngModel)]="loses"  class="form-control" placeholder="Loses">
          </div>
        </div>

        <br>

        </div>


        </form>

I tried this and setting the values through typescript in a createObjectFromForm function that would individually assign the values and return the object but got no results, I am hoping someone faced this issue as I think it`s a pretty common one.

Thanks Brandon Taylor, I used a reactive form and form groups and reached the desired result! example :

form(in html file) :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

 <form [formGroup]="contestForm" (ngSubmit)="alert()">

          <input formControlName="name"/>

          <div formArrayName="teams" *ngFor="let team of getTeamsControls(); index as i">

          <div formGroupName="{{i}}">

            <label> name </label>
            <input type="text" id="name" name="name" formControlName="name">

            <label> wins </label>
            <input type="text" id="wins" name="wins" formControlName="wins">

            <label> loses </label>
            <input type="text" id="loses" name="loses" formControlName="loses">

            </div>

          </div>

          <p>
            <button type="submit">Submit</button>
          </p>

        </form>

<!-- end snippet -->

form declaration and getTeamsControls(); function (in typescript file):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-typescript -->

  contestForm = new FormGroup({

    name: new FormControl(''),

    teams: new FormArray([

      new FormGroup({

          name : new FormControl(''),
          wins : new FormControl(''),
          loses : new FormControl('')


      })
      ,
      new FormGroup({

          name : new FormControl(''),
          wins : new FormControl(''),
          loses : new FormControl('')
      })
   ])
  })

  getTeamsControls() { return (<FormArray>this.contestForm.get('teams')).controls;}

<!-- end snippet -->