In Angular how can custom validators be used in material dialog template

Question

I have a data entry form in a Material Dialog as a Template form. I want to apply some custom validators to some of its Input fields. I'm not having any success making them fire (although I tested one and it works on another "normal" form). Is there an issue trying to use them in pop-up Material Dialog forms? Is it a non-starter?

Assuming it's OK - why isn't it working?

Thanks.

import { Component, Inject, Optional } from '@angular/core';
import { NG_VALIDATORS } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { CustomMaxDirective } from '../../shared/validator/custom-max-validator.directive';
import { gteValidatorDirective } from '../../shared/validator/gte.validator';

export interface UsersData {
  name: string;
  id: number;
}


@Component({
  selector: 'app-dialog-box',
  templateUrl: './dialog-box.component.html',
  styleUrls: ['./dialog-box.component.css'],
  providers: [{ provide: NG_VALIDATORS, useExisting: gteValidatorDirective, multi: true },
    { provide: NG_VALIDATORS, useExisting: CustomMaxDirective, multi: true }]
})
export class DialogBoxComponent {

  action: string;
  local_data: any;

  constructor(
    public dialogBoxRef: MatDialogRef<DialogBoxComponent>,
    // @Optional() is used to prevent error if no data is passed
    @Optional() @Inject(MAT_DIALOG_DATA) public data: UsersData) {
    console.info('DialogBoxComponent');
    console.log(data);
    this.local_data = { ...data };
    this.action = this.local_data.action;
  }

  doAction() {
    this.dialogBoxRef.close({ event: this.action, data: this.local_data });
  }

  closeDialog() {
    this.dialogBoxRef.close({ event: 'Cancel' });
  }

}

Main part of the template;

<form #myForm="ngForm">
  <h1 mat-dialog-title>Row Action :: <strong>{{action}}</strong></h1>
  <mat-dialog-content>

    <mat-form-field *ngIf="action === 'Delete'; then delete; else (action === 'Update' && update) || (action === 'Add' && add)">
    </mat-form-field>

    <mat-form-field *ngIf="action != 'Delete';">
      <input placeholder="{{action}} TotalEntityThing" id="totalEntityThing" name="totalEntityThing" #totalEntityThing="ngModel" matInput [(ngModel)]="local_data.totalEntityThing" required pattern="^\d{2}:\d{2}:\d{2}:\d{2}">
      <ng-container *ngIf="totalEntityThing.invalid && (totalEntityThing.dirty || totalEntityThing.touched)">
        <ng-container *ngIf="totalEntityThing.errors.required">
          <div class="inputerrormessage">
            Required.
          </div>
        </ng-container>
        <ng-container *ngIf="totalEntityThing.errors.pattern">
          <div class="inputerrormessage">
            Formatting incorrect.
          </div>
        </ng-container>
      </ng-container>
    </mat-form-field>
    <mat-form-field *ngIf="action != 'Delete';">
      <input placeholder="{{action}} EntityThing" id="EntityThing" name="EntityThing" #EntityThing="ngModel" matInput [(ngModel)]="local_data.EntityThing"
             required pattern="^\d*(\.\d+)*" customMax="52" gtevalidator>
      <ng-container *ngIf="(EntityThing.invalid || EntityThing.errors?.gte || EntityThing.errors?.customMax) && (EntityThing.dirty || EntityThing.touched)">
        <ng-container *ngIf="EntityThing.errors?.required">
          <div class="inputerrormessage">
            Required.
          </div>
        </ng-container>
        <ng-container *ngIf="EntityThing.errors?.pattern">
          <div class="inputerrormessage">
            Formatting incorrect.
          </div>
        </ng-container>
        <ng-container *ngIf="EntityThing.errors?.customMax">
          <div class="inputerrormessage">
            too large.
          </div>
        </ng-container>
        <ng-container *ngIf="EntityThing.errors?.gte">
          <div class="inputerrormessage">
            The number should be greater than {{numVal.errors.requiredValue}}
          </div>
        </ng-container>
      </ng-container>
    </mat-form-field>

Answer 1

Don't use dialog inside the form.

<form>
    <mat-dialog-content>
        <mat-form-field></mat-form-field>
    </mat-dialog-content>
</form>

Use form inside the dialog.

<mat-dialog-content>
    <form>
        <mat-form-field></mat-form-field>
    </form>
</mat-dialog-content>