database.component.html

<div class="stepContent">
    <h2 class="stepContentTitle"><i class="fa fa-database"></i> {{lang.database}}</h2>
    <div class="alert-message alert-message-info" role="alert" style="margin-top: 30px;min-width: 100%;">
        {{lang.stepDatabase_desc}}
    </div>
    <form [formGroup]="stepFormGroup" style="width: 850px;margin: auto;">
        <mat-form-field appearance="outline">
            <mat-label>{{lang.host}}</mat-label>
            <input matInput formControlName="dbHostCtrl" required>
        </mat-form-field>
        <mat-form-field appearance="outline">
            <mat-label>{{lang.port}}</mat-label>
            <input matInput formControlName="dbPortCtrl"  required>
        </mat-form-field>
        <mat-form-field appearance="outline">
            <mat-label>{{lang.user}}</mat-label>
            <input matInput formControlName="dbLoginCtrl"  required>
        </mat-form-field>
        <mat-form-field appearance="outline">
            <mat-label>{{lang.password}}</mat-label>
            <input matInput formControlName="dbPasswordCtrl"  required>
        </mat-form-field>
        <mat-form-field appearance="outline">
            <mat-label>{{lang.dbName}}</mat-label>
            <input matInput formControlName="dbNameCtrl" required>
        </mat-form-field>
        <div style="text-align:center;">
            <button mat-raised-button type="button" color="primary" (click)="checkConnection()">
                {{lang.checkInformations}}
            </button>
        </div>
    </form>
</div>