typescript - Angular - Interagovať s reaktívnymi formulármi detských komponentov

Mám registračnú súčasť, ktorá má ng-switch komponentov

<ion-component>
  <ng-container [ngSwitch]="registrationStage">
    <step1 *ngSwitchCase="1"></step1>
    <step2 *ngSwitchCase="2"></step2>
    <step3 *ngSwitchCase="3"></step3>
  <ng-container>
</ion-component>

<ion-footer>
  <button (click)="goForward()">
  </button>
</ion-footer>

registračný komponent

  private goForward(): void {
    if (this.section !== 5) {
      switch (this.section) {
        case 1:
          this.step1.nextStep(); // <---cannot read property invalid of undefined
          this.regService.goForward();
          break;

        default:
          break;
      }
    } else {
      return;
    }
  }

komponent kroku 1

export class Step1 {
  private regForm: FormGroup;
  private formBuilder: FormBuilder;
  private stepTwo = false;

  public constructor(formBuilder: FormBuilder) {
    this.formBuilder = formBuilder;
  }
  public ngOnInit(): void {
    console.log('loaded'); //<-- I see this in the console

    this.regForm = this.formBuilder.group(
      {
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(6)]],
        confirmPassword: ['', Validators.required],
      },
      {
        validator: MustMatch('password', 'confirmPassword'),
      },
    );
  }
  public verifyAndNextStep(): void {
    this.stepTwo = true;

    if (this.regForm.invalid) {
      return;
    }
    const emailPassword: EmailPassword = {
      email: this.regForm.value.email,
      password: this.regForm.value.password,
    };
    this.regService.setEmailAndPassword(emailPassword);
    this.regService.goForward();
  }

problém je v tom, že dostávam chybu: ERROR TypeError: Cannot read property 'invalid' of undefined ukazujúcu na volanie funkcie hore. Ďalej sa zdá, že FormGroup sa neinicializuje?

Nie som si presne istý, čo je problém, pozrel som si aj iné príspevky o tom:

jeden

dva

STACK BLITZ

Odpoveď č. 1

Namiesto získavania komponentu z pohľadu ho vkladáte priamo takto

  public constructor(navCtrl: NavController, step1: StepOne) {
}

Takáto súčiastka bude 'obyčajným objektom' bez zapojenia životného cyklu komponentu Angularu. Preto sa v Step1 nevolá ngOnInit, takže sa nevytvorí žiadny formulár, a preto je form nedefinovaný

Čo by ste mali urobiť, namiesto injekcie cez konštruktor použite @ViewChild, aby ste získali skutočnú komponentu zo stránky.

Toto opravuje váš problém (aspoň v kroku 1, nič iné som nekontroloval)

 @ViewChild(StepOne)
  private step1: StepOne;
  private navCtrl: NavController;
  public constructor(navCtrl: NavController) {
      this.navCtrl = navCtrl;
  }

https://stackblitz.com/edit/ionic-quz7y3?file=pages/home/home.ts

Odpoveď č. 2

nahraďte (this.regForm.invalid) za (this.regForm.status === 'INVALID').

formbuilder nemá vlastnosť Neplatné/Platné vložte popis obrázka sem