Angular [formGroup] blocking scroll
I am building an application with ionic 5/angular and preparing the login view and I am facing an issue in the form when using the property [formGroup] which prevents the screen from scrolling which I am not finding a way to work around the situation.
My login screen:
<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>
The validation and login work just fine, no problem spotted, but I can't scroll the view due the property [formGroup] defined in the form.
If I remove the property, it will scroll normally
The initialization of the formGroup object if being properly done in the ts on the constructor:
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;
}
I've seen multiple threads here in stackoverflow so far but none stating the issue with the scrolling itself with this property, although there are plenty of issues with content inside ionic not scrolling, which I tried to implement to check if it would solve the case above, which was no success.
ionic content not scrolling Content not scrolling in ionic
In the generated HTML I found out that the form have this property when using the formGroup, ng-reflect-form="[object Object]", which I thought that it could be the issue (I still do see it as an issue) but it is not enought to prevent the scrolling even after removing it manually to check.
What am I doing wrong here with this formGroup?
Ok, at the end the redundancy, which I was trying to avoid, was the solution to the problem.
The scenario
It seems that when we use a structure with a form that is bound to the class, it prevents the size of the form to be calculated in the main view.
To make it clearer, this is my login file tree:
The number 1 represents the master page that holds the component and have its ion-content that holds the ion-router-outlet, which is the content from the number 2.
The number 2 is the code that I post in the question, which fits in there without any issues through the ion-router-outlet, if disregarding the property that causes the issue.
What it seems to be
When analyzing the generated code, before and after adding the property, it seems that the size for the form is calculated after the main ion-content is generated (the number 1 in the picture), which doesn't strech later.
When adding a second ion-content, it seems that the compilation starts from the component when it identifies a second ion-content, which only then, performs the action as it should, calculating the correct size and enabling the scrolling.
By definition in the documentation:
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.
Documentation: https://ionicframework.com/docs/api/content
The end of the line
Therefore, performing it this way will get my problem to a viable solution, although, by definition, I am not doing something deemed "correct".