1

我在材料对话框中有一个数据输入表单作为模板表单。我想将一些自定义验证器应用于它的一些输入字段。我没有成功让它们着火（尽管我测试了一个并且它适用于另一种“正常”形式）。尝试在弹出的材质对话框表单中使用它们是否有问题？是不是首发？

假设它没问题 - 为什么它不起作用？

谢谢。

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>
4

1 回答 1

0

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

<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>
于 2021-06-19T11:45:12.447 回答