Angular [formGroup] 阻止滚动

Question

我正在使用 ionic 5/angular 构建一个应用程序并准备登录视图，但在使用属性 [formGroup] 时我在表单中遇到了一个问题，它阻止了屏幕滚动我找不到解决这种情况的方法。

我的登录屏幕：

<form [formGroup]="formulario" (ngSubmit)="efetuarLogin()">
  <ion-grid>
    <ion-row>
      <ion-col size="12" style="text-align: center;">
        <h2 style="font-family: 'EurostileBold';font-size: 1.6rem;">LOGIN</h2>
      </ion-col>
      <ion-col size="12">
        <ion-item>
          <ion-input style="font-size: 1.3rem; font-family: 'EurostileBold';" type="text"
            placeholder="Usuário / E-mail / CPF" formControlName="username"></ion-input>
        </ion-item>
        <msg-erro [formGroup]="formulario" campo="username"></msg-erro>
      </ion-col>
      <ion-col size="12" style="margin-top: 10px;">
        <ion-item>
          <app-show-hide-password>
            <ion-input style="font-size: 1.3rem; font-family: 'EurostileBold';" type="password" placeholder="Senha"
              formControlName="senha"></ion-input>
          </app-show-hide-password>
        </ion-item>
        <msg-erro [formGroup]="formulario" campo="senha"></msg-erro>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="6">
        <ion-button expand="full" fill="clear" style="font-family: 'EurostileBold';">
          Esqueceu a senha?
        </ion-button>
      </ion-col>
      <ion-col size="6">
        <ion-button color="success" type="submit" style="font-family: 'EurostileBold'; font-size: 1.2rem;" expand="full" [disabled]="formulario.invalid">Entrar</ion-button>
      </ion-col>
      <ion-col size="12" style="text-align: center; font-size: 1.4rem; margin-top: 5px;">
        <ion-button expand="full" fill="clear" style="font-family: 'EurostileBold'; color: green; font-size: 1.2rem;">
          Criar minha conta
        </ion-button>
      </ion-col>
      <ion-col size="5" style="border-top: 1px solid #a2a2a280; margin-top: 13px;"></ion-col>
      <ion-col size="2" style="color: #a2a2a280; text-align: center; font-size: 1.2rem; font-family: 'EurostileBold';">
        OU
      </ion-col>
      <ion-col size="5" style="border-top: 1px solid #a2a2a280; margin-top: 13px;"></ion-col>
      <ion-col size="12" style="margin-top: 10px;">
        <ion-button expand="block" color="danger" style="height: 45px; font-family: 'EurostileBold';">
          <ion-grid>
            <ion-row>
            <ion-col size="3"><ion-icon style="font-size: 32px;" name="logo-google"></ion-icon></ion-col>
            <ion-col size="9" style="padding: 15px 0 0px 0px; text-align: left;"><ion-label style="font-family: 'EurostileBold'; font-size: 1.2rem;">Login com o Google</ion-label></ion-col>
          </ion-row>
          </ion-grid>          
        </ion-button>
      </ion-col>
      <ion-col size="12">
        <ion-button expand="block" color="secondary" style="height: 45px; font-family: 'EurostileBold';">
          <ion-grid>
            <ion-row>
            <ion-col size="3"><ion-icon style="font-size: 32px;" name="logo-facebook"></ion-icon></ion-col>
            <ion-col size="9" style="padding: 15px 0 0px 0px; text-align: left;"><ion-label style="font-family: 'EurostileBold'; font-size: 1.2rem;">Login com o Facebook</ion-label></ion-col>
          </ion-row>
          </ion-grid>          
        </ion-button>
      </ion-col>
      <ion-col size="12">
        <ion-button expand="block" color="light" style="height: 45px; font-family: 'EurostileBold';">
          <ion-grid>
            <ion-row>
            <ion-col size="3"><ion-icon style="font-size: 32px;" name="arrow-back-outline"></ion-icon></ion-col>
            <ion-col size="9" (click)="cancelar()" style="padding: 15px 0 0px 70px; text-align: left;"><ion-label style="font-family: 'EurostileBold'; font-size: 1.2rem;">Voltar</ion-label></ion-col>
          </ion-row>
          </ion-grid>          
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>

验证和登录工作正常，没有发现问题，但由于表单中定义的属性 [formGroup]，我无法滚动视图。

如果我删除属性，它将正常滚动

如果在构造函数的 ts 中正确完成，则 formGroup 对象的初始化：

  formulario: FormGroup = null;

  constructor(
    private _formService: _FormService,
    private _restService: _RestService,
    private _navController: NavController,
  ) {
    this.formulario = this._formService.criar(new Login());
  }  

// _FormService criar function
criar(entidade: Login) {
    entidade = entidade ? entidade : new Login();
    let result = this._fb.group({
      username: [entidade.username, [Validators.required]],
      senha: [entidade.senha, [Validators.required]],
    });
    return result;
  }

到目前为止，我已经在 Whosebug 中看到了多个线程，但是 none 用这个属性说明了滚动本身的问题，尽管 ionic 中的内容不滚动有很多问题，我试图实施以检查它是否能解决上述情况，但没有成功。

Content not scrolling in ionic

在生成的 HTML 中，我发现当使用 formGroup 时，表单有这个属性，ng-reflect-form="[object Object]"，我认为它可以是问题（我仍然认为它是一个问题）但即使在手动删除它进行检查后也不足以防止滚动。

我在这个 formGroup 上做错了什么？

Answer 1

好的，最后我试图避免的冗余是问题的解决方案。

场景

似乎当我们使用具有绑定到 class 的表单的结构时，它会阻止在主视图中计算表单的大小。

为了更清楚，这是我的登录文件树：

数字 1 表示包含组件的母版页，其 ion-content 包含 ion-router-outlet，这是来自数字 2 的内容。

数字 2 是我在问题中 post 的代码，通过 ion-router-outlet 安装在那里没有任何问题，如果忽略属性导致问题.

好像是什么

在分析生成的代码时，在添加属性前后，似乎是在生成main ion-content（图中数字1）之后计算form的大小，这以后不拉伸了。

添加第二个 ion-content 时，编译似乎是从识别第二个 ion-content 的组件开始的，只有到那时，它才会执行应有的操作，计算正确的大小并启用滚动.

根据文档中的定义：

The content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view.

文档：https://ionicframework.com/docs/api/content

行尾

因此，以这种方式执行将使我的问题成为可行的解决方案，尽管根据定义，我没有做被认为“正确”的事情。

Angular [formGroup] 阻止滚动

Angular [formGroup] blocking scroll

angular

typescript

ionic5

场景

好像是什么

行尾