argos/dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.html

<div class="data-management-plan-editor">
    <mat-horizontal-stepper [linear]="isLinear">
        <mat-step [stepControl]="formGroup">
            <form *ngIf="formGroup" [formGroup]="formGroup">
                <ng-template matStepLabel>{{'DATASET-WIZARD.FIRST-STEP.TITLE' | translate}}</ng-template>
                <auto-complete class="mat-form-field-full-width" placeholder="{{'DATASET-WIZARD.FIRST-STEP.DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration"
                    titleKey="label" [control]="formGroup.get('dmp')" [required]="true">
                </auto-complete>
                <auto-complete class="mat-form-field-full-width" placeholder="{{'DATASET-WIZARD.FIRST-STEP.PROFILE' | translate}}" [configuration]="datasetProfileAutoCompleteConfiguration"
                    titleKey="label" [control]="formGroup.get('profile')" [required]="true" [disabled]="!formGroup.get('dmp').value">
                </auto-complete>
                <div>
                    <button matStepperNext mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
                </div>
            </form>
        </mat-step>
        <mat-step [stepControl]="formGroup">
            <form *ngIf="formGroup" [formGroup]="formGroup">
                <ng-template matStepLabel>{{'DATASET-WIZARD.SECOND-STEP.TITLE' | translate}}</ng-template>
                <app-dataset-editor-component [formGroup]="formGroup"></app-dataset-editor-component>
                <div>
                    <button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
                    <button matStepperNext mat-raised-button color="primary" (click)="formSubmit()">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
                </div>
            </form>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>{{'DATASET-WIZARD.THIRD-STEP.TITLE' | translate}}</ng-template>
            <dynamic-form class="mat-form-field-full-width" *ngIf="datasetWizardModel && datasetWizardModel.id" [dataModel]="datasetWizardModel"></dynamic-form>
            <div>
                <button style="margin-top:10px;" matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
            </div>
        </mat-step>
    </mat-horizontal-stepper>
    <!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->

</div>