无法绑定到“formGroup”，因为它不是 Angular 8 中“form”的已知属性答案

【问题标题】：Can't bind to 'formGroup' since it isn't a known property of 'form' in Angular 8无法绑定到“formGroup”，因为它不是 Angular 8 中“form”的已知属性
【发布时间】：2021-05-30 15:29:23
【问题描述】：

无法解决无法绑定到 formGroup，因为它不是表单的已知属性。

我已经尝试了所有的解决方案已经添加ReactiveFormsModule , FormsModule 也试过[formGroup] 和[FormGroup] 仍然得到同样的错误

import { ReactiveFormsModule , FormsModule } from '@angular/forms';

 imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
  ]

我的表格

<form [formGroup]="addPostForm" (ngSubmit)="addNewPost()">
     <ion-item>
          <ion-label class="grey" position="stacked">Caption </ion-label>
          <ion-input type="text" formControlName="caption"></ion-input>
     </ion-item>
     <ion-button expand="block" type="submit" shape="round">Save</ion-button>
</form>

add-post.page.ts

import { Component, OnInit } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { ApiService } from '../services/api.service';
import { Router } from "@angular/router"
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';


@Component({
  selector: 'app-add-post',
  templateUrl: './add-post.page.html',
  styleUrls: ['./add-post.page.scss'],
})
export class AddPostPage implements OnInit {

    addPostForm: FormGroup;
    picture = null;
    submitted = false;
    success = false;

    constructor(
        private api: ApiService,
        private FormBuilder: FormBuilder,
        private router: Router,
    ) {
        this.addPostForm = this.FormBuilder.group({
            caption: ['']
        });
    }

Error

【问题讨论】：

可以分享一下你的component.ts文件代码吗？
您的组件也在另一个模块中吗？
更新了我的问题，是的，这是一个不同的页面。
参考此链接stackoverflow.com/questions/39152071/…
也可以试试这个链接，也许会有所帮助 -> stackblitz

标签： angular typescript ionic4 angular8

【解决方案1】：

您需要在 app.component.ts 文件中设置表单。请参考下面的代码，

import { Component } from '@angular/core';
import { AuthenticationService } from './services/authentication.service';
import { Router } from '@angular/router';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  navigate : any;
  //Need to define addPostForm here.
  addPostForm = new FormGroup({
    caption: new FormControl('')
  });
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private authenticationService: AuthenticationService,
    private router: Router
  ) {
    this.sideMenu();
    this.initializeApp();
  }

如需更多参考，请参阅 this angular 文档以了解反应形式。

注意：如果您的组件是在另一个模块中导入的，那么在另一个模块中您需要在该模块中导入 ReactiveFormsModule。

【讨论】：

对不起，我共享了 app.component.ts 我已经在 add-post.page.ts 中声明了表单
好的，没问题。现在你能告诉我你是否使用过任何模块。这意味着您的组件是在 app.module.ts 或任何其他模块中定义的？
感谢我没有在我的 add-post.module.ts 中导入 ReactiveFormsModule 所需的帮助。
不客气，我的答案已更改，如果您的问题已解决，请标记为正确。

【解决方案2】：

在您的component.ts文件（上面的表单代码在HTML页面中有它的component.ts文件）中，请启动表单

类似这样的：

addPostForm: FormGroup = new FormGroup({
  caption: new FormControl('', [Validators.required]) // If validators are required, otherwise you can remove the [Validators.required] part.
});

【讨论】：

我在添加我已经声明我的表单的 component.ts 文件时出错了。