dialog-generate-pab.component.html

<h1 mat-dialog-title [innerHTML]="uitextGeneratePAB"></h1>

<form id="form-generate-pab">

  <div mat-dialog-content>

    <mat-form-field>
      <input matInput required [placeholder]="uitextDebit" pattern="^([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$"
      [(ngModel)]="debit" name="debit" #inputDebit="ngModel">
    </mat-form-field>
    <mat-error *ngIf="inputDebit.invalid && (inputDebit.dirty || inputDebit.touched)">
        <div *ngIf="inputDebit.errors.required || inputDebit.errors.pattern">
            {{ uitextMustBePositive }}
        </div>
    </mat-error>

    <mat-form-field>
      <input matInput required [placeholder]="uitextCoteAmont" pattern="^-?([0-9]*\.)?([0-9]+[Ee]-?)?[0-9]+$"
      [(ngModel)]="coteAmont" name="coteAmont" #inputCoteAmont="ngModel">
    </mat-form-field>
    <mat-error *ngIf="inputCoteAmont.invalid && (inputCoteAmont.dirty || inputCoteAmont.touched)">
        <div *ngIf="inputCoteAmont.errors.required || inputCoteAmont.errors.pattern">
            {{ uitextMustBeANumber }}
        </div>
    </mat-error>

    <mat-form-field>
      <input matInput required [placeholder]="uitextNBBassins" pattern="^[1-9][0-9]*$"
      [(ngModel)]="nbBassins" name="nbBassins" #inputNbBassins="ngModel">
    </mat-form-field>
    <mat-error *ngIf="inputNbBassins.invalid && (inputNbBassins.dirty || inputNbBassins.touched)">
        <div *ngIf="inputNbBassins.errors.required || inputNbBassins.errors.pattern">
            {{ uitextMustBePositive }}
        </div>
    </mat-error>

  </div>

  <div mat-dialog-actions>
    <button mat-raised-button color="primary" [mat-dialog-close]="false" cdkFocusInitial>
      {{ uitextCancel }}
    </button>
    <button mat-raised-button type="submit" color="warn" (click)="generatePAB()"
      [disabled]="(inputDebit.invalid || inputCoteAmont.invalid || inputNbBassins.invalid)">
      {{ uitextGenerate }}
    </button>
  </div>

</form>