这看起来应该很简单......在步进器中,您正在收集信息,并且您想确保电子邮件是电子邮件。但似乎共享的“表单”标签会导致错误检查器出现问题并且无法正常工作?
进一步澄清......问题似乎实际上在以下标签元素中......
formControlName="emailCtrl"
当我删除此行并从 .ts (emailCtrl: ['', Validators.required],) 中删除它的兄弟行时,错误检查开始工作。但是,这意味着步进器无法验证是否需要此步骤。
如何确保步进器验证条目并同时确保 ErrorStateMatcher 工作?
这是我的组合 HTML ......
<mat-step [stepControl]="infoFormGroup">
<form [formGroup]="infoFormGroup">
<ng-template matStepLabel>Profile Information</ng-template>
<div>
<!-- <form class="emailForm"> -->
<mat-form-field class="full-width">
<input matInput placeholder="Username" [formControl]="emailFormControl"
formControlName="emailCtrl"
[errorStateMatcher]="infoMatcher">
<mat-hint>Must be a valid email address</mat-hint>
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
Please enter a valid email address for a username
</mat-error>
<mat-error *ngIf="emailFormControl.hasError('required')">
A username is <strong>required</strong>
</mat-error>
</mat-form-field>
<!-- </form> -->
</div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</form>
</mat-step>
如您所见,我已经注释掉了电子邮件插槽的嵌套“表单”。在测试中,我尝试将其注释掉而不是注释掉。无论哪种方式,错误检查都无法正常工作。
以下是一些相关的 .ts 片段...
import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
export class Pg2ErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
...
export class Pg2Dialog {
...
emailFormControl = new FormControl('', [
Validators.required,
Validators.email,
]);
infoMatcher = new Pg2ErrorStateMatcher();
...
this.infoFormGroup = this._formBuilder.group({
emailCtrl: ['', Validators.required],
});