TypeError：无法在setUpControl的字符串“ [email protected]”上创建属性“ validator”

Gunjan Patel：

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

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

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 : [email protected]
            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 '[email protected]'
    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)

sainu：

<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 : [email protected]
            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');
          }
        }
    });

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。