我收到以下角度形式错误 -
ERROR TypeError: Class constructor Validators cannot be invoked without 'new'
at forms.js:1480
at Array.map (<anonymous>)
at _executeValidators (forms.js:1476)
at FormControl.validator (forms.js:1418)
at FormControl._runValidator (forms.js:4089)
at FormControl.updateValueAndValidity (forms.js:4050)
at new FormControl (forms.js:4656)
at FormBuilder.control (forms.js:8951)
at FormBuilder._createControl (forms.js:9011)
at forms.js:8990
有人可以告诉我我错过了什么吗？
我的 HTML：
<form class="formLogin" [formGroup]="personalForm" (ngSubmit)="onSubmit()">
<div class="form-group rtl">
<label class="col-sm-3 control-label pull-right" for="mail"> your email</label>
<div class="col-sm-9">
<input type="text" formControlName="mail" [value]="person.Email" placeholder="myAddress@gmail.com" class="form-control ltr textBox" email [ngClass]="{ 'is-invalid': submitted && f.mail.errors }" />
<div *ngIf="submitted && f.mail.errors" class="invalid-feedback">
<div *ngIf="f.mail.errors.required">requird</div>
<div *ngIf="f.mail.errors.email">invalid address!</div>
</div></div>
</div>
<br><br>
<div class="form-group rtl">
<label class="col-sm-3 control-label pull-right" for="phone">your phone</label>
<div class="col-sm-9">
<input type="text" formControlName="phone" [value]="person.Phone" class="form-control ltr textBox" placeholder="000-0000000" [ngClass]="{ 'is-invalid': submitted && f.phone.errors }" />
<div *ngIf="submitted && f.phone.errors" class="invalid-feedback">
<div *ngIf="f.phone.errors.required">requird!</div>
<div *ngIf="f.phone.errors.pattern">digits only!</div>
</div></div>
</div>
<br><br>
<div class="form-group rtl">
<label class="col-sm-3 control-label pull-right" for="username">your username</label>
<div class="col-sm-9">
<input type="text" (focus)="incorrectData=false" [value]="person.UserName" formControlName="username" class="form-control textBox " [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="f.username.errors.required">required!</div>
</div></div>
</div>
<br><br>
<div class="form-group rtl">
<label class="col-sm-3 control-label pull-right" for="password">your password</label>
<div class="col-sm-9">
<input type="password" (focus)="incorrectData=false" [value]="person.Password" minlength="6" formControlName="password" class="form-control textBox" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">requird!</div>
<div *ngIf="f.password.errors.minlength">password length minimum 6 letters!</div>
</div></div>
</div>
<br>
</form>
我的ts：
import { Component, OnInit } from '@angular/core';
import { UserService } from '../../../services/user.service';
import { User,UserEnum } from 'src/app/classes/User';
import { FormBuilder, FormGroup,Validators} from '@angular/forms';
@Component({
selector: 'app-personal-details',
templateUrl: './personal-details.component.html',
styleUrls: ['./personal-details.component.css']
})
export class PersonalDetailsComponent implements OnInit {
person:User;
personalForm:FormGroup;
submitted :boolean;
constructor(private userSer:UserService,
private formBuilder: FormBuilder){ }
ngOnInit() {
this.person=this.userSer.userDetailes;
this.personalForm = this.formBuilder.group({
email:['',[Validators.required,Validators.email]],
password: ['', [Validators.required,Validators.minLength(6),Validators]],
username: ['', Validators.required],
phone:['',[Validators.required,Validators.maxLength(10),Validators.minLength(9),Validators.pattern('[0-9]*')]]});}
get f()
{ return this.personalForm.controls; }
saveUser() {}
onSubmit()
{
this.submitted = true;
// stop here if form is invalid
if (this.personalForm.invalid)
{return;}
this.saveUser();}
}
用户服务：
@Injectable({
providedIn: 'root'
})
export class UserService {
userDetailes:User=null;
}
我的 app.module 有很好的表单导入，项目中的其他表单运行良好。我认为问题出在这个组件上。