Problem in erstellen Layout in ionischen 2

Question

Ich habe zwei Registerkarten erstellt man ist Login und andere ist Anfrage. Die Registerkarte Login funktioniert ordnungsgemäß. wenn ich Anfrage-Layout erstellt habe, habe ich Fehler, der unten ist. Ich bin Anfänger für ionische 2, also wenn jemand Tutorial haben, bitte teilen Sie mit mir.

Error: Uncaught (in promise): ngFormModel expects a form. Please pass one in. Example: <form [ngFormModel]="myCoolForm"> 
browser_adapter.js:77 Error: Uncaught (in promise): ngFormModel expects a form. Please pass one in. Example: <form [ngFormModel]="myCoolForm"> 
    at resolvePromise (zone.js:538) 
    at zone.js:574 
    at ZoneDelegate.invokeTask (zone.js:356) 
    at Object.onInvokeTask (ng_zone_impl.js:37) 
    at ZoneDelegate.invokeTask (zone.js:355) 
    at Zone.runTask (zone.js:256) 
    at drainMicroTaskQueue (zone.js:474) 
    at XMLHttpRequest.ZoneTask.invoke (zone.js:426) 

zone.js:461 Unhandled Promise rejection: ngFormModel expects a form. Please pass one in. Example: <form [ngFormModel]="myCoolForm"> ; Zone: angular ; Task: Promise.then ; Value: BaseException {message: "ngFormModel expects a form. Please pass one in. Example: <form [ngFormModel]="myCoolForm">", stack: "Error: ngFormModel expects a form. Please pass one…//localhost:8100/build/js/app.bundle.js:55701:22)"}consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 
zone.js:463 Error: Uncaught (in promise): ngFormModel expects a form. Please pass one in. Example: <form [ngFormModel]="myCoolForm">(…)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 
4livereload.js?snipver=1:74 WebSocket connection to 'ws://localhost:35729/livereload' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED 

Gebrauchte-Code

enquiry.html

<ion-content> 
     <p *ngIf="submitAttempt" style="color: #ea6153;">Please fill out all details accurately.</p> 

     <ion-list no-lines> 

      <form [ngFormModel]="slideOneForm"> 

       <ion-item> 
        <ion-label floating>First Name</ion-label> 
        <ion-input #firstName (change)="elementChanged(firstName)" ngControl="firstName" type="text" [class.invalid]="!slideOneForm.controls.firstName.valid && (firstNameChanged || submitAttempt)"></ion-input> 
       </ion-item> 

       <ion-item *ngIf="!slideOneForm.controls.firstName.valid && (firstNameChanged || submitAttempt)"> 
        <p>Please enter a valid name.</p> 
       </ion-item> 

       <ion-item> 
        <ion-label floating>Last Name</ion-label> 
        <ion-input #lastName (change)="elementChanged(lastName)" ngControl="lastName" type="text" [class.invalid]="!slideOneForm.controls.lastName.valid && (lastNameChanged || submitAttempt)"></ion-input> 
       </ion-item> 

       <ion-item *ngIf="!slideOneForm.controls.lastName.valid && (lastNameChanged || submitAttempt)"> 
        <p>Please enter a valid name.</p> 
       </ion-item> 

       <ion-item> 
        <ion-label floating>Age</ion-label> 
        <ion-input #age (change)="elementChanged(age)" ngControl="age" type="number" [class.invalid]="!slideOneForm.controls.age.valid && (ageChanged || submitAttempt)"></ion-input> 
       </ion-item> 

       <ion-item *ngIf="!slideOneForm.controls.age.valid && (ageChanged || submitAttempt)"> 
        <p>Please enter a valid age.</p> 
       </ion-item> 
      </form> 
     </ion-list> 
     <button primary (click)="save()">Create Account!</button> 
</ion-content> 

enquiry.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    templateUrl: 'build/pages/enquiry/enquiry.html', 
    directives: [FORM_DIRECTIVES] 
}) 

    export class EnquiryPage { 

     public items; 
     slideOneForm: ControlGroup; 

     firstNameChanged: boolean = false; 
     lastNameChanged: boolean = false; 
     ageChanged: boolean = false; 

     submitAttempt: boolean = false; 

     constructor(private formBuilder: FormBuilder) { 

      this.slideOneForm = formBuilder.group({ 
      firstName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])], 
      lastName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])], 
      age: ['', AgeValidator.isValid] 
      }); 
     } 

     this.items = [ 
      {title: 'item1',id: '1'}, 
      {title: 'item2',id: '2'}, 
      {title: 'item3',id: '3'}, 
      {title: 'item4',id: '4'}, 
      {title: 'item5',id: '5'}, 
      {title: 'item6',id: '6'} 
     ]; 

     onChange(selectedItem) { 
      console.log('Selected item: '+selectedItem); 
     } 
     elementChanged(input){ 
      let field = input.inputControl.name; 
      this[field + "Changed"] = true; 
     } 
    } 

Answer 1

Wo kommt Ihr Formular Beginn und am Ende? und Ihr Absenden Button sollte innerhalb des Formulars sein

Das Problem hier ist Ihr Versuch, Ihr Formular mit Ihren Tabs slideOneForm: ControlGroup; zu verschmelzen, was nicht richtig ist.

<form #RegisterForm="ngForm" novalidate> 


<button (click)="save(RegisterForm)" type="submit" primary block>Login</button> 

</form>