类型错误:无法在 setUpControl 的字符串 '[e-mail]' 上创建属性 'validator' [英] TypeError: Cannot create property 'validator' on string '[e-mail]' at setUpControl

问题描述

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

注册.html

<div class="form-group row"><label for="inputEmail3" class="col-sm-4 ">用户名</label><div class="col-sm-8"><input [formControl]="email" type="text" class="form-control" id="inputEmail3" placeholder="Email Address" [readonly]="isReadOnly">

</表单>

register.component.ts

import { Component } from '@angular/core';从@angular/forms"导入 { FormGroup, AbstractControl, FormBuilder, Validators };从@angular/router"导入{路由器，激活路由}；import { EmailValidator, EqualPasswordsValidator } from '../../theme/validators';@成分({选择器:'注册'，templateUrl: './register.html',})出口类注册{公共表单:FormGroup；公共邮箱:AbstractControl；公共用户名:字符串；构造函数(私有 registerService:RegisterService，fb:FormBuilder，私有路由器:路由器，私有路由:ActivatedRoute){this.form = fb.group({'email': ['', Validators.compose([Validators.required])].... 等等..});this.email = this.form.controls['email'];this.registerService.getUser({ userId: "asdasd2123da2das" }).subscribe(posts => {如果(帖子){var userObj = posts.json();console.log("userObj : ", userObj.data);如果(userObj.data && userObj.data[0].email){this.email = this.username = userObj.data[0].email;//输出:[e-mail] = true;this.router.navigateByUrl('/register');} 别的 {alert("您没有自动授权访问此页面");this.router.navigateByUrl('/登录');}}});}}

错误详情:

TypeError:无法在字符串 '[e-mail]' 上创建属性 'validator'在 setUpControl (http://localhost:3004/vendor.dll.js:9739:23)在 FormControlDirective.ngOnChanges (http://localhost:3004/vendor.dll.js:44196:89)在 Wrapper_FormControlDirective.ngDoCheck (/ReactiveFormsModule/FormControlDirective/wrapper.ngfactory.js:50:18)

解决方案

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

</表单>

请尝试像这样将 [formControl] 更改为 formControlName.

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

import { Component } from '@angular/core';从@angular/forms"导入 { FormGroup, AbstractControl, FormBuilder, Validators };从@angular/router"导入{路由器，激活路由}；import { EmailValidator, EqualPasswordsValidator } from '../../theme/validators';@成分({选择器:'注册'，templateUrl: './register.html',})出口类注册{公共表单:FormGroup；公共邮箱:AbstractControl；公共用户名:字符串；构造函数(私有 registerService:RegisterService，fb:FormBuilder，私有路由器:路由器，私有路由:ActivatedRoute){this.form = fb.group({'email': ['', Validators.compose([Validators.required])].... 等等..});this.email = this.form.controls['email'];this.registerService.getUser({ userId: "asdasd2123da2das" }).subscribe(posts => {如果(帖子){var userObj = posts.json();console.log("userObj : ", userObj.data);如果(userObj.data && userObj.data[0].email){this.email = this.username = userObj.data[0].email;//输出:[e-mail]({电子邮件:this.email});this.isReadOnly = true;this.router.navigateByUrl('/register');} 别的 {alert("您没有自动授权访问此页面");this.router.navigateByUrl('/登录');}}});

I face issue in formGroup. First Based on URL I take some value and call to API for retrieve particular user-data for pre-field text.

register.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');
          }
        }
    });

  }
}

Error Details :

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)

解决方案

<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>

please try like this change [formControl] to formControlName.

And to set the output to the input field please do the following, point the line 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');
          }
        }
    });

这篇关于类型错误:无法在 setUpControl 的字符串 '[e-mail]' 上创建属性 'validator'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！