Angular Material (8) 重新加载页面时显示错误消息(来自验证程序)
Angular Material (8) Error Message (from Validator) being displayed when Page reloaded
我是 Angular Material
的新手。我正在使用 Angular Material (8)
制作注册表。这样做时,我看到重新加载页面时显示错误消息(通过点击浏览器上的 "Refresh" 按钮)。该领域从未以任何方式、形状或形式被触及。
为什么会这样?
TIA
文件:register.component.html
[ ... snip ...]
<div class="flex-register-form">
<!-- Form -->
<form [formGroup]="registerForm" (ngSubmit)="registerForm.valid && onSubmit()" class="text-center">
<div class="form-col">
<div class="col">
<!-- First name -->
<div class="md-form">
<input required type="text" id="materialRegisterFormFirstName" class="form-control" mdbInput
formControlName="firstname" />
<label for="materialRegisterFormFirstName">First name</label>
<mat-error *ngIf="registerForm.controls['firstname'].hasError('required')" >First name is required</mat-error>
</div>
[ ... snip ...]
文件:register.component.ts
import { Component, OnInit } from '@angular/core';
import { RegisterModel } from '../../models/register.models';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
user: RegisterModel = new RegisterModel();
registerForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.registerForm = new FormGroup({
'firstname': new FormControl(null, [Validators.required]),
'lastname': new FormControl(null, [Validators.required, Validators.maxLength(25)]),
'email': new FormControl(null, [Validators.required, Validators.email, Validators.maxLength(25)]),
'password': new FormControl(null, [Validators.required, Validators.minLength(8), Validators.maxLength(25)]),
'agree': new FormControl(null, [Validators.required])
});
}
onSubmit() {
console.log(" was submited ");
}
}
这是因为根据验证,它处于待处理状态。但是,我们还没有触及控件,所以我们可以做的是,我们可以通过检查表单字段的控件状态 touched
来检查用户是否与控件交互。
更正
<mat-error *ngIf="registerForm.controls['firstname'].hasError('required') && registerForm.controls.firstname.touched" >First name is required</mat-error>
您可以阅读更多相关信息here
我是 Angular Material
的新手。我正在使用 Angular Material (8)
制作注册表。这样做时,我看到重新加载页面时显示错误消息(通过点击浏览器上的 "Refresh" 按钮)。该领域从未以任何方式、形状或形式被触及。
为什么会这样?
TIA
文件:register.component.html
[ ... snip ...]
<div class="flex-register-form">
<!-- Form -->
<form [formGroup]="registerForm" (ngSubmit)="registerForm.valid && onSubmit()" class="text-center">
<div class="form-col">
<div class="col">
<!-- First name -->
<div class="md-form">
<input required type="text" id="materialRegisterFormFirstName" class="form-control" mdbInput
formControlName="firstname" />
<label for="materialRegisterFormFirstName">First name</label>
<mat-error *ngIf="registerForm.controls['firstname'].hasError('required')" >First name is required</mat-error>
</div>
[ ... snip ...]
文件:register.component.ts
import { Component, OnInit } from '@angular/core';
import { RegisterModel } from '../../models/register.models';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
user: RegisterModel = new RegisterModel();
registerForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.registerForm = new FormGroup({
'firstname': new FormControl(null, [Validators.required]),
'lastname': new FormControl(null, [Validators.required, Validators.maxLength(25)]),
'email': new FormControl(null, [Validators.required, Validators.email, Validators.maxLength(25)]),
'password': new FormControl(null, [Validators.required, Validators.minLength(8), Validators.maxLength(25)]),
'agree': new FormControl(null, [Validators.required])
});
}
onSubmit() {
console.log(" was submited ");
}
}
这是因为根据验证,它处于待处理状态。但是,我们还没有触及控件,所以我们可以做的是,我们可以通过检查表单字段的控件状态 touched
来检查用户是否与控件交互。
更正
<mat-error *ngIf="registerForm.controls['firstname'].hasError('required') && registerForm.controls.firstname.touched" >First name is required</mat-error>
您可以阅读更多相关信息here