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

<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
  <h3 *ngIf="user._id">{{'user.submit.headline.edit' | translate}}</h3>
  <h3 *ngIf="!user._id">{{'user.submit.headline.new' | translate}}</h3>

  <div class="form-group">
    <label for="title">{{'user.submit.field.name' | translate}}</label>
    <input class="form-control"
           [(ngModel)]="user.username"
           name="title"
           id="title"
           required
           maxlength="50"/>
    <show-error displayName="{{'user.submit.field.name' | translate}}" controlPath="title"></show-error>
  </div>

  <div class="form-group">
    <label for="squad">{{'user.submit.field.squad' | translate}}</label>
    <select class="form-control"
            name="squad"
            id="squad"
            [(ngModel)]="user.squadId"
            [compareWith]="equals"
            (change)="toggleRanks()">
      <option [value]="0">{{'user.submit.field.squad.not.assigned' | translate}}</option>
      <option *ngFor="let squad of squads" [ngValue]="squad">
        {{squad.fraction == 'BLUFOR'? fraction.ARF : fraction.SWORD}}: {{squad.name}}
      </option>
    </select>
    <show-error displayName="{{'user.submit.field.squad' | translate}}" controlPath="squad"></show-error>
  </div>

  <div class="form-group" [style.display]="ranksDisplay">
    <label for="rank">{{'user.submit.field.rank' | translate}}</label>
    <select class="form-control"
            name="rank"
            id="rank" [ngModel]="user.rankLvl"
            #rankLevel
            style="min-width: 200px;">
      <option *ngFor="let rank of ranks" [value]="rank.level">{{rank.name}}</option>
    </select>
    <show-error displayName="{{'user.submit.field.rank' | translate}}" controlPath="rank"></show-error>
  </div>

  <button id="cancel"
          (click)="cancel()"
          class="btn btn-default">
    {{'user.submit.button.cancel' | translate}}
  </button>

  <button id="save"
          type="submit"
          (click)="saveUser(rankLevel.value)"
          class="btn btn-default"
          [disabled]="!form.valid">
    {{'user.submit.button.submit' | translate}}
  </button>
</form>