Ionic Not Working with ReactiveForms

Ionic Framework
1

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

Can you be any more specific about what you mean by “doesn’t work”? Something like “I expect X to happen, but see Y instead”. Error messages if there are any in the JavaScript console would also be tremendously helpful.