javascript - 类型错误 : Cannot create property 'validator' on string 'abc@gmail.com' at setUpControl

Question

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

注册.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 : abc@gmail.com
            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 'abc@gmail.com'
    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)

Answer 1

<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 : abc@gmail.com
            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');
          }
        }
    });