В настоящее время я использую Angular 11 и пытаюсь создать форму входа с помощью ReactiveFormsModule. Сразу после загрузки страницы входа в консоль браузера выдается ошибка TypeError. После того, как я ввожу что-то в поле ввода, появляется еще одна ошибка TypeError. TypeError

Я искал решение по всей сети и пробовал все, что предлагали другие с той же проблемой, но ничто не решает мою. Я только начал изучать Angular месяц назад, и я думаю, что делаю что-то не так, но я действительно не могу найти, что это такое.

< Сильный > login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup} from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/core/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  form: FormGroup;

  constructor(
    private fb: FormBuilder,
    private authService: AuthService,
    private router: Router
  ) {
    this.form = this.fb.group({
      email: [''],
      password: ['']
    })
  }

  ngOnInit(): void {
  }

  submitHandler(): void {
    const data = this.form.value;

    this.authService
      .login(data)
      .subscribe({
        next: () => {
          this.router.navigate(['/']);
        },
        error: (err) => {
          console.error(err);
        }
      })
  }
}

< Сильный > login.component.html

<section class="login-wrapper">
    <form formGroup="form" class="login-form" (ngSubmit)="submitHandler()">
        <article class="login-body">
            <h1>Login</h1>
            <input name="email" type="text" placeholder="E-mail" formControlName="email">
            <input name="password" type="password" placeholder="Password" formControlName="password">
            <button type="submit">Login</button>
            <p>Don't have an account? <a href="/signup">Sign up</a></p>
        </article>
    </form>
</section>

< Сильный > user.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SignUpComponent } from './sign-up/sign-up.component';
import { LoginComponent } from './login/login.component';
import { UserRoutingModule } from './user-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    SignUpComponent,
    LoginComponent
  ],
  imports: [
    CommonModule,
    UserRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class UserModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { CoreModule } from '../app/core/core.module';
import { HeaderComponent } from '../app/core/header/header.component';
import { FooterComponent } from '../app/core/footer/footer.component';
import { HomeComponent } from './home/home.component';
import { UserRoutingModule } from '../app/user/user-routing.module';
import { UserModule } from './user/user.module';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule,
    UserRoutingModule,
    UserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [
    AppComponent,
    HeaderComponent,
    FooterComponent
  ]
})
export class AppModule { }
1
Boyan Petrov 9 Дек 2020 в 01:53

1 ответ

Лучший ответ

Вы забыли скобку вокруг formGroup в вашей форме html:

<form [formGroup]="form" class="login-form" (ngSubmit)="submitHandler()">
1
buzatto 8 Дек 2020 в 23:29