TypeError: Cannot create property 'validator' on string '[email protected]' at setUpControl
Solution 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>
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 : [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');
}
}
});
Solution 2
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>
Solution 3
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">
Gunjan Patel
Technical Skill, Node.JS | Vue.js | React.js | Angular | Mongo/MySQL | AWS | WebRTC | Socket.io | Javascript | Nuxt.js | jQuery | HTML & CSS | Blockchain(Hyperledger Fabric) Ideally be able to manage the entire software development life cycle, from start to finish. You can email on [email protected] for any help. Thank you for looking at the profile.
Updated on April 14, 2020Comments
-
Gunjan Patel about 4 years
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 : [email protected] 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 '[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)