首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >无法绑定到'formGroup‘,因为它不是ionic中'form’的已知属性

无法绑定到'formGroup‘,因为它不是ionic中'form’的已知属性
EN

Stack Overflow用户
提问于 2021-03-07 23:39:13
回答 1查看 60关注 0票数 1

我试着用Ionic (使用angular框架)做一个简单的登录,但是我得到了这个错误,我不知道如何解决它

代码语言:javascript
运行
复制
   Can't bind to 'formGroup' since it isn't a known property of 'form'

我搜索了所有人,当他们添加ReactiveFormsModule时,错误消失了,但当我添加它时,错误仍然存在

这里是HTML

代码语言:javascript
运行
复制
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet">

<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <div class="black-circle"></div>
    <ion-title class="ion-text-center custom-font">Se Connecter</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <svg class="back-bolb" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path fill="#CCCCCC" d="M65,-20C70,-5.6,50.1,18,26.8,34.3C3.5,50.7,-23.3,59.7,-41.2,48.6C-59.1,37.5,-68.2,6.2,-59.9,-12.8C-51.5,-31.7,-25.8,-38.3,2.1,-39C30,-39.7,59.9,-34.4,65,-20Z" transform="translate(100 100)" />
  </svg>

  <div class="ion-padding">

    <form class="ion-no-padding" [formGroup]="todo" (ngSubmit)="logForm()">
       <div class="wrap-input">
         <input class="input" type="text"  placeholder="Numero de matricule">
       </div>
       <div class="wrap-input">
        <input class="input" type="password"  placeholder="Le Mot de passe">
       </div>
       <div class ="container-form-btn">
        <button class="form-btn custom-font">
          Soumettre
        </button>
       </div>
    </form>

  </div>
</ion-content>

the app.module.ts

代码语言:javascript
运行
复制
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,FormsModule,ReactiveFormsModule, IonicModule.forRoot(), AppRoutingModule],

providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
  exports: [FormsModule,ReactiveFormsModule,CommonModule]
})
export class AppModule {}

the controller.ts

代码语言:javascript
运行
复制
import { Component } from '@angular/core';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
   todo : FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.todo = this.formBuilder.group({
      employeeN: ['', Validators.required],
      password: [''],
    });
  }

  logForm(){
    console.log(this.todo.value)
  }

}

我错过了什么吗?请帮帮我,我正在处理这个错误

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-07 23:58:42

如果主页有自己的模块,你需要在那里导入,否则你需要在app模块的声明中添加HomePage组件。

这实际上是一个与Angular 9 - Can't bind to 'formGroup' since it isn't a known property of 'form'重复的问题

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66518251

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档