TypeError: Cannot create property 'validator' on string 'abc@gmail.com' at setUpControl TypeError: Cannot create property 'validator' on string 'abc@gmail.com' at setUpControl javascript javascript

TypeError: Cannot create property 'validator' on string 'abc@gmail.com' at setUpControl


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


I missed the square brackets in formGroup in markup as below

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

and it throws similar error as

ERROR TypeError: Cannot create property 'validator' on string 'form'

Once the square brackets added in formGroup (see below), the error disappears

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


For complete information about each kind of form, see Reactive Forms and Template-driven Forms from the https://angular.io/guide/forms-overview website. you are missing actual syntax for Grouping form controls and Registering the control in the template.both are valid in different case

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