Guys there is something wrong with the latest version of Ionic. I cannot get ReactForms to work at all. I’m pretty sure I’m not messing this up.
Here is an example:
component.ts
import { Component, OnInit } from '@angular/core';
import { AngularEditorConfig } from '@kolkov/angular-editor';
import { JournalService } from '../services/journal.service';
import { AlertController, LoadingController } from '@ionic/angular';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit {
editorConfig: AngularEditorConfig = {
editable: true,
spellcheck: true,
height: 'auto',
minHeight: '0',
maxHeight: 'auto',
width: 'auto',
minWidth: '0',
translate: 'yes',
enableToolbar: true,
showToolbar: true,
placeholder: 'What happened during your Bible reading today?',
defaultParagraphSeparator: '',
defaultFontName: '',
defaultFontSize: '',
fonts: [
{ class: 'arial', name: 'Arial' },
{ class: 'times-new-roman', name: 'Times New Roman' },
{ class: 'calibri', name: 'Calibri' },
{ class: 'comic-sans-ms', name: 'Comic Sans MS' }
],
customClasses: [
{
name: 'quote',
class: 'quote',
},
{
name: 'redText',
class: 'redText'
},
{
name: 'titleText',
class: 'titleText',
tag: 'h1',
},
],
uploadUrl: 'v1/image',
uploadWithCredentials: false,
sanitize: true,
toolbarPosition: 'top',
toolbarHiddenButtons: [
['undo', 'redo', 'strikeThrough', 'subscript', 'superscript', 'heading', 'fontName'],
['fontSize', 'customClasses', 'link', 'unlink', 'insertHorizontalRule', 'removeFormat'],
['insertImage', 'insertVideo', 'toggleEditorMode']
]
};
entryForm: FormGroup;
constructor(private journalService: JournalService,
private alertCtrl: AlertController,
private loaderCtrl: LoadingController) { }
async ngOnInit() {
await this.showLoader();
this.initForm();
this.loaderCtrl.dismiss();
}
initForm() {
this.entryForm = new FormGroup({
title: new FormControl(''),
entry: new FormControl('')
});
}
async showLoader() {
const l = await this.loaderCtrl.create({
spinner: 'dots'
});
return l.present();
}
async createAlert(mess: string, isError: boolean) {
const a = await this.alertCtrl.create({
message: mess,
buttons: [isError ? 'Try Again' : 'OK']
});
await a.present();
}
onCreateEntry() {
this.showLoader();
const journalObject = {
...this.entryForm.value
};
this.journalService.newJournalEntry(journalObject)
.then(data => {
console.log(data);
console.log('Data stored.');
})
.catch((err) => {
this.createAlert(err, true);
})
.finally(() => this.loaderCtrl.dismiss())
}
}
component.module
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Tab2Page } from './tab2.page';
import { AngularEditorModule } from '@kolkov/angular-editor';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([
{ path: '', component: Tab2Page, pathMatch: 'full' }
]),
AngularEditorModule,
ReactiveFormsModule,
FormsModule
],
declarations: [
Tab2Page
]
})
export class Tab2PageModule {}
component.html
<ion-header>
<ion-toolbar color="primary">
<ion-title *ngIf="entryForm.get('title').value !== undefined">{{ entryForm.get('title').value }}</ion-title>
<ion-title *ngIf="!entryForm.get('title').value">New Entry</ion-title>
<ion-buttons slot="end">
<ion-button color="secondary">SAVE</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense" color="primary">
<ion-toolbar color="primary">
<ion-title size="large" color="secondary" *ngIf="entryForm.get('title').value !== undefined">{{ entryForm.get('title').value }}</ion-title>
<ion-title size="large" color="secondary" *ngIf="!entryForm.get('title').value">New Entry</ion-title>
</ion-toolbar>
</ion-header>
<div [formGroup]="entryForm">
<ion-item lines="none">
<ion-input placeholder="Title" formControlName="title"></ion-input>
</ion-item>
<angular-editor formControlName="entry" [config]="editorConfig"></angular-editor>
</div>
</ion-content>
Here is the Ionic Info
Ionic:
Ionic CLI : 6.10.0 (/Users/wd/.nvm/versions/node/v12.11.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.901.7
@angular-devkit/schematics : 9.1.7
@angular/cli : 9.1.7
@ionic/angular-toolkit : 2.2.0
Capacitor:
Capacitor CLI : 2.1.2
@capacitor/core : 2.1.2
Utility:
cordova-res (update available: 0.14.0) : 0.8.1
native-run (update available: 1.0.0) : 0.3.0
System:
NodeJS : v12.11.1 (/Users/wd/.nvm/versions/node/v12.11.1/bin/node)
npm : 6.14.5
OS : macOS Catalina
2 posts - 2 participants
Read full topic
