Question

我正在使用Angular 5和Bootstrap3。我的一种形式是通过电子邮件发送输入字段的内容，并且还包含一个模式。我想在服务器成功或错误响应时触发模式。我试图用* ngIf触发，但是它不起作用。这是HTML的一部分：

<div class="container">
  <form>
    <div>
      <input></input> 
    </div>
  </form>

<div *ngIf="emailSuccess" #modalInfo class="modal fade" id="modal">
modal body
</div>

这是我的.ts文件的一部分：

sendEmail(data) {
    this.appService.sendEmail(data.myForm.value).subscribe((data) => {
      console.log('data', data);
      if (data.success) {
        this.emailSuccess = true;
        this.messageHeader = 'Thank You';
        this.messageBody = 'We received your email';
        this.myForm.reset();
      } else if (data.error) {
        this.emailSuccess = false;
        this.messageHeader = 'Error';
        this.messageBody = 'Something went wrong. Please, check your form and try again';
      }
    });
  }

sendEmail（）在以下情况上更容易触发

：

<button type="button" (click)="sendEmail(this)" class="btn btn-primary " [disabled]="!myForm.valid">Submit</button>

Answer 1

无论发送成功还是带有正确消息的错误，我都希望显示模式信息。因此，解决我的问题的方法是将一个模式触发器连接到 Submit 按钮。

之前的代码：

<button type="button" (click)="sendEmail(this)" class="btn btn-primary " [disabled]="!myForm.valid">Submit</button>

修改后的代码：

<button type="button" (click)="sendEmail(this)" class="btn btn-primary" data-toggle="modal" href="#modal" [disabled]="!maintenanceForm.valid">Submit</button>

提交表单时在Angular 5中触发模态

1 个答案: