How can I incorporate an input form into my component while constructing a form?
<div class="row">
<div class="col-md-6 offset-md-3 text-center>
<h2> Login Form </h2>
<form (ngSubmit)="OnSubmit(login.value,password.value)" #loginForm="ngForm">
<div class="form-group">
<label for="exampleInputEmail1">Login</label>
<input type="text" class="form-control" id="exampleInputEmail1" ngModel name="login" aria-describedby="emailHelp" placeholder="Login">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" required ngModel name="password" placeholder="Password">
</div>
<!---->
<button type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid">Submit</button>
</form>
</div>
</div>
This is a straightforward login form that corresponds with the login.component.ts class.
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpErrorResponse } from '@angular/common/http';
import { UserService } from '../auth/user.services';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
ngForm: NgForm;
isLoginError : boolean = false;
constructor(private userService: UserService, private router: Router) { }
ngOnInit() {
}
// Execute this when submit login form
OnSubmit(login,password){
//this.userService.login(userName,password).subscribe((data : any)=>{
// localStorage.setItem('userToken',data.access_token);
console.log('Submit login form: login => '+login+' password => '+password );
}
}
Here is my app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule} from '@angular/forms';
import { HttpModule } from '@http/http';
import { AppComponent } from './app.component';
import { AppNavbarComponent } from './app-navbar/app-navbar.component';
import { LoginComponent } from './login/login.component';
import { AppRoutingModule } from './/app-routing.module';
import { HomeComponent } from './home/home.component';
import { MonitoringComponent } from './monitoring/monitoring.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { UserService } from './auth/user.services';
import { AuthGuard } from './auth/auth.guard';
import { AuthInterceptor } from './auth/auth.interceptor';
@NgModule({
declarations: [
AppComponent,
AppNavbarComponent,
LoginComponent,
HomeComponent,
MonitoringComponent
],
imports: [
BrowserModule,
FormsModule,
NgbModule.forRoot(),
AppRoutingModule,
HttpClientModule,
HttpModule
],
providers: [UserService,AuthGuard,HttpClientModule
,
{
provide : HTTP_INTERCEPTORS,
useClass : AuthInterceptor,
multi : true
}],
bootstrap: [AppComponent]
})
export class AppModule { }
Upon clicking the submit button on the login form, the login and password fields return as undefined. What am I overlooking?