Question

我有一个表单放在bootstrap模式中。当用户提交表单时，(submit)事件应该触发addArticle($event)并且模式应该关闭。

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <form class="" style="text-align: center" (submit)="addArticle($event)">

        <div class="modal-header">

        </div>

         <div class="modal-body">
            <input type="text" [(ngModel)]="_title" name="_title" />
             .......
        </div>

         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            <button type="submit"  class="btn btn-primary">Create Article</button>
        </div>

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

如果我这样做：

<button type="submit" class="btn btn-primary" data-dismiss="modal">Create Article</button>

它只是关闭模态，但不会触发(submit)事件表格，这与关闭模态窗口相同。

Answer 1

不清楚你正在使用哪种角度2形式。

用于模板驱动表单

<form #signupForm="ngForm" (ngSubmit)="registerUser(signupForm)">
  <label for="email">Email</label>
  <input type="text" name="email" id="email" ngModel>

  <label for="password">Password</label>
  <input type="password" name="password" id="password" ngModel>

  <button type="submit">Sign Up</button>
</form>

和组件应该像

中的import {Component}一样

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

@Component({
  selector: 'signup-form',
  templateUrl: 'app/signup-form.component.html',
})
export class SignupForm {
  registerUser(form: NgForm) {
    console.log(form.value);
    // {email: '...', password: '...'}
    // ...
  }
}

我在我的一种形式中使用了模态但是以反应形式。这是你应该做什么来关闭弹出窗口和同时调用提交功能

 <div class="modal-body">
      <form [formGroup]="addForm" class="box">
            <input type="text" placeholder="Enter username" formControlName="username"  />
            <input type="text" placeholder="Enter Email Address" formControlName="email"  />
            <input type="password" placeholder="Enter Password" formControlName="password"  />
            <input type="password" placeholder="Confirm Password" name="password2" formControlName="password2"  />
            <div class='error' *ngIf="addForm.controls.password2.touched">
            <div class="alert-danger errormessageadduser" *ngIf="addForm.hasError('mismatchedPasswords')">
                Passwords do not match
                </div>
             </div>
             <br/>
            <button type="submit" data-dismiss="modal" (click)="addUser()" class="btn btn-primary"> Add User </button>
      </form>
  </div>

我希望这会有所帮助：）

Answer 2

我做了AngularJS已经很久了，但我猜你想要实现的是在提交时立即更新你的DOM，所以这是我的建议，你为什么不使用ajax而不是raw提交并使ajax不能仅在提交成功时才进行异步和更新。以下是如何做到这一点：

$('.form-class/id').submit(function(e) {
  $.ajax('url-here', {
    async: false,
    data: $('.your-form').serialize(), //also encode to json, works fine
    success: function() {
      //message for success
      $('.modal-class/id').modal('hide');
      addArtical(e);
    },
    error: function() {
      //message for error
    }
  });
  
  return false;
});

这样的事情会让你感到厌烦附：我没有调试此代码，我希望这会有所帮助。

Angular2和Bootstrap：如何在表单提交时激活（提交）事件以及关闭模式？

2 个答案: