TypeError:'Upcdgreg 'dizesinde' validator 'özelliği setUpControl

Question

adresinde oluşturulamıyor formGroup'da sorun yaşıyorum. İlk olarak URL'ye dayanarak bir değer alır ve alan öncesi metin için belirli kullanıcı verilerini almak için API'ye çağrı yaparım.

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 : abc@gmail.com 
      this.isReadOnly = true; 
      this.router.navigateByUrl('/register'); 
      } else { 
      alert("You are Not Autorize to access this Page"); 
      this.router.navigateByUrl('/login'); 
      } 
     } 
    }); 

    } 
} 

Hata ayrıntıları:

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> 

formControlName bu değişikliğin [formControl] gibi deneyin.

Ve lütfen aşağıdakileri girişi alanına çıkışını ayarlamak için, çizgi 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'); 
      } 
     } 
    });