我正在尝试弄清楚如何使用Angular Material的Form Field错误消息。
打字稿:
this.firstFormGroup = this._formBuilder.group({
personalInfo: this._formBuilder.group({
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.required],
passwordConfirm: ['', Validators.required]
});
getErrorMessage() {
return this.email.hasError('required') ? 'You must enter a value' :
this.email.hasError('email') ? 'Not a valid email' : '';
}
HTML:
<ng-container formGroupName="personalInfo">
<ng-template matStepLabel class="tb_type-group__copy">Personal Info</ng-template>
<div class="row column">
<div class="row">
<h4 class="tb_heading--h4">Account Info</h4>
</div>
<mat-form-field>
<input matInput class="tb_input" type="text" placeholder="Email" formControlName="email" required>
<mat-error>{{getErrorMessage()}}</mat-error>
</mat-form-field>
<mat-form-field>
<input #email matInput class="tb_input" type="password" placeholder=" Password"
formControlName="password" required>
<mat-hint>Passwords must include 1 uppercase, 1 lowercase, 1 number, and 1 special character. e.g.
P@ssw0rd</mat-hint>
</mat-form-field>
<mat-form-field>
<input matInput class="tb_input" type="password" placeholder="Confirm Password"
formControlName="passwordConfirm" required>
</mat-form-field>
</div>
</ng-container>
我正在尝试使用有关如何使用表格错误的材料教程,但是我不知道如何访问元素。他们的示例是一个控制元素,其中我的元素嵌套在两组中。我如何才能使它正常工作。如果我只是插入他们的基本示例,则错误消息会起作用,因此它不是角度材料导入问题或类似问题。