Блог

Я знаю, что этот вопрос задавался много раз, но все решения, которые я нашел, не решили мою проблему. Это моя форма в HTML-файле компонента входа:

  <form #loginForm="ngForm" (ngSubmit)="login()">
            <p *ngIf="errorMessage" class="error">{{ errorMessage }}</p>
            <p class="username">User Name</p>
            <input type="text" placeholder="Enter user name" name="username" [(ngModel)]="model.username">
            <p class="password">Password</p>
            <input type="password" class="centered-items" placeholder="Enter password" name="password" [(ngModel)]="model.password">
            <hr>
            <button class="login-btn" type="submit">Login</button>
            <button [routerLink]="['../']">Cancel</button>
            <p>Not registered? <a [routerLink]="['../register']">Register now</a></p>
        </form>
 

Это мой метод входа в систему в файле login component .ts:

  login() {
    this.databaseService.login(this.model).subscribe(() => {
    },  error => {
      this.errorMessage = error.error;
    }, () => {
      this.route.navigate(['../']);
    });
  }
 

Это ошибка, получаемая в консоли:

 src/app/login/login.component.ts:8:16
    8   templateUrl: './login.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LoginComponent.
src/app/register/register.component.html:6:27 - error NG8003: No directive found with exportAs 'ngForm'.
 

Я добавил FormsModule и ReactiveFormsModule как в файлы app.module, так и в login.module. Я перезапустил VS code и попытался запустить обновление npm. Я также попытался удалить # из #LoginForm, как было предложено в одном сообщении.

Добавление LoginComponent в объявления файла app.module решило эту проблему для меня