Error: formGroup expects a FormGroup instance. Please pass one in. - Angular 10 Error
Error: formGroup expects a FormGroup instance. Please pass one in. - Angular 10 Error
我遇到错误问题:错误:formGroup 需要一个 FormGroup 实例。请传递一个。由于这个错误,我有一个并行的其他错误:无法读取未定义的 属性 'get'。我尝试解决了这个错误,但仍然没有结果
我的代码:
component.html
<form [formGroup]="captchaForm" (submit)="submit()" class="form">
<mat-form-field appearance="fill" class="form-group">
<mat-label>Site Code</mat-label>
<input
matInput
id="handle"
type="text"
formControlName="handle"
autofocus required
>
</mat-form-field>
<mat-form-field appearance="fill" class="form-group">
<mat-label>Code from image</mat-label>
<input
matInput
id="token"
type="text"
formControlName="token"
autofocus required
>
</mat-form-field>
<button mat-raised-button class="form-button" color="primary" type="submit">Submit</button>
</form>
component.ts
captchaForm: FormGroup;
captchaData: Captcha;
dataDisplay = false;
constructor(
public formBuilder: FormBuilder,
private captchaService: CaptchaService,
){}
ngOnInit(): void {
this.getCaptcha();
this.captchaForm = new FormGroup({
token: new FormControl(),
handle: new FormControl(this.captchaData.handle),
});
}
submit() {
this.captchaService.postCaptcha(this.captchaForm.value)
.subscribe( (response: any) => {
this.captchaData = response;
});
}
public getCaptcha() {
this.captchaService.getCaptcha().subscribe(response => {
this.captchaData = response;
this.dataDisplay = true;
console.log(response);
});
}
model.ts
export class Captcha {
handle: string;
imgCaptcha: string;
token: string;
}
captcha.service.ts
postCaptcha(token: Captcha) {
return this.http.post(environment.ApiUrl + `/api/url`, token, {responseType: 'text'});
}
getCaptcha() {
return this.http.get<any>(environment.ApiUrl + `/api/urlCaptcha`);
}
你知道怎么解决吗?谢谢
您的 FormGroup
在您使用时尚未初始化。所以从 ngOnInit
中删除它
captchaData: Captcha;
captchaForm: FormGroup = new FormGroup({
token: new FormControl(),
handle: new FormControl()
});
使用 patchValue
更新您的表单值:
public getCaptcha() {
this.captchaService.getCaptcha().subscribe(response => {
this.captchaData = response;
this.dataDisplay = true;
console.log(response);
this.captchaForm.patchValue({
handle: this.captchaData.handle
});
});
}
我遇到错误问题:错误:formGroup 需要一个 FormGroup 实例。请传递一个。由于这个错误,我有一个并行的其他错误:无法读取未定义的 属性 'get'。我尝试解决了这个错误,但仍然没有结果
我的代码:
component.html
<form [formGroup]="captchaForm" (submit)="submit()" class="form">
<mat-form-field appearance="fill" class="form-group">
<mat-label>Site Code</mat-label>
<input
matInput
id="handle"
type="text"
formControlName="handle"
autofocus required
>
</mat-form-field>
<mat-form-field appearance="fill" class="form-group">
<mat-label>Code from image</mat-label>
<input
matInput
id="token"
type="text"
formControlName="token"
autofocus required
>
</mat-form-field>
<button mat-raised-button class="form-button" color="primary" type="submit">Submit</button>
</form>
component.ts
captchaForm: FormGroup;
captchaData: Captcha;
dataDisplay = false;
constructor(
public formBuilder: FormBuilder,
private captchaService: CaptchaService,
){}
ngOnInit(): void {
this.getCaptcha();
this.captchaForm = new FormGroup({
token: new FormControl(),
handle: new FormControl(this.captchaData.handle),
});
}
submit() {
this.captchaService.postCaptcha(this.captchaForm.value)
.subscribe( (response: any) => {
this.captchaData = response;
});
}
public getCaptcha() {
this.captchaService.getCaptcha().subscribe(response => {
this.captchaData = response;
this.dataDisplay = true;
console.log(response);
});
}
model.ts
export class Captcha {
handle: string;
imgCaptcha: string;
token: string;
}
captcha.service.ts
postCaptcha(token: Captcha) {
return this.http.post(environment.ApiUrl + `/api/url`, token, {responseType: 'text'});
}
getCaptcha() {
return this.http.get<any>(environment.ApiUrl + `/api/urlCaptcha`);
}
你知道怎么解决吗?谢谢
您的 FormGroup
在您使用时尚未初始化。所以从 ngOnInit
captchaData: Captcha;
captchaForm: FormGroup = new FormGroup({
token: new FormControl(),
handle: new FormControl()
});
使用 patchValue
更新您的表单值:
public getCaptcha() {
this.captchaService.getCaptcha().subscribe(response => {
this.captchaData = response;
this.dataDisplay = true;
console.log(response);
this.captchaForm.patchValue({
handle: this.captchaData.handle
});
});
}