无法绑定到 'formGroup',因为它不是 Angular 中 'form' 的已知 属性 8
Can't bind to 'formGroup' since it isn't a known property of 'form' in Angular 8
无法解决无法绑定到 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>
添加-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 文件中(上面的表单代码在 HTML 页面中包含的 component.ts 文件),请启动表单
像这样:
addPostForm: FormGroup = new FormGroup({
caption: new FormControl('', [Validators.required]) // If validators are required, otherwise you can remove the [Validators.required] part.
});
您需要在 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。
无法解决无法绑定到 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>
添加-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 文件中(上面的表单代码在 HTML 页面中包含的 component.ts 文件),请启动表单
像这样:
addPostForm: FormGroup = new FormGroup({
caption: new FormControl('', [Validators.required]) // If validators are required, otherwise you can remove the [Validators.required] part.
});
您需要在 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。