opt-cc/static/src/app/statistic/war/war-submit/war-submit.component.html

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

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

  <div class="form-group">
    <label for="campaign">{{'stats.war.submit.campaign' | translate}}</label>
    <select class="form-control"
            name="campaign"
            id="campaign"
            [(ngModel)]="war.campaign"
            required>
      <option *ngFor="let campaign of campaignService.campaigns$ | async" [ngValue]="campaign._id">
        {{campaign.title}}
      </option>
    </select>
  </div>

  <div class="form-group">
    <label for="fractionMappingBlufor">{{'stats.war.submit.mapping.blufor' | translate}}</label>
    <select id="fractionMappingBlufor" name="fractionMappingBlufor" class="form-control btn dropdown-toggle"
            required
            [(ngModel)]="war.fractionMappingBlufor">
      <option value="{{fraction.ARF}}">{{fraction.ARF}}</option>
      <option value="{{fraction.SWORD}}">{{fraction.SWORD}}</option>
      <option value="OPFOR">{{fraction.OPFOR}}</option>
      <option value="BLUFOR">{{fraction.BLUFOR}}</option>
    </select>
    <show-error displayName="{{'stats.war.submit.mapping.blufor' | translate}}" controlPath="fraction"></show-error>
  </div>

  <div class="form-group">
    <label for="fractionMappingOpfor">{{'stats.war.submit.mapping.opfor' | translate}}</label>
    <select id="fractionMappingOpfor" name="fractionMappingOpfor" class="form-control btn dropdown-toggle"
            required
            [(ngModel)]="war.fractionMappingOpfor">
      <option value="{{fraction.ARF}}">{{fraction.ARF}}</option>
      <option value="{{fraction.SWORD}}">{{fraction.SWORD}}</option>
      <option value="OPFOR">{{fraction.OPFOR}}</option>
      <option value="BLUFOR">{{fraction.BLUFOR}}</option>
    </select>
    <show-error displayName="{{'stats.war.submit.mapping.opfor' | translate}}" controlPath="fraction"></show-error>
  </div>


  <div class="form-group" *ngIf="!war._id">
    <label for="log">{{'stats.war.submit.logfile' | translate}}</label>
    <input id="log" name="log" class="ui-button form-control" type="file"
           (change)="fileChange($event)">
    <span class="label label-bg label-danger center-block" style="font-size:small" *ngIf="showFileError">
        {{'stats.war.submit.error.file.format' | translate}}
    </span>
  </div>

  <div class="form-group" *ngIf="war._id">
    <label for="ptBlufor">{{'stats.war.submit.points' | translate}} {{fractionHelpers.getFractionName(war, "BLUFOR")}}</label>
    <input type="number" class="form-control"
           [(ngModel)]="war.ptBlufor"
           name="ptBlufor"
           id="ptBlufor"
           required min="0"/>
    <show-error displayName="{{'stats.war.submit.points' | translate}}"
                controlPath="ptBlufor"></show-error>
  </div>

  <div class="form-group" *ngIf="war._id">
    <label for="ptOpfor">{{'stats.war.submit.points' | translate}} {{fractionHelpers.getFractionName(war, "OPFOR")}}</label>
    <input type="number" class="form-control"
           [(ngModel)]="war.ptOpfor"
           name="ptOpfor"
           id="ptOpfor"
           required min="0"/>
    <show-error displayName="{{'stats.war.submit.points' | translate}}"
                controlPath="ptOpfor"></show-error>
  </div>

  <div class="form-group" *ngIf="war._id">
    <label for="endBudgetBlufor">{{'stats.war.submit.final.budget' | translate}} {{fraction.BLUFOR}}</label>
    <input type="number" class="form-control"
           [(ngModel)]="war.endBudgetBlufor"
           name="endBudgetBlufor"
           id="endBudgetBlufor"
           required/>
    <show-error displayName="{{'stats.war.submit.final.budget' | translate}} {{fraction.BLUFOR}}"
                controlPath="endBudgetBlufor"></show-error>
  </div>

  <div class="form-group" *ngIf="war._id">
    <label for="endBudgetOpfor">{{'stats.war.submit.final.budget' | translate}} {{fraction.OPFOR}}</label>
    <input type="number" class="form-control"
           [(ngModel)]="war.endBudgetOpfor"
           name="endBudgetOpfor"
           id="endBudgetOpfor"
           required/>
    <show-error displayName="{{'stats.war.submit.final.budget' | translate}} {{fraction.OPFOR}}"
                controlPath="endBudgetOpfor"></show-error>
  </div>

  <button id="cancel"
          *ngIf="!loading"
          (click)="cancel()"
          class="btn btn-default">
    {{'stats.war.submit.button.cancel' | translate}}
  </button>

  <button id="save"
          type="submit"
          *ngIf="!loading"
          (click)="submitWar()"
          class="btn btn-default"
          [disabled]="!form.valid">
    {{'stats.war.submit.button.submit' | translate}}
  </button>
</form>