Ionic 3 Reactive Forms in IonViewDidLoad oder ionViewWillEnter funktioniert nicht

Question

Ionic 3 Reactive Form funktioniert nicht in IonViewDidLoad oder ionViewWillEnter. Es sagt

UserInfoPage.html:18 ERROR TypeError: this.form._updateTreeValidity is not a function 

Während, wenn ich Formular-Builder-Code im Konstruktor der Ionic Seite setzt dann heißt es

UserInfoPage.html:23 ERROR TypeError: Cannot read property 'dateOfBirth' of undefined 

I Lazy Loading-für die Formularseite verwenden. Bitte helfen und führen. Hier ist der vollständige Code:

benutzer info.ts:

export class UserInfoPage { 

    createForm(): any { 
    this.userInfoForm = this.fb.group({ 
     dateOfBirth: [ '', Validators.compose([Validators.required, Validators.pattern(new RegExp("(0[123456789]|10|11|12)([/])([1-2][0-9][0-9][0-9])"))]) ], 
     weight: [ '', Validators.required, Validators.compose([Validators.pattern(new RegExp("[0-9]*"))]) ], 
     height: [ '', Validators.required, Validators.compose([Validators.pattern(new RegExp("[0-9]*"))]) ], 
    }); 
    } 

    @ViewChild("userInfoForm") content: Content; 

    userInfoForm: FormGroup; 
    isFormLoaded: boolean; 

    constructor(public navCtrl: NavController, private fb: FormBuilder, public navParams: NavParams) { 
    this.isFormLoaded = false;  
    } 

    ionViewWillEnter() { 
    this.createForm(); 
    this.isFormLoaded = true; 
    this.content.resize();  
    } 

} 

und

Benutzer-info.html:

<ion-content #userInfoForm> 
    <form [formGroup]="userInfoForm" *ngIf="isFormLoaded"> 
    <ion-list> 
     <ion-list-header>Please Enter Your Following Information</ion-list-header>  
     <ion-item> 
     <ion-label color="primary" floating>Date of Birth</ion-label> 
     <ion-input [formControl]="userInfoForm.controls['dateOfBirth']" required></ion-input> 
     </ion-item> 
     <ion-item> 
     <ion-label color="primary" floating>Weight</ion-label> 
     <ion-input [formControl]="userInfoForm.controls['weight']" type="number" pattern="[0-9]*" required></ion-input> 
     </ion-item> 
     <ion-item> 
     <ion-label color="primary" floating>Height</ion-label> 
     <ion-input [formControl]="userInfoForm.controls['height']" type="number" pattern="[0-9]*" required></ion-input> 
     </ion-item> 
    </ion-list> 
    </form> 
</ion-content> 

ionischer und Winkel Neuling hier. Vielen Dank.

Answer 1

Am besten verwenden Sie es in IonViewDidLoad. Auch userInfoForm ist sowohl eine Vorlagenvariable als auch eine Komponentenvariable. Es könnte der Grund für einen Fehler sein.

Ein weiteres ähnliches Problem: https://stackoverflow.com/a/40900504/2120711