<form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview" style="display: flex;flex-direction: column;"> <h3 *ngIf="appUser._id">{{'user.submit.headline.edit' | translate}}</h3> <h3 *ngIf="!appUser._id">{{'user.submit.headline.new' | translate}}</h3> <mat-form-field> <label for="title">{{'user.submit.field.name' | translate}}</label> <input matInput [(ngModel)]="appUser.username" name="title" id="title" required maxlength="50"/> <show-error displayName="{{'user.submit.field.name' | translate}}" controlPath="title"></show-error> </mat-form-field> <div class="form-group"> <label for="squad">{{'user.submit.field.squad' | translate}}</label> <select class="form-control" name="squad" id="squad" [(ngModel)]="appUserSquadId"> <option [value]="null">{{'user.submit.field.squad.not.assigned' | translate}}</option> <option *ngFor="let squad of squads" [ngValue]="squad._id"> {{squad.fraction == 'BLUFOR'? fraction.BLUFOR : fraction.OPFOR}}: {{squad.name}} </option> </select> <show-error displayName="{{'user.submit.field.squad' | translate}}" controlPath="squad"></show-error> </div> <label>{{'user.submit.field.activated' | translate}}</label> <mat-slide-toggle name="activated" [(ngModel)]="appUser.activated"></mat-slide-toggle> <label>{{'user.submit.field.permission' | translate}}</label> <mat-form-field> <mat-select name="permission" [(ngModel)]="appUser.permission"> <mat-option [value]="0">User</mat-option> <mat-option [value]="1">SQL</mat-option> <mat-option [value]="2">HL</mat-option> <mat-option [value]="3">MT</mat-option> <mat-option [value]="4">Admin</mat-option> </mat-select> </mat-form-field> <button id="cancel" style="width: 50%" (click)="cancel()" class="btn btn-default"> {{'user.submit.button.cancel' | translate}} </button> <button id="save" style="width: 50%" type="submit" (click)="saveUser()" class="btn btn-default" [disabled]="!form.valid"> {{'user.submit.button.submit' | translate}} </button> </form>