在Angular中，如何在材料对话框模板中使用自定义验证器

Question

我在Material Dialog中有一个数据输入表单作为Template表单。我想对它的一些Input字段应用一些自定义验证器。我没有成功地让它们着火(尽管我测试了一个，它在另一种"正常"形式上有效(。在弹出的"材质对话框"窗体中使用它们时是否存在问题？它是一个非启动程序吗？

假设它是好的-为什么它不起作用？

谢谢。

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' });
}
}

模板的主要部分；

<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

不要在表单中使用对话框。

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

在对话框中使用表单。

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