For some reason, my form redirects to the app home page instead of calling the submit function. All my other forms work perfectly except for this one
maintenance-form-modal.component.html
<ion-header>
<ion-toolbar>
<ion-title>Maintenance Form</ion-title>
<ion-buttons slot="end">
<ion-button (click)="dismissModal()">Close</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-item lines="full">
<p>Location: {{location.name}}</p>
</ion-item>
<form [formGroup]="maintenanceForm" (ngSubmit)="submitForm()">
<ion-item lines="full">
<ion-label position="stacked">Details</ion-label>
<ion-input formControlName="details" type="text" spellcheck="true"></ion-input>
</ion-item>
<span class="error ion-padding" *ngIf="isSubmitted && maintenanceForm.controls.name.errors?.required">
Details are required.
</span>
<ion-item lines="full">
<ion-label position="stacked">Image</ion-label>
<ion-button color="primary" expand="block" size="big" (click)="takePicture()">Take Picture</ion-button>
<img [src]="photo">
</ion-item>
<span class="error ion-padding" *ngIf="isSubmitted && maintenanceForm.controls.image.errors?.required">
An image for the maintenance ticket is required.
</span>
<ion-item lines="full">
<ion-label position="stacked">Priority</ion-label>
<ion-range min="1" max="5" step="1" snaps="true" formControlName="priority">
<ion-label slot="start">1</ion-label>
<ion-label slot="end">5</ion-label>
</ion-range>
</ion-item>
<span class="error ion-padding" *ngIf="isSubmitted && maintenanceForm.controls.priority.errors?.required">
Priority is required.
</span>
<ion-item lines="full">
<ion-label position="stacked">Maintenance Type</ion-label>
<ion-select formControlName="category">
<ion-select-option>Electrical</ion-select-option>
<ion-select-option>Plumbing</ion-select-option>
<ion-select-option>Other</ion-select-option>
</ion-select>
</ion-item>
<span class="error ion-padding" *ngIf="isSubmitted && maintenanceForm.controls.category.errors?.required">
Priority is required.
</span>
<ion-row>
<ion-col>
<ion-button type="submit" color="danger" expand="block">Submit</ion-button>
</ion-col>
</ion-row>
</form>
</ion-content>
maintenance-form-modal.component.ts
import { Component, OnInit } from '@angular/core';
import {GlobalVariablesService} from '../services/global-variables.service';
import {ModalController, NavParams} from '@ionic/angular';
import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
import {Location} from '../classes/location';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-maintenance-form-modal',
templateUrl: './maintenance-form-modal.component.html',
styleUrls: ['./maintenance-form-modal.component.scss'],
})
export class MaintenanceFormModalComponent implements OnInit {
public static modalID: string = GlobalVariablesService.maintenanceFormModalID;
public location: Location;
public photo: SafeResourceUrl;
public isSubmitted = false;
public maintenanceForm = this.formBuilder.group({
details: new FormControl('', Validators.compose([Validators.required])),
priority: new FormControl('', Validators.compose([Validators.required])),
image: new FormControl('', Validators.compose([Validators.required])),
category: new FormControl('', Validators.compose([Validators.required]))
});
constructor(private modalController: ModalController,
private navParams: NavParams,
private sanitizer: DomSanitizer,
private formBuilder: FormBuilder) {
GlobalVariablesService.printConsoleBreaker('maintenance-form-modal.component.ts');
}
ngOnInit() {
this.location = this.navParams.get('location');
console.log('Location in modal', this.location);
console.log('Image', this.photo);
}
async takePicture() {
const image = await Plugins.Camera.getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.DataUrl,
source: CameraSource.Camera
});
this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
this.maintenanceForm.get('image').setValue(this.photo);
}
public submitForm() {
this.isSubmitted = true;
if (!this.maintenanceForm.valid) {
console.log('Please provide all the required values!');
return false;
} else {
console.log('Form Value', this.maintenanceForm.value);
}
}
public async dismissModal() {
await this.modalController.dismiss(null, 'cancel', MaintenanceFormModalComponent.modalID);
}
}
Google console log gives me this
========================================================== maintenance-form-modal.component.ts ==========================================================
VM786 main-es2015.js:7342 Location in modal [REDACTED]
VM786 main-es2015.js:7343 Image undefined
VM787 vendor-es2015.js:49857 Can't bind to 'ngIf' since it isn't a known property of 'span'.
VM787 vendor-es2015.js:49857 Can't bind to 'ngIf' since it isn't a known property of 'span'.
VM787 vendor-es2015.js:49857 Can't bind to 'ngIf' since it isn't a known property of 'span'.
VM787 vendor-es2015.js:49857 Can't bind to 'ngIf' since it isn't a known property of 'span'.
DevTools failed to load SourceMap: Could not load content for http://localhost/48-es2015.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://localhost/60-es2015.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://localhost/20-es2015.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
capacitor-runtime.js:2394 onscript loading complete
Navigated to http://localhost/tabs/customers?ion-input-4=&ion-sel-0=
DevTools failed to load SourceMap: Could not load content for http://localhost/runtime-es2015.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://localhost/tabs/sentry-cordova.bundle.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://localhost/polyfills-es2015.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://localhost/styles-es2015.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://localhost/main-es2015.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://localhost/vendor-es2015.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
vendor-es2015.js:75090 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
vendor-es2015.js:106154 Ionic Native: deviceready event fired after 361 ms
vendor-es2015.js:106459 Native: tried calling StatusBar.styleDefault, but the StatusBar plugin is not installed.
vendor-es2015.js:106465 Install the StatusBar plugin: 'ionic cordova plugin add cordova-plugin-statusbar'
vendor-es2015.js:106459 Native: tried calling SplashScreen.hide, but the SplashScreen plugin is not installed.
vendor-es2015.js:106465 Install the SplashScreen plugin: 'ionic cordova plugin add cordova-plugin-splashscreen'
capacitor-runtime.js:5173 Initialized the NfcPlugin
main-es2015.js:8337 ========================================================== tabs.page.ts ==========================================================
It turns out that several bugs were occurring because the modal was not declared in declarations and entryComponents in app.module.ts