typescript 错误:formGroup需要一个FormGroup示例,请传入一个示例,React形式Angular

gupuwyp2  于 2023-01-18  发布在  TypeScript
关注(0)|答案(2)|浏览(161)

我在Angular 版本10中使用了React形式。但是得到了以下错误。

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

       Example:

       
    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });
    at Function.missingFormException (forms.js:1700:1)
    at FormGroupDirective._checkFormPresent (forms.js:5632:1)
    at FormGroupDirective.ngOnChanges (forms.js:5454:1)
    at FormGroupDirective.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2373:1)
    at callHook (core.js:3285:1)
    at callHooks (core.js:3251:1)
    at executeInitAndCheckHooks (core.js:3203:1)
    at selectIndexInternal (core.js:6324:1)
    at ɵɵadvance (core.js:6306:1)
    at PatientInformationComponent_Template (template.html:39:34)

我的示例HTML代码如下所示。

<div [formGroup]="MyForm">
      <input formControlName="firstName">
      <input formControlName="lastName">
</div>

我的TS代码:

export class MyComponent implements OnInit{
   MyForm: FormGroup;

   constructor( private formbuilder: FormBuilder) {}

   ngOnInit() {
       this.MyForm= this.formbuilder.group({
        firstName: new FormControl("", Validators.maxLength(100)),
        lastName: new FormControl("",Validators.maxLength(100)),
    });
   }

}

虽然表单工作正常,但是错误总是显示在控制台上。我想这可能是因为一些其他的生命周期钩子。你能给予我一些解决这个问题的方法吗?

wqsoz72f

wqsoz72f1#

由于您尚未在.ts代码中初始化名为myForm的表单,因此您应该尝试添加*ngIf并将div HTML标记更改为form元素。

<form *ngIf="form" 
     [formGroup]="MyForm">
        <input formControlName="firstName">
        <input formControlName="lastName">
</form>
wz8daaqr

wz8daaqr2#

我也有同样的问题,对我来说是
我在component.ts中声明了窗体

form: FormGroup = this._fb.group({})

在component.html中我使用了

<form [formGroup]="studentForm" (ngSubmit)="onSubmit()">

我在每个地方用不同的名字
我必须在component.html和component.ts中使用相同的表单名称

相关问题