Angular - взаимодействовать с реактивными формами дочерних компонентов

Question

У меня есть компонент регистрации, имеющий ng-переключатель компонентов

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

компонент регистрации

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

компонент step1

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

проблемачто я получаю сообщение об ошибке: ERROR TypeError: Cannot read property 'invalid' of undefined указывает на вызов функции выше.Кроме того, похоже, что FormGroup не инициализируется?

Я не совсем уверен, в чем проблема, я смотрел другие посты по этому поводу:

one

два

STACK BLITZ

Answer 1

Вы вводите свой компонент напрямую, а не извлекаете его из вида, подобного этому

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

Такой компонент будет «простым объектом» без участия жизненного цикла компонента angular.Поэтому ngOnInit не вызывается в Step1, поэтому форма не создается, поэтому form не определено

Что вы должны сделать, вместо инъекции в конструктор, используйте @ViewChild, чтобы получить фактический компонент со страницы.

Это исправляет вашу проблему (по крайней мере, на шаге 1, больше ничего не проверял)

 @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

Answer 2

заменить (this.regForm.invalid) на (this.regForm.status === 'INVALID').

formbuilder не имеет недопустимого / действительного свойства введите описание изображения здесь