错误：formGroup 需要一个 FormGroup 实例。请传入一个。 - Angular 10 错误

Question

我遇到了错误问题：错误：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`);
  }

你知道如何解决这个问题吗？谢谢

Answer 1

您的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
    });
 });
}