Can't bind to 'ngModel' since it isn't a known property of 'input' in angular 11 while i have already import FormsModule

0
votes

i am facing an using in angular 11, Can't bind to 'ngModel' since it isn't a known property of 'input' in angular 11 while i have already import FormsModule too.

i can not understand what is the problem

this is my code

Please help me

Thanks in advance...

**app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { AppComponent } from './app.component';
import { RoutesRoutingModule } from './routes-routing.module';
import { FormlyModule } from '@ngx-formly/core';
import { ToastrModule } from 'ngx-toastr';
import { MatChipsModule } from '@angular/material/chips';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { DatePipe } from '@angular/common';


const COMPONENTS = [];

const COMPONENTS_DYNAMIC = [];

@NgModule({
  declarations: [AppComponent, ...COMPONENTS, ...COMPONENTS_DYNAMIC,],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    HttpClientModule,
    ThemeModule,
    MatDatepickerModule,
    FormlyModule.forRoot(),
    ToastrModule.forRoot(),
    MatDialogModule,
    MatExpansionModule,
    MatInputModule,
  ],
  providers: 
    DatePipe,
    StoreService,
    { provide: HTTP_INTERCEPTORS, useClass: DefaultInterceptor, multi: true },
    { provide: MAT_DIALOG_DATA, useValue: {} },
    { provide: MatDialogRef, useValue: {} },

    StartupService,
    {
      provide: APP_INITIALIZER,
      useFactory: StartupServiceFactory,
      deps: [StartupService],
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
  entryComponents: []
})
export class AppModule {

  constructor() {
  }

}

** Login.Component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { ApiService } from 'app/common/services/api.service';
@Component({
  selector: 'app-login',
  templateUrl: 'login.component.html',
  styleUrls: ['login.component.css']
})

export class LoginComponent implements OnInit {

  username: string;
  password: string;
  ipAddress: string;
  key_id: string;
  isValidUser: any;
  defaultPassword: any;
  GoForValidate = false;


  constructor(private router: Router,
    private http: HttpClient,
    private apiService: ApiService,
    private activatedRoute: ActivatedRoute,
    private loginService: LoginService, 
    private storeService: StoreService) {  }

  ngOnInit() {
  }

}

** Login.component.html**

<div class="auth-wrapper">
    <div class="container-fluid h-100">
        <div class="row flex-row h-100 bg-white">
            <div class="authentication-form">
                <div class="logo-centered">
                    <a href="#/"><img src="./assets/images/brand.png"
                             height="22"></a>&nbsp;
                    <strong>Replining Tool</strong>
                </div>
                <h3>Sign In</h3>
                <br>
                <form>
                    <div class="form-group">
                        <input class="form-control form-control-lg" id="username" type="text"
                               placeholder="Username" autocomplete="off"
                               [(ngModel)]="username" [ngModelOptions]="{standalone: true}">
                        <i class="ik ik-user"></i>
                    </div>
                    <div class="form-group">
                        <input class="form-control form-control-lg" id="password" type="password"
                               placeholder="Password"
                               [(ngModel)]="password" [ngModelOptions]="{standalone: true}">
                        <i class="ik ik-lock"></i>
                        <input type="hidden" name="key" id="key" value={{key_id}}>
                    </div>
                    <button type="submit" (click)="login()"
                            mat-raised-button color="warn"><b>Sign in</b></button>
                </form>
            </div>
        </div>
    </div>
</div>
2
angular

2 Answers

0
votes

you need to put your component also into the declarations array (using your varaible), like this:

const COMPONENTS = [
    LoginComponent
];
0
votes

Add LoginComponent in declaration array in app.module.ts

declarations: [AppComponent, ...COMPONENTS, ...COMPONENTS_DYNAMIC, LoginComponent ],