Angular/IONIC Formgroup 不适用于模板输入答案

【问题标题】：Angular/IONIC Formgroup does not get applied to template inputsAngular/IONIC Formgroup 不适用于模板输入
【发布时间】：2021-12-06 14:15:03
【问题描述】：

我用 Angular 创建了一个 Ionic 项目，并制作了一个带有电子邮件和密码的小型登录表单。因此，我使用 Angular 的 FormGroup 和 Formbuilder 作为 Ionic 的官方文档描述它：https://ionicframework.com/docs/v3/developer-resources/forms/

我给电子邮件输入一个默认值以查看它是否正常工作，并且只要表单无效（验证器需要这两个字段），登录按钮也会被禁用。但是输入与我的表单状态不匹配，状态始终保持与初始化时相同，并且表单永远不会生效。

在控制台中输出 formGroup 值（当然是在写入输入字段后创建）：

希望这里有人有一个想法，它可能是什么。谢谢。

我的代码：

export class LoginComponent {
  private loginForm: FormGroup;

  constructor(
    private authService: AuthService,
    private formBuilder: FormBuilder
  ) {
    this.loginForm = this.formBuilder.group({
      mail: ['buildermail@form.com', Validators.required],
      pass: ['', Validators.required],
    });
  }

  login() {
    console.log(this.loginForm.value); // Output: 'buildermail@form.com', null -> doesn't matter what's in the actual inputs
  }
}

<ion-card-content class="content__card-content">
  <form [formGroup]="loginForm" (ngSubmit)="login()">
    <ion-item class="content__card-content__username">
      <ion-label position="floating">E-Mail</ion-label>
      <ion-input
        formControlName="mail"
        type="email"
        [required]="true"
      ></ion-input>
    </ion-item>
    <ion-item class="content__card-content__password">
      <ion-label position="floating">Password</ion-label>
      <ion-input
        formControlName="pass"
        type="password"
        [required]="true"
      ></ion-input>
    </ion-item>
    <ion-button type="submit" [disabled]="!loginForm.valid">Login</ion-button>
  </form>
</ion-card-content>

【问题讨论】：

标签： angular forms ionic-framework data-binding

【解决方案1】：

在 html 文件中将 formControlName="password" 更改为 formControlName="pass"

也是public私有的“loginForm”

【讨论】：

你是对的，这是我这边的一个错字......但不幸的是问题仍然相同
请查看此链接“github.com/ravi-ashara/Ionic4-with-firebase/tree/master/src/app/…”希望对您有所帮助
我更新我的答案请检查
感谢您的帮助，但我仍然无法发现它为什么不工作的区别......加载应用程序时也没有控制台错误/消息
看起来 [formGroup] 和 (ngSubmit) 对表单没有任何作用？这怎么可能？

【解决方案2】：

已解决：由于未正确提供表单组，因此未应用该表单组。我需要在声明组件的模块中导入“ReactiveFormsModule”和“FormsModule”。然后我还需要将此模块导入我的 app.module.ts - Ionic 没有通过编译在此处显示错误，通过使用 angular 本身进行编译，它抛出了一个错误，即它没有正确提供。

【讨论】：