app-setup.component.html

<div class="container" fxLayout="row" fxLayoutAlign="center space-evenly">
  <mat-card id="app-setup">

    <mat-card-header>
      <mat-card-title>
        <h1>{{ uitextTitle }}</h1>
      </mat-card-title>

      <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon>more_vert</mat-icon>
      </button>

      <mat-menu #menu="matMenu">
        <button mat-menu-item (click)="storePreferences()">
          <mat-icon>file_download</mat-icon>
          <span>{{ uitextRememberValues }}</span>
        </button>
        <button mat-menu-item (click)="restoreDefaultValues()">
          <mat-icon>settings_backup_restore</mat-icon>
          <span>{{ uitextRestoreDefault }}</span>
        </button>
      </mat-menu>
    </mat-card-header>

    <mat-card-content>
      <!-- template-driven form -->
      <form>

        <!-- précision d'affichage -->
        <mat-form-field data-testclass="numeric-input">
            <input matInput [placeholder]="uitextDisplayAccuracy" #dp="ngModel" name="dp" inputmode="numeric"
                [ngModel]="displayPrec.value" (ngModelChange)="!dp.invalid ? displayPrec.setValue($event): null"
                pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$" required [appJalhydModelValidation]="displayPrec">

            <mat-error *ngIf="dp.invalid && (dp.dirty || dp.touched)">
                <div *ngIf="dp.errors.required || dp.errors.pattern">
                    {{ uitextMustBeANumber }}
                </div>
                <div *ngIf="! dp.errors.required && dp.errors.jalhydModel">
                    {{ dp.errors.jalhydModel.message }}
                </div>
            </mat-error>
        </mat-form-field>

        <!-- précision de calcul -->
        <mat-form-field data-testclass="numeric-input">
            <input matInput [placeholder]="uitextComputeAccuracy" #cp="ngModel" name="cp" inputmode="numeric"
                [ngModel]="computePrec.value" (ngModelChange)="!cp.invalid ? computePrec.setValue($event): null"
                pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$" required [appJalhydModelValidation]="computePrec">

            <mat-error *ngIf="cp.invalid">
                <div *ngIf="cp.errors.required || cp.errors.pattern">
                    {{ uitextMustBeANumber }}
                </div>
                <div *ngIf="! cp.errors.required && cp.errors.jalhydModel">
                    {{ cp.errors.jalhydModel.message }}
                </div>
            </mat-error>
        </mat-form-field>

        <!-- nombre d'itérations max Newton -->
        <mat-form-field data-testclass="numeric-input">
            <input matInput [placeholder]="uitextNewtonMaxIteration" #nmi="ngModel" name="nmi" inputmode="numeric"
                [ngModel]="newtonMaxIter.value" (ngModelChange)="!nmi.invalid ? newtonMaxIter.setValue($event): null"
                pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$" required [appJalhydModelValidation]="newtonMaxIter">

            <mat-error *ngIf="nmi.invalid && (nmi.dirty || nmi.touched)">
                <div *ngIf="nmi.errors.required || nmi.errors.pattern">
                    {{ uitextMustBeANumber }}