ngSubmit не работает, но onsubmit работает

Question

app.module.ts

    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { NgModule } from '@angular/core';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { HttpModule} from '@angular/http';
    import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
    import { RouterModule } from '@angular/router';
    import { AuthInterceptor } from './shared/authconfig.interceptor';


    import { AppRoutingModule } from './app.routing';
    import { ComponentsModule } from './components/components.module';

    import { AppComponent } from './app.component';

    import { DashboardComponent } from './dashboard/dashboard.component';
    import { UserProfileComponent } from './user-profile/user-profile.component';
    import { TableListComponent } from './table-list/table-list.component';
    import { TypographyComponent } from './typography/typography.component';
    import { IconsComponent } from './icons/icons.component';
    import { MapsComponent } from './maps/maps.component';
    import { NotificationsComponent } from './notifications/notifications.component';
    import { UpgradeComponent } from './upgrade/upgrade.component';
    import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';

    @NgModule({
      imports: [
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        HttpClientModule,
        HttpModule,
        ComponentsModule,
        RouterModule,
        AppRoutingModule,
      ],
      declarations: [
        AppComponent,
        AdminLayoutComponent,

      ],
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: AuthInterceptor,
          multi: true
        }
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

signup.component. html

    <div class="auth-wrapper">
    <form class="form-signin"   [formGroup]="signupForm" (ngSubmit)="registerUser()" >
        <h3 class="h3 mb-3 font-weight-normal text-center">Please sign up</h3>
        <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" formControlName="name" placeholder="Enter name" required>
        </div>
        <div class="form-group">
            <label>Email address</label>
            <input type="email" class="form-control" formControlName="email" placeholder="Enter email" required>
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-control" formControlName="password" placeholder="Password" required>
        </div>
        <button type="submit" class="btn btn-block btn-primary">Sign up</button>
    </form>
</div>

signup.component.ts

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

    @Component({
      selector: 'app-signup',
      templateUrl: './signup.component.html',
      styleUrls: ['./signup.component.css']
    })

    export class SignupComponent implements OnInit {
      signupForm: FormGroup;

      constructor(
        public fb: FormBuilder,
        public authService: AuthService,
        public router: Router
      ) {
        this.signupForm = this.fb.group({
          name: [''],
          email: [''],
          mobile: [''],
          password: ['']
        })
      }

      ngOnInit() { }

      registerUser() {
        this.authService.signUp(this.signupForm.value).subscribe((res) => {
          if (res.result) {
            this.signupForm.reset()
            this.router.navigate(['log-in']);
          }
        })
      }
    }

Если я изменюсь ngSubmit to onsubmit = "alert ('hi')", он отправляет предупреждение при отправке, но если я поставлю (ngSubmit) = "alert ('hi')", он ничего не делает, я уже пытался поместить предупреждение в функция registerUser, и ничего не происходит

РЕДАКТИРОВАТЬ: добавлен app.module.ts, там все уже импортировано, я не понимаю, куда вы, ребята, хотите, чтобы я его импортировал

Answer 1

вам понадобится что-то подобное в любом модуле, в котором находится этот компонент:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class YourModule { }

при импорте ReactiveFormsModule директивы будут регистрироваться правильно.