Angular 6表单模板错误：“没有将“ exportAs”设置为“ ngForm”的指令”

Question

I have downloaded Angular 6 + bootstrap 4 free skin - https://startangular.com/product/sb-admin-bootstrap-4-angular-6/ When trying to use I continuously getting error: There is no directive with "exportAs" set to "ngForm".

My app.module.ts:

 import {CommonModule} from '@angular/common';
    import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule, HttpHeaders} from '@angular/common/http';
    import {NgModule} from '@angular/core';
    import {BrowserModule} from '@angular/platform-browser';
    import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
    import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
    import {TranslateHttpLoader} from '@ngx-translate/http-loader';

    import {AppRoutingModule} from './app-routing.module';
    import {AppComponent} from './app.component';
    import {AuthGuard} from './shared';
    import {TokenInterceptor} from './shared/authtoken';
    import {AuthService} from './shared/services/auth/auth.service';
    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';

    // AoT requires an exported function for factories
    export const createTranslateLoader = (http: HttpClient) => {
        return new TranslateHttpLoader(http, './assets/i18n/', '.json');
    };

    @NgModule({
        imports: [
            CommonModule,
            BrowserModule,
            FormsModule,
            ReactiveFormsModule,
            BrowserAnimationsModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: createTranslateLoader,
                    deps: [HttpClient]
                }
            }),
            AppRoutingModule
        ],
        declarations: [AppComponent],
        providers: [
            AuthGuard,
            {
                provide: HTTP_INTERCEPTORS,
                useClass: TokenInterceptor,
                multi: true
            },
            AuthService
        ],
        exports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule
        ],
        bootstrap: [AppComponent]
    })
    export class AppModule {
    }

    platformBrowserDynamic().bootstrapModule(AppModule);

My login.component.ts:

    import {Component, ElementRef, OnInit} from '@angular/core';
    import {Router} from '@angular/router';
    import {routerTransition} from '../router.animations';
    import {HttpClient} from '@angular/common/http';
    import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

    @Component({
        selector: 'app-login',
        templateUrl: './login.component.html',
        styleUrls: ['./login.component.scss'],
        animations: [routerTransition()]
    })

    export class LoginComponent implements OnInit {

        public myform: FormGroup;
        public username: FormControl;
        public password: FormControl;

        constructor(public router: Router, private httpClient: HttpClient,
        private formBuilder: FormBuilder) {
        }

        ngOnInit() {
            this.myform = this.formBuilder.group({
                username: new FormControl('', [
                    Validators.minLength(4),
                    Validators.required
                ]),
                password: new FormControl('', [
                    Validators.minLength(4),
                    Validators.required
                ])
            });
        }

        async onLoggedin(form: ElementRef) {

            console.log('Start login... ' + form);
        await this.httpClient.post<AuthenticationResponse>('http://127.0.0.1:51120/login',
            {'username': this.username.value, 'password': this.password.value})
            .toPromise().then(
                data => {
                    console.log('Successfully logged in with user name: ', data.name);
                    localStorage.setItem('token', data.token);
                    localStorage.setItem('isLogin', 'true');
                },
                error => {
                    if (!error.ok) {
                        console.log('Error: ' + error.message);
                    } else {
                        console.log('Failed login message: ', error.error.message);
                    }

                    localStorage.removeItem('token');
                    localStorage.removeItem('isLogin');
                    this.router.navigate(['/login']);
                });

        return false;
    }
}

    interface AuthenticationResponse {
        status: string;
        code: string;
        message: string;
        id: number;
        token: string;
        username: string;
        role: string;
        name: string;
        companyName: string;
    }

My login.component.html:

