Angular项目报错：无法绑定formGroup到amplify-authenticator

我在登录表单中遇到如下错误：

Can't bind to 'formGroup' since it isn't a known property of 'amplify-authenticator'

请问我是否遗漏了某些配置？以下是我的相关代码：

Auth组件 #

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit, NgZone } from '@angular/core';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss']
})

export class AuthComponent {
  public loginForm: FormGroup;

  constructor(private formBuilder: FormBuilder ) {
    this.loginForm = formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required],
    });
  }
}

HTML模板 #

<amplify-authenticator [formGroup]="loginForm" >
</amplify-authenticator>

AppModule配置 #

这是我已添加Amplify Authenticator的AppModule代码，我已导入相关依赖，但仍报错，请告知我是否遗漏了内容：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';
import { NotFoundComponent } from './not-found/not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AmplifyAuthenticatorModule,
    FormsModule,
    ReactiveFormsModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      registrationStrategy: 'registerWhenStable:30000'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

解决方案 #

核心问题是：amplify-authenticator组件本身并不支持formGroup输入属性，你不能直接将Angular的响应式表单绑定到该组件上。Amplify UI Angular的Authenticator有自己内置的表单处理逻辑，无需手动传入外部FormGroup。

修改步骤： #

1. 移除模板中的formGroup绑定
   简化HTML模板，去掉[formGroup]="loginForm"：

   <amplify-authenticator>
   </amplify-authenticator>
   

2. 移除组件中不必要的表单代码
   删除Auth组件里的loginForm、FormBuilder相关代码：

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-auth',
     templateUrl: './auth.component.html',
     styleUrls: ['./auth.component.scss']
   })
   export class AuthComponent {
     // 无需手动创建FormGroup
   }
   

3. 自定义表单（可选）
   如果需要自定义表单字段或验证逻辑，使用Amplify提供的插槽（slot）功能，比如自定义登录表单：

   <amplify-authenticator>
     <ng-template amplifySlot="sign-in" let-form="form" let-onSubmit="onSubmit">
       <amplify-form-section>
         <amplify-form-field label="邮箱" type="email" required>
           <input
             type="email"
             formControlName="username"
             placeholder="请输入邮箱"
           />
         </amplify-form-field>
         <amplify-form-field label="密码" type="password" required>
           <input
             type="password"
             formControlName="password"
             placeholder="请输入密码"
           />
         </amplify-form-field>
         <button (click)="onSubmit(form)" type="submit">登录</button>
       </amplify-form-section>
     </ng-template>
   </amplify-authenticator>
   

4. 确认模块导入正确
   你的AppModule已经正确导入了AmplifyAuthenticatorModule、FormsModule和ReactiveFormsModule，这部分无需修改。

内容的提问来源于stack exchange，提问作者Cristal