错误：无法绑定到＆＃39; formGroup＆＃39;因为它不是“

Question

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {AppRoutes} from './app.routing';
import { AppComponent } from './app.component';
import {ReactiveFormsModule,FormsModule} from "@angular/forms";



@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(AppRoutes),
    BrowserModule
  ],
  declarations: [
    AppComponent,
  ],
  providers: [
    customHttpProvider(),
    AccessService,
    RouteAccessService,
    JwtHelperService

  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

我的错误：

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'.

我的HTML

         <form [formGroup]="multi1Form">
        <div class="app-modal-header" data-backdrop="static" data-keyboard="false">
           <h4 class="modal-title">Modal 1</h4>
           <button type="button" class="close basic-close" (click)="modalMulti1.hide()">
           <span aria-hidden="true">&times;</span>
           </button>
        </div>
        <div class="app-modal-body" data-backdrop="static" data-keyboard="false">
           <div class="row">
              <div class="col-sm-12">
                 <h4 class="sub-title">First Name</h4>
                 <!-- <form> -->
                 <div class="form-group row">
                    <div class="col-sm-12">
                       <input class="form-control form-control-md" formControlName="fname" [(ngModel)]="item.fname"  placeholder="First name" type="text">
                    </div>
                 </div>
                 <!-- </form> -->
              </div>
              <div class="col-sm-12">
                 <h4 class="sub-title">Last Name</h4>
                 <!-- <form> -->
                 <div class="form-group row">
                    <div class="col-sm-12">
                       <input class="form-control form-control-md" formControlName="lname" [(ngModel)]="item.lname"  placeholder="Last name" type="text">
                    </div>
                 </div>
                 <!-- </form> -->
              </div>              
           </div>
        </div>
        <div class="app-modal-footer">
           <button type="button" class="btn btn-default waves-effect " (click)="modalMulti1.hide()">Close</button>
           <button data-toggle="modal" [disabled]='!multi1Form.valid' (click)="modalMulti2.show(); modalMulti1.hide();" class="btn btn-primary waves-effect waves-light">Next</button>
        </div>
     </form>

component.ts

import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
import {ToastData, ToastOptions, ToastyService} from 'ng2-toasty';
import {transition, trigger, style, animate} from '@angular/animations';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import swal from 'sweetalert2';
// import { FormsModule } from '@angular/forms';


@Component({
  selector: 'app-popup-validation-wizard',
  templateUrl: './popup-validation-wizard.component.html',
  styleUrls: ['./popup-validation-wizard.component.css',
  '../../../../../node_modules/ng2-toasty/style-default.css',
  '../../../../../node_modules/ng2-toasty/style-material.css',
  '../../../../../node_modules/ng2-toasty/style-bootstrap.css',],
  encapsulation: ViewEncapsulation.None,
})

export class PopupValidationWizardComponent implements OnInit {

  multi1Form: FormGroup;

  constructor() {}

  ngOnInit() {
    this.checkForm();
  }

  private checkForm() {
    this.multi1Form = new FormGroup({
      fname: new FormControl('Asif', [Validators.required, Validators.minLength(2), Validators.maxLength(15)]),
      lname: new FormControl('', [Validators.required, Validators.minLength(2), Validators.maxLength(15)]),
    });
  }
}

我在app.module.ts文件中导入了FormsModule，但在控制台中仍然出现了抛出错误，我无法导航到该HTML页面。 这是什么解决方案？或任何解决此问题的替代方法 我目前正在使用angular 4和typescript 2.x

Answer 1

如下更新app.module.ts