opt-cc/static/src/app/users/edit-user/edit-user.component.html

<form #form="ngForm" class="overview">
  <h3 *ngIf="user._id">Teilnehmer editieren</h3>
  <h3 *ngIf="!user._id">Neuen Teilnehmer hinzufügen</h3>

  <div class="form-group">
    <label for="title">Name</label>
    <input class="form-control"
           [(ngModel)]="user.username"
           name="title"
           id="title"
           required
           maxlength="50"/>

    <show-error text="Name" path="title"></show-error>
  </div>

  <div class="form-group">
    <label for="squad">Squad</label>
    <select class="form-control"
            name="squad"
            id="squad"
            [(ngModel)]="user.squad"
            [compareWith]="equals"
            (change)="toggleRanks()">
      <option [value]="0">Ohne Fraktion/ Squad</option>
      <option *ngFor="let squad of squads" [ngValue]="squad">
        {{squad.fraction == 'BLUFOR'? 'NATO' : 'CSAT'}}: {{squad.name}}
      </option>
    </select>

    <show-error text="Squad" path="squad"></show-error>
  </div>

  <div class="form-group" [style.display]="ranksDisplay">
    <label for="rank">Rang</label>
    <select class="form-control"
            name="rank"
            id="rank" [ngModel]="user.rank?.level"
            #rankLevel
            style="min-width: 200px;">
      <option *ngFor="let rank of ranks" [value]="rank.level">{{rank.name}}</option>
    </select>

    <show-error text="Squad" path="squad"></show-error>
  </div>

  <button id="cancel"
          (click)="cancel()"
          class="btn btn-default">
    Abbrechen
  </button>

  <button id="save"
          (click)="saveUser(rankLevel.value)"
          class="btn btn-default"
          [disabled]="!form.valid">
    Bestätigen
  </button>

  <span *ngIf="showErrorLabel"
        class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
    {{error}}
  </span>

  <span *ngIf="showSuccessLabel"
        class="label label-success label-small"
        style="margin-left: inherit">
    Erfolgreich gespeichert
  </span>

</form>