Angular2 и Bootstrap: как мне активировать (отправить) событие, а также закрыть мода на форму submit?

Question

У меня есть форма, размещенная в загрузочном модуле. Когда пользователь отправляет форму, событие (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

Его долгое время я занимался AngularJS, но я предполагаю, что вы пытаетесь достичь, мгновенно обновляя свой DOM при отправке, так что вот мое предложение, почему бы вам не использовать ajax вместо сырой отправки и сделать 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; 
 
});

Нечто подобное будет сортировать вас P.S. Я не отлаживал этот код, и надеюсь, что это поможет.

Answer 2

его непонятно, какие угловые формы 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> 

и компоненты должны быть, как этот импорт {Компонент} из

'@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> 

я надеюсь, что это поможет :)