离子表单提交调用导航到而不是提交函数

Ionic form submit calls navigate to instead of submit function

出于某种原因,我的表单重定向到应用程序主页而不是调用提交功能。 除了这个以外,我所有的其他表格都可以正常工作

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 控制台日志给了我这个

==========================================================  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  ==========================================================

事实证明,出现了几个错误,因为模态未在 declarationsentryComponents 中声明在 app.module.ts