IonViewDidLoad 或 ionViewWillEnter 中的 Ionic 3 Reactive Forms 不起作用

Question

Ionic 3 Reactive Form 在 IonViewDidLoad 或 ionViewWillEnter 中不工作。它说

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

而如果我将表单生成器代码放入 Ionic Page 的构造函数中，那么它会显示

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

我正在为表单页面使用延迟加载。请帮助和指导。完整代码如下：

用户-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();    
  }

}

和

用户-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>

ionic 和 angular 新手。谢谢

Answer 1

最好在ionViewDidLoad中使用它。此外，userInfoForm 既是模板变量又是组件变量。这可能是错误的原因。

另一个类似的问题：

IonViewDidLoad 或 ionViewWillEnter 中的 Ionic 3 Reactive Forms 不起作用

Ionic 3 Reactive Forms in IonViewDidLoad or ionViewWillEnter not working

javascript

ionic3

angular

angular-reactive-forms

angular5