<div class="login-page" [@routerTransition]>
    <div class="row justify-content-md-center">
        <div class="col-md-4">
            <img src="assets/images/logo.png" width="150px" class="user-avatar" />
            <h1><h1>Fish farms login</h1></h1>
            <form role="form" (ngSubmit)="onLoggedin(f)" #f="ngForm" novalidate>
                <div class="form-content">
                    <div class="form-group">
                        <input type="text" id="username" name="username" class="form-control input-underline input-lg" required minlength="4" 
                   formControlName="username" placeholder="Username" ngModel>
                        <div class="form-group">
                            <input type="password" id="password" name="password" class="form-control input-underline input-lg" required 
                       minlength="4" formControlName="password" placeholder="Password" ngModel>
                        </div>
                    </div>
                    <button type="submit" class="btn rounded-btn" [routerLink]="['/dashboard']">Log in</button>
                    <a class="btn rounded-btn" [routerLink]="['/signup']">Register</a>
                </div>
            </form>
        </div>
    </div>
</div>

All over got replies asking to add to @NgModule({ imports: [ FormsModule, ReactiveFormsModule,

But it does not work for me at all. Please advise

Answer 1

There's an issue with your Template:

<form role="form" (ngSubmit)="onLoggedin(f)" #f="ngForm" novalidate>

Here you're using #f="ngForm" which is generally used for Template Driven Forms and you're creating a Reactive Form in your TypeScript class.

You should be using either one of them but not both at the same time in the same Component.

You'll anyway have access to the form in your Component Class.

onLoggedin can directly access the form using this.myform

To fix the issue, get rid of #f="ngForm" from your template:

<div class="login-page" [@routerTransition]>
  <div class="row justify-content-md-center">
    <div class="col-md-4">
      <img src="assets/images/logo.png" width="150px" class="user-avatar" />
      <h1>
        <h1>Fish farms login</h1>
      </h1>
      <form role="form" (ngSubmit)="onLoggedin()" novalidate>
        <div class="form-content">
          <div class="form-group">
            <input type="text" id="username" name="username" class="form-control input-underline input-lg" required minlength="4" formControlName="username" placeholder="Username" ngModel>
            <div class="form-group">
              <input type="password" id="password" name="password" class="form-control input-underline input-lg" required minlength="4" formControlName="password" placeholder="Password" ngModel>
            </div>
          </div>
          <button type="submit" class="btn rounded-btn" [routerLink]="['/dashboard']">Log in</button>
          <a class="btn rounded-btn" [routerLink]="['/signup']">Register</a>
        </div>
      </form>
    </div>
  </div>
</div>

And in your Component Class:

import {Component, ElementRef, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {routerTransition} from '../router.animations';
import {HttpClient} from '@angular/common/http';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  animations: [routerTransition()]
})

export class LoginComponent implements OnInit {

  public myform: FormGroup;
  public username: FormControl;
  public password: FormControl;

  constructor(public router: Router, private httpClient: HttpClient,
    private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.myform = this.formBuilder.group({
      username: new FormControl('', [
        Validators.minLength(4),
        Validators.required
      ]),
      password: new FormControl('', [
        Validators.minLength(4),
        Validators.required
      ])
    });
  }

  async onLoggedin() {

    console.log('Start login... ' + this.myform.value);
    await this.httpClient.post < AuthenticationResponse > ('http://127.0.0.1:51120/login', {
        'username': this.myform.value.username,
        'password': this.myform.value.password
      })
      .toPromise().then(
        data => {
          console.log('Successfully logged in with user name: ', data.name);
          localStorage.setItem('token', data.token);
          localStorage.setItem('isLogin', 'true');
        },
        error => {
          if (!error.ok) {
            console.log('Error: ' + error.message);
          } else {
            console.log('Failed login message: ', error.error.message);
          }

          localStorage.removeItem('token');
          localStorage.removeItem('isLogin');
          this.router.navigate(['/login']);
        });

    return false;
  }
}

interface AuthenticationResponse {
  status: string;
  code: string;
  message: string;
  id: number;
  token: string;
  username: string;
  role: string;
  name: string;
  companyName: string;
}