我无法提交表格

时间:2018-07-17 02:24:07

标签: angular typescript

这是我的角形。我正在使用模板驱动的方法。当我单击ngSubmit时,我正在调用一个函数,但没有被调用。我正在尝试打印某些东西,但是没有得到调用。

 <div class="container">
      <div class="col-sm-6">
        <form #loginForm="ngForm" (ngSubmit)="loginUser(loginForm)">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" class="form-control" name="username" id="username" [(ngModel)]="username" required>
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="text" class="form-control" name="password" [(ngModel)]="password" id="password" required>
          </div>

          <button type="button" class="btn btn-primary">Submit</button>

        </form>
  </div>
</div>

这是我的TS文件。

 import { Component } from '@angular/core';
    import { NgForm } from '@angular/forms';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      username='';
      password = '';
      loginUser(form: NgForm) {
        console.log(form.value);
    }
    }

I have added formsModule to app.module.ts. In console is shows no error. 

1 个答案:

答案 0 :(得分:2)

将按钮类型更改为 submit

 <button type="submit" class="btn btn-primary">Submit</button>