ngSubmit 事件未引发答案

【问题标题】：ngSubmit event not raisedngSubmit 事件未引发
【发布时间】：2018-10-18 11:51:21
【问题描述】：

我有以下简单的角度模板驱动表单，当我使用 Angular 材质组件时它不起作用（ngSubmit 事件似乎没有引发），但在使用引导样式控件时同样有效...数据模型绑定在这两种情况下都有效，但对于材料组件，不会调用“authenticateUser”方法。我肯定在这里遗漏了一些东西....任何帮助表示赞赏。

<div class ="login-container">
<form #loginForm="ngForm" (ngSubmit)="authenticateUser(loginForm)" >
    <div>
        <mat-form-field >
          <input matInput placeholder="Username" name="username" [(ngModel)]="username"  required>
        </mat-form-field>
    </div>
    <div>
        <mat-form-field>
          <input matInput placeholder="Password" name="password" [(ngModel)]="password" type="password" required>
        </mat-form-field>
    </div>  
</form>
<button mat-raised-button color="primary">Login</button>
<div style="margin-top: 5%">
    <a routerLink="/changepassword">Change Password</a>
</div>

Angular 生成表单模型：{{loginForm.value | json}}

谢谢

jcm

【问题讨论】：

尝试添加按钮 type="submit" 并将按钮放在表单标签内
谢谢，您的更正现在可以使用了。

标签： angular

【解决方案1】：

按钮类型应该是submit并且应该在表单里面

<form #loginForm="ngForm" (ngSubmit)="authenticateUser(loginForm)" >
    <div>
        <mat-form-field >
          <input matInput placeholder="Username" name="username" [(ngModel)]="username"  required>
        </mat-form-field>
    </div>
    <div>
        <mat-form-field>
          <input matInput placeholder="Password" name="password" [(ngModel)]="password" type="password" required>
        </mat-form-field>
    </div>  

<button mat-raised-button color="primary" type="submit">Login</button>
</form>

【讨论】：

谢谢萨奇拉。它现在可以工作了，尽管我不必添加类型 =Submit。
如果有多个按钮，表单需要识别触发哪个按钮。所以我们需要指定一个类型提交到一个按钮

【解决方案2】：

在您的 .html 中，

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)" id="ngForm">
  ....
</form>

<button form="ngForm" mat-icon-button type="submit" [disabled]="myForm.invalid">

在您的 .ts 中，

request : any;

onSubmit(form: FormGroup) {
    this.request = this.myForm.value;
    if (form.value.id != null) {
      this.service
        .put(this.request )
        .subscribe(
          () => {
          },
          err => {
            console.log("Error Occurred." + JSON.stringify(err));
          }
        );
    } else {
      this.service
        .create(this.request)
        .subscribe(
          () => {
            this.snackBarService.success("Successfully saved.");
          },
          err => {
            console.log("Error Occurred" + JSON.stringify(err));
          }
        );
    }
  }

【讨论】：

谢谢。就像将按钮保留在
标签之外的想法。
@JCMenon 太棒了！

【解决方案3】：

你submitbutton必须在form内

<div class ="login-container">
<form #loginForm="ngForm" (ngSubmit)="authenticateUser(loginForm)" >
    <div>
        <mat-form-field >
          <input matInput placeholder="Username" name="username" [(ngModel)]="username"  required>
        </mat-form-field>
    </div>
    <div>
        <mat-form-field>
          <input matInput placeholder="Password" name="password" [(ngModel)]="password" type="password" required>
        </mat-form-field>
    </div>  
    <button mat-raised-button color="primary" type="submit" >Login</button>
</form>

<div style="margin-top: 5%">
    <a routerLink="/changepassword">Change Password</a>
</div>

【讨论】：

谢谢 Sunil，当按钮放置在
中并且没有 type=submit
时，它可以工作
很高兴听到这个消息：) 更新了答案。