замените ng-форму на угловую форму 5 в гибридном приложении

Question

У меня есть приложение AngularJS с HTML, как показано ниже.

<form name="completeForm">
  <first-step></first-step>
  <second-step></second-step>
  <third-step></third-step>
  <fourth-step></fourth-step>
  <fifth-step></fifth-step>
</form>

Форма перейдет к следующему шагу после проверки текущего шага по событию нажатия кнопки.

Каждая пошаговая директива HTML реализуется через тег ng-form, как показано ниже.

<first-step></first-step> => <ng-form name="firstForm"></ng-form>
<second-step></second-step> => <ng-form name="secondForm"></ng-form>
<third-step></third-step> => <ng-form name="thirdForm"></ng-form>
<fourth-step></fourth-step> => <ng-form name="fourthForm"></ng-form>
<fifth-step></fifth-step> => <ng-form name="fifthForm"></ng-form>

Я хочу заменить один из шагов (второй шаг) реализацией, использующей Angular 5, что делает его гибридным приложением.

Я должен иметь возможность заменить второй шаг в Angular 5. Связанный с ним HTML-код приведен ниже.

<form  #secondForm="ngForm">
.....
  <input type="text"  #email="ngModel" name="email"  [(ngModel)]="$scope.email" required />
  <span *ngIf="!email.valid">please enter the input</span> 
...
</form>

Но проверка, которую я реализовал на этом шаге Angular 5, не работает. Он переходит к следующему шагу без проверки на событие нажатия кнопки. Форма всегда считается действительной. Контроллер форм не распознает secondForm, определенный как <form #secondForm="ngForm">.

Я попытался заменить тег формы (так как форма на родительском уровне не может иметь другую форму внутри него) тегом div, как показано ниже, но никак не повлиял.

<div ngForm #secondForm="ngForm">

Пожалуйста, кто-нибудь может помочь.