<div class="header"> <mat-progress-bar mode="determinate" [value]="stepProgress" class="stepper-progress-bar"></mat-progress-bar> </div> <form [formGroup]="form" (ngSubmit)="onSubmit()" (keydown.enter)="$event.preventDefault()"> <vitamui-common-stepper> <cdk-step> <div class="content"> <h3>Relevé de valeur probante</h3> <h2>Unités archivistiques</h2> <div class="d-flex"> <vitamui-common-input formControlName="unitId" minlength="36" maxlength="36" required placeholder="Identifiant" i18n-placeholder="UnitId@@probativeValueCreateIdentifierPlaceholder"> <ng-container *ngIf="form.get('unitId')?.touched"> <vitamui-common-input-error *ngIf="!!form.get('unitId')?.errors?.required" i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error> <ng-container *ngIf="form.get('unitId')?.errors?.minlength" > <ng-template #minlengthErrorTemplate let-minlength="minlength"> <vitamui-common-input-error i18n="Minlength field error hint@@formErrorMinlengthField"> Le champ doit contenir au moins {{ minlength.requiredLength }} caractères </vitamui-common-input-error> </ng-template> <ng-container *ngTemplateOutlet="minlengthErrorTemplate;context:form.get('unitId').errors"> </ng-container> </ng-container> </ng-container> </vitamui-common-input> </div> <div class="form-group"> <div class="col-8 form-control"> <mat-form-field class="vitamui-mat-select"> <mat-select [formControl]="accessContractSelect" placeholder="Selectionnez un contrat d'accès" panelclass="vitamui-mat-select" required> <mat-option *ngFor='let accessContract of accessContracts' [value]="accessContract.key">{{accessContract.label}} </mat-option> </mat-select> <div class="select-arrow"> <i class="material-icons">keyboard_arrow_up</i> <i class="material-icons">keyboard_arrow_down</i> </div> </mat-form-field> </div> </div> <div class="form-group"> <div class="col-8 form-control"> <mat-form-field class="vitamui-mat-select"> <mat-select formControlName="usage" placeholder="Selectionner un usage" panelclass="vitamui-mat-select" required> <mat-option *ngFor='let usage of usages' [value]="usage.key">{{usage.label}}</mat-option> </mat-select> <div class="select-arrow"> <i class="material-icons">keyboard_arrow_up</i> <i class="material-icons">keyboard_arrow_down</i> </div> </mat-form-field> </div> </div> <div class="d-flex"> <vitamui-common-input formControlName="version" min="0" required placeholder="Version" type="number" i18n-placeholder="Version@@probativeValueCreateVersionPlaceholder"> <ng-container *ngIf="form.get('version')?.touched"> <vitamui-common-input-error *ngIf="!!form.get('version')?.errors?.required" i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error> </ng-container> </vitamui-common-input> </div> <div class="actions"> <button type="submit" class="btn primary" [disabled]="form.invalid">Terminer</button> <button type="button" class="btn cancel" (click)="onCancel()">Annuler</button> </div> </div> </cdk-step> </vitamui-common-stepper> </form>