Angular/IONIC 表单组未应用于模板输入

Question

我用 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>

Answer 1

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

还有 public

私有的“loginForm”

Answer 2

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

Angular/IONIC 表单组未应用于模板输入

Angular/IONIC Formgroup does not get applied to template inputs

forms

data-binding

ionic-framework

angular