我正在使用Angular Material (8)
. 我正在尝试为Validators
表单上的每个字段编写正确的错误消息。截至目前,我收到以下与字段相关的错误。
为什么会在表单中发生这种情况?任何帮助、提示或建议将不胜感激!
TIA
文件:register.component.html
[... snip ...]
<div class="flex-register-form">
<!-- Form -->
<form [formGroup]="registerForm" (ngSubmit)="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>
</div>
</div>
<!-- Last name -->
<div class="col">
<div class="md-form">
<input required type="text" id="materialRegisterFormLastName" class="form-control" mdbInput
formControlName="lastname" />
<label for="materialRegisterFormLastName">Last name</label>
</div>
</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 = new FormGroup( {
'firstname' : new FormControl( [Validators.required, Validators.maxLength(25)] ),
'lastname' : new FormControl( [Validators.required, Validators.maxLength(25)]),
'email' : new FormControl( [Validators.required, Validators.email, Validators.maxLength(25) ] ),
'password' : new FormControl( [Validators.required, Validators.minLength(8), Validators.maxLength(25)]),
'agree' : new FormControl( [Validators.required])
});
constructor( private formBuilder: FormBuilder ) {
}
ngOnInit() {
}
onSubmit() {
console.log(" was submited ");
}
}