Question

如何在我的组件中获取输入表单。我正在建立一个表格：

<div class="row">

<div class="col-md-6 offset-md-3 text-center">
  <h2> Formulaire de connexion </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="Mot de passe">
  </div>
<!--  <button type="submit" class="btn btn-primary" (click)="login()" [disabled]="!loginForm.form.valid">Connexion</button>
-->
<button type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid">Connexion</button>

</form>
</div>

</div>

一个简单的登录表单，我有login.component.ts类

    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 );

}

}

她是我的app.module.ts：

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 '@angular/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 { }

当我点击表单上的提交按钮时，登录名和密码未定义。我错过了什么？

Answer 1

模板：

<form (ngSubmit)="OnSubmit(loginForm)" #loginForm="ngForm">

更新你的OnSubmit（）：

 OnSubmit(form){
            //this.userService.login(userName,password).subscribe((data : any)=>{
            // localStorage.setItem('userToken',data.access_token);
            //console.log('Submit login form: login => '+login+' password => '+password );
         console.log(form.value);

    }

另外，您没有绑定ngModel输入元素：

<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="exampleInputEmail1">Login</label>
    <input type="text" class="form-control" id="exampleInputEmail1"  [(ngModel)]="login" name="login"  aria-describedby="emailHelp" placeholder="Login">
  </div>

login和password应该在组件类中：

 export class LoginComponent implements OnInit {
      ngForm: NgForm;
      login: string;
      password: string;
      isLoginError : boolean = false;
      constructor(private userService: UserService, private router: Router) { }

    ...

}

Angular5：如何在compent.ts中获得表单值？

1 个答案: