jsonangularformsngmodelnested-object

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.


Solution

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

    form(in html file) :

     <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>

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

      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;}