Angular 错误：formGroup需要一个formGroup实例。请递一张角度10误差

我遇到错误：错误：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>

model.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);
    });
  }

export class Captcha {
  handle: string;
  imgCaptcha: string;
  token: string;
}

postCaptcha(token: Captcha) {
    return this.http.post(environment.ApiUrl + `/api/url`, token, {responseType: 'text'});
  }

getCaptcha() {
    return this.http.get<any>(environment.ApiUrl + `/api/urlCaptcha`);
  }

验证码服务.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);
    });
  }

export class Captcha {
  handle: string;
  imgCaptcha: string;
  token: string;
}

postCaptcha(token: Captcha) {
    return this.http.post(environment.ApiUrl + `/api/url`, token, {responseType: 'text'});
  }

getCaptcha() {
    return this.http.get<any>(environment.ApiUrl + `/api/urlCaptcha`);
  }

postaptcha（令牌：验证码）{
返回此.http.post（environment.ApiUrl+`/api/url`，标记，{responseType:'text'}）；
}
getCaptcha（）{
返回此.http.get（environment.ApiUrl+`/api/urlCaptcha`）；
}

---

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

您的

表单组

在使用时没有初始化。因此，请将其从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
    });
 });
}

---

您必须导入

ReactiveFormsModule

您已经导入的

FormsModule

我已经在模块中导入了它们。您的代码正在处理stackblitz（我没有包含材料）。尝试一个接一个地删除一些formControl，然后进行测试。我从

ngOnInit

中删除了此代码，并在

captchaData:Captcha之后重新定位了此代码和此错误已解决，但现在我有另一个错误：
TypeError:无法读取未定义的属性“handle”
。。。这一行
句柄有点不好：新表单控件（this.captchaData.handle），
？从另一个api响应中，我得到
句柄
数据，我需要插入此
句柄
数据以进行输入。编辑我的应答单击提交后，我得到响应500，
token
看起来很好，因为它正在发送数据，但是
handle
发送空数据时不会从
captchaData插入数据。handle
现在检查，提交后检查，为什么要再次将值设置为
captcha
数据