Question

我遇到以下角度形式错误-

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();}
}

userService：

@Injectable({
  providedIn: 'root'
})
export class UserService   {
userDetailes:User=null;
}

我的app.module和项目中的其他表单都能很好地导入表单。我认为问题出在这个组件上。

Answer 1

代替：

密码：[''， [Validators.required，Validators.minLength（6），Validators]，

我必须写：

密码：[''， [Validators.required，Validators.minLength（6），Validators.maxLength（10）]，

角形式错误-TypeError：类构造函数验证器不能在没有“ new”的情况下调用

1 个答案: