我有一个材质网格，每行都有一个始终存在的输入框。我需要执行的验证是至少有一个输入框的值大于 0。
我需要验证的组件的 HTML 是这样的
<mat-label>Composizione artisti</mat-label>
<mat-table #table [dataSource]="dataSource" name="prenotazioneArtisti" #prenotazioneArtisti valida-prenotazione-artisti >
<ng-container matColumnDef="tipologia">
<mat-header-cell *matHeaderCellDef>Tipologia</mat-header-cell>
<mat-cell class="duration-cell" *matCellDef="let row">{{row.Tipologia}}</mat-cell>
<mat-footer-cell *matFooterCellDef><b>Totale</b></mat-footer-cell>
</ng-container>
<ng-container matColumnDef="richiesti">
<mat-header-cell *matHeaderCellDef>Richiesti</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-form-field floatLabel="never" *ngIf="row.Codice != '--'">
<input matInput [value]="row.Richiesti" min="0" type="number" [(ngModel)]="row.Richiesti">
</mat-form-field>
</mat-cell>
<mat-footer-cell *matFooterCellDef><b></b></mat-footer-cell>
</ng-container>
<ng-container matColumnDef="prezzoFisso">
<mat-header-cell *matHeaderCellDef>Prezzo Fisso</mat-header-cell>
<mat-cell class="duration-cell" *matCellDef="let row">{{row.PrezzoFisso}}</mat-cell>
<mat-footer-cell *matFooterCellDef><b></b></mat-footer-cell>
</ng-container>
<ng-container matColumnDef="prezzoTotale">
<mat-header-cell *matHeaderCellDef>Prezzo Totale</mat-header-cell>
<mat-cell class="duration-cell" *matCellDef="let row">{{row.PrezzoTotale}}</mat-cell>
<mat-footer-cell *matFooterCellDef><b>{{calculateTotalPrice()}}</b></mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
</mat-table>
这是.ts
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Observable, Subscription } from 'rxjs';
import { PrenotazioneArtista } from '../prenotazione-create-model';
@Component({
selector: 'app-prenotazione-artisti-manage',
templateUrl: './prenotazione-artisti-manage.component.html',
styleUrls: ['./prenotazione-artisti-manage.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PrenotazioneArtistiManageComponent implements OnInit {
displayedColumns = ['tipologia', 'richiesti', 'prezzoFisso', 'prezzoTotale'];
private eventsSubscription: Subscription;
private cd: ChangeDetectorRef;
@Input() artisti: PrenotazioneArtista[];
@Input() events: Observable<void>;
dataSource: MatTableDataSource<PrenotazioneArtista>;
constructor() {
}
ngOnInit(): void {
this.eventsSubscription = this.events.subscribe(() => this.refreshDataSource());
}
calculateTotalPrice(): number {
if (this.artisti != null) {
return this.artisti.reduce((accum, curr) => accum + curr.PrezzoTotale, 0);
}
}
refreshDataSource(): void {
try {
const art = this.artisti;
if (art != null) {
this.dataSource = new MatTableDataSource(art);
this.cd.detectChanges();
}
}
catch (error) {
}
}
}
谷歌搜索自定义验证器我创建了这个自定义验证器（valida-prenotazione-artisti）
import { Directive, forwardRef } from '@angular/core';
import { NG_VALIDATORS, FormControl } from '@angular/forms';
function validateEmailFactory() {
return (c: FormControl) => {
return true;
};
}
@Directive({
selector: '[valida-prenotazione-artisti],[valida-prenotazione-artisti][formControl]',
providers: [
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => PrenotazioneArtistiValidator), multi: true }
]
})
export class PrenotazioneArtistiValidator {
validator: Function;
constructor() {
this.validator = validateEmailFactory();
}
validate(c: FormControl) {
return this.validator(c);
}
}
虽然这个组件的容器是
<h2>Nuova prenotazione</h2>
<form (ngSubmit)="onSubmit()">
<p>
<mat-form-field appearence="fill">
<mat-select placeholder="Cliente" [(ngModel)]="Prenotazione.TokenCliente" #cliente="ngModel" name="cliente"
required>
<mat-option *ngFor="let item of clientiList" [value]="item.token">{{item.cognome}} {{item.nome}}
</mat-option>
</mat-select>
<mat-error *ngIf="!cliente.valid">Il campo cliente è obbligatorio</mat-error>
</mat-form-field>
</p>
<p>
<mat-form-field appearence="fill">
<input matInput [matDatepicker]="picker" placeholder="Inserisci la data dell' evento" required
[(ngModel)]="Prenotazione.DataEvento" [min]="startDate" #dataEvento="ngModel" name="dataEvento">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="!dataEvento.valid">Il campo data evento è obbligatorio</mat-error>
</mat-form-field>
</p>
<p>
<mat-form-field appearence="fill">
<mat-select required placeholder="Seleziona il tipo evento" [(ngModel)]="Prenotazione.CodiceTipoEvento"
#codiceTipoEvento="ngModel" name="codiceTipoEvento">
<mat-option *ngFor="let item of tipiEventoList" [value]="item.codice">{{item.descrizione}}</mat-option>
</mat-select>
<mat-error *ngIf="!codiceTipoEvento.valid">Il campo tipo evento è obbligatorio</mat-error>
</mat-form-field>
</p>
<p>
<mat-form-field appearence="fill">
<mat-label>Numero invitati</mat-label>
<input matInput placeholder="Numero Invitati" [(ngModel)]="Prenotazione.NumeroInvitati" #numero_invitati="ngModel" name="numero_invitati">
</mat-form-field>
</p>
<p>
<mat-form-field>
<mat-label>Festeggiato</mat-label>
<input matInput placeholder="Festeggiato" [(ngModel)]="Prenotazione.Festeggiato" #festeggiato="ngModel" name="festeggiato">
</mat-form-field>
</p>
<app-prenotazione-artisti-manage [artisti]="Prenotazione.RenderedArtisti" [events]="eventsSubject.asObservable()"></app-prenotazione-artisti-manage>
<p><button type="submit">Crea prenotazione</button></p>
</form>
当我单击提交时会发生什么是验证本机字段，而不是我的。
[![在此处输入图像描述][1]][1]
任何人都可以帮助我吗？
