Vamos implementar um formulário no ionic de forma reativa e salvar dados usando um banco de dados sqlite.

Altere o tab1.page.html para conter um título e as tabs para representar um formulário. Agora vamos adicionar nosso formulário de forma semelhante ao código visto na Aula 08 formulários reativos. Vamos adicionar em tab1.page.ts o seguinte código:

import { Component } from ‘@angular/core’;
import { IonicModule } from ‘@ionic/angular’;
import { ExploreContainerComponent } from ‘…/explore-container/explore-container.component’;
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from ‘@angular/forms’;

@Component({
	selector: ‘app-tab1’,
	templateUrl: ‘tab1.page.html’,
	styleUrls: [‘tab1.page.scss’],
	standalone: true,
	imports: [IonicModule, ExploreContainerComponent, ReactiveFormsModule],
})
export class Tab1Page {
	formGroup: FormGroup = this.fb.group({
		nome: [‘’, Validators.required],
		telefone: [‘’],
		email: [‘’, Validators.email],
		hobie: [‘’]
		})
	constructor(private fb: FormBuilder) { }
		salvar() {
			if (this.formGroup.valid) {
				alert(‘Formulário salvo com sucesso’)
			} else {
				alert(‘Formulário inválido’)
			}
		}
	}

Repare que nós usamos o import do ReactiveFormsModule diretamente no componente, fazemos isso porque o ionic 7 starter usa standalone, componentes do Angular 14.

Vamos construir nosso formulário na página tab1.page.html:

<ion-header [translucent]=“true”>
	<ion-toolbar>
		<ion-title>
			Cadastro de pessoa
		</ion-title>
	</ion-toolbar>
</ion-header>

<ion-content [fullscreen]=“true”>
	<ion-header collapse=“condense”>
		<ion-toolbar>
			<ion-title size=“large”>Cadastro de Pessoa</ion-title>
		</ion-toolbar>
	</ion-header>
	<form [formGroup]=“formGroup” (ngSubmit)=“salvar()”>
		<ion-item>
			<ion-input label=“Nome” label-placement=“floating” fill=“solid”
		placeholder=“Entre um nome” 
			errorText=“Nome é obrigatório”
			formControlName=“nome”></ion-input>
		</ion-item>
		<ion-item>
				<ion-input label=“Telefone” label-placement=“floating” fill=“solid” placeholder=“Entre um telefone” formControlName=“telefone”></ion-input>
		</ion-item>
		<ion-item>
			<ion-input label=“Email” label-placement=“floating” fill=“solid”
			errorText=“Entre com um email válido”
			placeholder=“Entre um email” formControlName=“email”></ion-input>
		</ion-item>
		<ion-row>
			<ion-col>
				<ion-button type=“submit” expand=“block” [disabled]=“!formGroup.valid”>
				Salvar
				</ion-button>
			</ion-col>
		</ion-row>
	</form>
</ion-content>

Nosso formulário utiliza o já conhecido formControlName e formGroup. A diferença é que agora usamos o ion-input, que nos fornece algumas propriedades interessantes:

• label – Informação do input;
• label-placement – onde colocar o label;
• fill – modifica a aparência do input, pode ser solid ou outline;
• errorText – Mensagem que irá aparecer caso o item estiver inválido.

No final colocamos um botão de tipo submit que irá ficar desabilitado se o formulário estiver inválido.

Salvando os dados no sqlite

Vamos implementar um serviço para salvar os dados em um banco de dados local, com sqlite. O sqlite é um banco de dados relacional opensource que pode ser usado nativamente no dispositivo ou em aplicativos web.

Para salvar os dados no dispositivo vamos usar o plugin ionic storage juntamente com driver para SQLite. Tenha em mente que os dados são salvos no dispositivo sem criptografia, o que pode ser um problema dependendo do que a aplicação faz. Existe uma solução paga para criptografia nativa do IONIC chamada de ionic secure storage que não vamos abordar na disciplina, se estiver curioso acesse https://ionic.io/docs/secure-storage.

Instale o ionic storage e o driver para sqlite (vai ser usado quando em um dispositivo nativo):

npm install @ionic/storage-angular
npm install cordova-sqlite-storage
npm install localforage-cordovasqlitedriver

Após isso, crie e configure o plugin no arquivo main.ts.

import { enableProdMode, importProvidersFrom } from ‘@angular/core’;
import { bootstrapApplication } from ‘@angular/platform-browser’;
import { RouteReuseStrategy, provideRouter } from ‘@angular/router’;
import { IonicModule, IonicRouteStrategy } from ‘@ionic/angular’;
import { routes } from ‘./app/app.routes’;
import { AppComponent } from ‘./app/app.component’;
import { environment } from ‘./environments/environment’;
import { IonicStorageModule } from ‘@ionic/storage-angular’;
import CordovaSQLiteDriver from ‘localforage-cordovasqlitedriver’
import { Drivers } from ‘@ionic/storage’;

if (environment.production) {
	enableProdMode();
}
bootstrapApplication(AppComponent, {
	providers: [
		{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
		importProvidersFrom(IonicModule.forRoot({}),  IonicStorageModule.forRoot({
		name: ‘mydb’,
		driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB, Drivers.LocalStorage]
		})),
		provideRouter(routes),
	],
});

Aqui dizemos para o plugin usar o SQL driver ou os outros drivers (IndexDB, LocalStorage), se disponíveis. Isso faz com que o sistema funcione na web para testarmos, e quando gerarmos um aplicativo nativo ou usarmos um emulador ele vai escolher o sqlite.