user-form.component.html

<div>

    <app-progress-indicator *ngIf="loading"></app-progress-indicator>

    <!-- success message after updating -->
    <app-message *ngIf="success" [message]="successMessage" [size]="'short'"></app-message>

    <!-- content -->
    <form *ngIf="!loading" [formGroup]="form" class="form-content user-data" (ngSubmit)="submitData()">


        <!-- username -->
        <mat-form-field [class.large-field]="!username" [class.small-field]="username">
            <input matInput type="text" [formControl]="form.controls['username']"
                placeholder="{{ 'appLabels.form.user.general.username' | translate }}" autocomplete="username">
            <mat-hint *ngIf="formErrors.username">
                {{ formErrors.username }}
            </mat-hint>
        </mat-form-field>

        <!-- email -->
        <mat-form-field [class.large-field]="!username" [class.medium-field]="username">
            <input matInput type="email" [formControl]="form.controls['email']"
                placeholder="{{ 'appLabels.form.user.general.email' | translate }}" autocomplete="email">
            <mat-hint *ngIf="formErrors.email">
                {{ formErrors.email }}
            </mat-hint>
        </mat-form-field>


        <!-- given name -->
        <mat-form-field class="small-field">
            <input matInput [formControl]="form.controls['givenName']"
                placeholder="{{ 'appLabels.form.user.general.givenName' | translate }}" autocomplete="givenname">
            <mat-hint *ngIf="formErrors.givenName">
                {{ formErrors.givenName }}
            </mat-hint>
        </mat-form-field>

        <!-- family name -->
        <mat-form-field class="medium-field">
            <input matInput [formControl]="form.controls['familyName']"
                placeholder="{{ 'appLabels.form.user.general.familyName' | translate }}" autocomplete="name">
            <mat-hint *ngIf="formErrors.familyName">
                {{ formErrors.familyName }}
            </mat-hint>
        </mat-form-field>

        <!-- password // hidden in edit mode -->
        <app-password-form *ngIf="!username" (sendToParent)="getPassword($event)"></app-password-form>

        <!--
        <mat-form-field class="large-field hidden" *ngIf="!username">
            <input matInput [type]="'password'" [formControl]="form.controls['password']"
                   placeholder="{{ 'appLabels.form.user.general.password' | translate }} *">
        </mat-form-field>
        -->

        <mat-form-field class="large-field">

            <mat-select [formControl]="form.controls['lang']"
                [placeholder]="'appLabels.form.user.general.language' | translate">
                <mat-option *ngFor="let lang of languagesList" [value]="lang.language">
                    {{ lang.value }}
                </mat-option>
            </mat-select>

        </mat-form-field>

        <div class="large-field">
            <mat-slide-toggle [formControl]="form.controls['systemAdmin']" *ngIf="sysAdmin">
                {{ 'appLabels.form.user.general.sysAdmin' | translate }}
            </mat-slide-toggle>
        </div>

        <div class="form-panel form-action">
            <span>
                <button mat-button type="reset" (click)="closeDialog.emit()">
                    {{ 'appLabels.form.action.cancel' | translate }}
                </button>
            </span>
            <span class="fill-remaining-space"></span>
            <span>
                <!-- Update -->
                <button mat-raised-button type="submit" color="primary" *ngIf="username" [disabled]="!form.valid">
                    {{ 'appLabels.form.action.update' | translate }}
                </button>
                <!-- Create new -->
                <button mat-raised-button type="submit" color="primary" *ngIf="!username"
                    [disabled]="!form.valid || (form.controls['password'].value.length < 8)">
                    {{ 'appLabels.form.action.submit' | translate }}
                </button>
            </span>
        </div>

    </form>

</div>