typescript - Angular - Interagera med reaktiva formulär i barnkomponenter

Jag har en registreringskomponent som har en ng-switch av komponenter

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

registreringskomponent

  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;
    }
  }

steg1-komponent

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

problemet är att jag får ett fel som säger: ERROR TypeError: Cannot read property 'invalid' of undefined som pekar på funktionsanropet ovan. Dessutom verkar det som att FormGroup inte blir initialiserad?

Jag är inte helt säker på vad problemet är, jag har tittat på andra inlägg om detta:

en

två

STACK BLITZ

Svar #1

Du injicerar din komponent direkt istället för att hämta den från vyn på det här sättet

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

En sådan komponent kommer att vara ett 'enkelt objekt' utan Angulards komponentlivscykel involverad. Därför anropas ingen ngOnInit i Step1 så inget formulär skapas och form är därför odefinierad

Vad du bör göra, istället för konstruktörs-injektion, är att använda @ViewChild för att få den faktiska komponenten från sidan.

Detta fixar ditt problem (åtminstone vid steg 1, har inte kollat på något annat)

 @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

Svar #2

ersätt (this.regForm.invalid) med (this.regForm.status === 'INVALID').

formbuilder har inte egenskapen Ogiltig/giltig ange bildbeskrivning här