[英]Cannot create property '_canInitEmulator' on string 'namangarg802@gmail.com'
[英]TypeError: Cannot create property 'validator' on string 'abc@gmail.com' at setUpControl
我在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)
<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');
}
}
});
我在标记中错过了 formGroup 中的方括号,如下所示
<form formGroup="form">
</form>
它抛出类似的错误
错误类型错误:无法在字符串“表单”上创建属性“验证器”
一旦在 formGroup 中添加了方括号(见下文),错误就消失了
<form [formGroup]="form">....</form>
有关每种表单的完整信息,请参阅https://angular.io/guide/forms-overview网站上的 Reactive Forms 和 Template-driven Forms。 您缺少分组表单控件和在模板中注册控件的实际语法。两者在不同情况下均有效
<input type="text" [formControl]="name">
<input type="text" formControlName="firstName">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.