Implementación de nuevo jugador a la tabla 2

<div id='open-modal' class="modal-window">
  <div><a href="#" title="Close" class="modal-close">Close</a></div>
  <h1>New Player Form</h1>
  <div>
    <form #playerForm='ngForm' novalidate (ngSubmit)="onSubmit(playerForm)">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" name="name" [ngModel]="player?.name"
          (ngModelChange)="player.name=$event" ngModel required>
      </div>
      <div class="form-group">
        <label for="lastName">Last Name</label>
        <input type="text" class="form-control" name="lastName" [ngModel]="player?.lastName"
          (ngModelChange)="player.lastName=$event" ngModel required>
      </div>
      <div class="form-group">
        <label for="position">Position</label>
        <select name="position" class="form-control" [ngModel]="player?.position"
          (ngModelChange)="player.position=$event" ngModel required>
          <option *ngFor="let position of squadNumber" [value]="position.key">{{position.label}}</option>
        </select>
      </div>
      <div class="form-group">
        <label for="weight">Weight</label>
        <input type="text" class="form-control" name="weight" [ngModel]="player?.weight"
          (ngModelChange)="player.weight=$event" ngModel required>
      </div>
      <div class="form-group">
        <label for="height">height</label>
        <input type="text" class="form-control" name="height" [ngModel]="player?.height"
          (ngModelChange)="player.height=$event" ngModel required>
      </div>
      <div class="form-group">
        <label for="nationality">Position</label>
        <select name="nationality" class="form-control" [ngModel]="player?.nationality"
          (ngModelChange)="player.nationality=$event" ngModel required>
          <option *ngFor="let n of countries" [value]="n.key">{{n.label}}</option>
        </select>
      </div>
      <div class="form-group">
        <label for="leftFooted">Left Footed</label>
        <input type="text" class="form-control" name="leftFooted" [ngModel]="player?.leftFooted"
          (ngModelChange)="player.leftFooted=$event" ngModel required>
      </div>
      <div class="submit-container">
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</div>

Me causa curiosidad cuando se modifico esto:

public squadNumber = Object.keys(SquadNumber)
    .slice(Object.keys(SquadNumber).length / 2)
    .map(key => ({
      label: key,
      key: SquadNumber[key]
    }));

No entiendo como a ti te compila sin ningún problema, yo estoy utilizando Angular 9 y me dice que no puedo utilizar player?.name le quito el ? y no me da error. y tampoco entiendo como tu no tienes el player declarado y sin embargo no tienes problemas yo si tuve que declararlo.

Yo arreglando todo como sientiendo que estoy bien menso 😛 pero ya notifico que esa era la intencion, a mi se me rompio el codigo en cuanto añadi el component del player dialog, increibles clases 😃

good

  private squadNumber = Object.keys(SquadNumber)
    .slice(Object.keys(SquadNumber).length / 2)
    .map((key) => ({
      label: key,
      key: SquadNumber[key],
    }));