TypeError：无法在 setUpControl 上的字符串“[e-mail]”上创建属性“验证器”

Posted 2023-02-22

【中文标题】TypeError：无法在 setUpControl 上的字符串“[e-mail]”上创建属性“验证器”

【英文标题】：TypeError: Cannot create property 'validator' on string '[e-mail]' at setUpControl

【发布时间】：2017-09-22 01:07:57

【问题描述】：

我在formGroup 中遇到问题。首先基于 URL，我获取一些值并调用 API 以检索特定用户数据以获取预字段文本。

注册.html

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
    <div class="form-group row">
        <label for="inputEmail3" class="col-sm-4 ">Username</label>
        <div class="col-sm-8">
            <input [formControl]="email" type="text" class="form-control" id="inputEmail3" placeholder="Email Address" [readonly]="isReadOnly">
        </div>
    </div>
</form>

register.component.ts

import  Component  from '@angular/core';
import  FormGroup, AbstractControl, FormBuilder, Validators  from '@angular/forms';
import  Router, ActivatedRoute  from '@angular/router';
import  EmailValidator, EqualPasswordsValidator  from '../../theme/validators';

@Component(
  selector: 'register',
  templateUrl: './register.html',
)
export class Register 
  public form: FormGroup;
  public email: AbstractControl;
  public username: string;

  constructor(private registerService: RegisterService, fb: FormBuilder, private router: Router, private route: ActivatedRoute) 
    this.form = fb.group(
      'email': ['', Validators.compose([Validators.required])]
      .... etc..
    );

    this.email = this.form.controls['email'];

    this.registerService.getUser( userId: "asdasd2123da2das" ).subscribe(posts => 
      if (posts) 
          var userObj = posts.json();
          console.log("userObj : ", userObj.data);
          if (userObj.data && userObj.data[0].email) 
            this.email = this.username = userObj.data[0].email;  // ouput : [e-mail]
            this.isReadOnly = true;
            this.router.navigateByUrl('/register');
           else 
            alert("You are Not Autorize to access this Page");
            this.router.navigateByUrl('/login');
          
        
    );

  

错误详情：

TypeError: Cannot create property 'validator' on string '[e-mail]'
    at setUpControl (http://localhost:3004/vendor.dll.js:9739:23)
    at FormControlDirective.ngOnChanges (http://localhost:3004/vendor.dll.js:44196:89)
    at Wrapper_FormControlDirective.ngDoCheck (/ReactiveFormsModule/FormControlDirective/wrapper.ngfactory.js:50:18)

【问题讨论】：

没有在模块的提供者中声明我的服务导致了同样的错误。

【参考方案1】：

我在下面的标记中错过了 formGroup 中的方括号

<form formGroup="form">
</form>

它会抛出与

类似的错误

错误类型错误：无法在字符串“表单”上创建属性“验证器”

一旦在formGroup中添加方括号（见下文），错误就消失了

<form [formGroup]="form">....</form>

【参考方案2】：

有关每种表单的完整信息，请参阅https://angular.io/guide/forms-overview 网站上的反应式表单和模板驱动表单。您缺少对表单控件进行分组和在模板中注册控件的实际语法。两者在不同的情况下都有效

<input type="text" [formControl]="name">
<input type="text" formControlName="firstName">

【参考方案3】：

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-4 ">Username</label>
            <div class="col-sm-8">
                <input formControlName="email" type="text" class="form-control" id="inputEmail3" placeholder="Email Address" [readonly]="isReadOnly">
            </div>
        </div>
</form>

请尝试将[formControl] 更改为formControlName。

要将输出设置为输入字段，请执行以下操作，将行指向this.form.patchValue

import  Component  from '@angular/core';
import  FormGroup, AbstractControl, FormBuilder, Validators  from '@angular/forms';
import  Router, ActivatedRoute  from '@angular/router';
import  EmailValidator, EqualPasswordsValidator  from '../../theme/validators';

@Component(
  selector: 'register',
  templateUrl: './register.html',
)
export class Register 
  public form: FormGroup;
  public email: AbstractControl;
  public username: string;

  constructor(private registerService: RegisterService, fb: FormBuilder, private router: Router, private route: ActivatedRoute) 
    this.form = fb.group(
      'email': ['', Validators.compose([Validators.required])]
      .... etc..
    );

    this.email = this.form.controls['email'];

    this.registerService.getUser( userId: "asdasd2123da2das" ).subscribe(posts => 
      if (posts) 
          var userObj = posts.json();
          console.log("userObj : ", userObj.data);
          if (userObj.data && userObj.data[0].email) 
            this.email = this.username = userObj.data[0].email;  // ouput : [e-mail]
            this.form.patchValue(
                email : this.email
             );

            this.isReadOnly = true;
            this.router.navigateByUrl('/register');
           else 
            alert("You are Not Autorize to access this Page");
            this.router.navigateByUrl('/login');
          
        
    );

【讨论】：

@higunjan 请参考答案***.com/questions/40171914/…

是的，但this.email = this.username = userObj.data[0].email 我得到了价值，但它没有在电子邮件字段中设置。

实际上你想将输出设置为输入字段。对吗？

是的，对 <input formControlName="email" [(ngModel)]="email" type="text" class="form-control" id="inputEmail3" placeholder="Email Address" [readonly]="isReadOnly"> 我可以使用 `[(ngModel)] = "email" 吗？这是工作，但他们有任何副作用

最好不要将 ngModel 与 formControlName 一起使用，因为一个是模板驱动的，另一个是模型驱动的