我无法以 ngb 模态 Angular 7 提交角度反应形式答案

【问题标题】：I cannot submit angular reactive form in a ngb modal Angular 7我无法以 ngb 模态 Angular 7 提交角度反应形式
【发布时间】：2019-08-07 03:39:25
【问题描述】：

我正在尝试在 NgbModal 中创建一个表单，我可以打开一个初始化表单但是当我按下提交按钮时，没有任何反应。

这里是 HTML 代码；

     <ng-template #content let-c="close" let-d="dismiss">
        <div class="modal-header">
            <h4 class="modal-title" id="modal-basic-title">Give your feedback</h4>
        </div>
        <form [formGroup]="addForm" (ngSubmit)="onSubmit()">
            <div class="modal-body">
                <div class="form-group">
                    <label>Title</label>
                    <input type="text" formControlName="title" class="form-control" [ngClass]="{ 'is-invalid': submitted && addForm.controls.title.errors }" />
                    <div *ngIf="submitted &&  addForm.controls.title.errors" class="invalid-feedback">
                        <div *ngIf=" addForm.controls.title.errors">* Title is required</div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Comment</label>
                    <textarea type="text" rows="4" cols="50" formControlName="text" class="form-control" [ngClass]="{ 'is-invalid': submitted &&  addForm.controls.text.errors }"></textarea>
                    <div *ngIf="submitted &&  addForm.controls.text.errors" class="invalid-feedback">
                        <div *ngIf=" addForm.controls.text.errors">* Comment is required</div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Rate</label><br>
                    <ngb-rating formControlName="rate"  max="5" [starTemplate]="rate">
                    </ngb-rating>
                </div>
            </div>
            <div class="modal-footer">
                <button style="margin-left: 5px" type="submit" class="btn btn-success pull-right">Save</button>
                <button type="button" class="btn btn-outline-danger pull-right" (click)="c('cancelled')">Cancel</button>
            </div>
            </form>
    </ng-template>

    <ng-template #rate let-fill="fill" let-index="index">
        <span class="star" [class.filled]="fill === 100">&#9733;</span>
    </ng-template>

<ng-template #rate let-fill="fill" let-index="index">
    <span class="star" [class.filled]="fill === 100">&#9733;</span>
</ng-template>

<button  *ngIf="authService.currentUserValue" type="button" style="height: 50px" (click)="open(content)" class="btn btn-outline-primary pull-right" data-toggle="modal">
        give your feedback
    </button>

我的打开按钮工作正常，我也可以关闭模式，但不知何故保存不起作用。另外我的 onSubmit 方法是这样的；

onSubmit() {
  this.submitted = true;

  const data = {
      productId:this.currentProduct.productId,
      userId: this.authService.currentUserValue.userId,
      title: this.addForm.controls.title.value,
      text: this.addForm.controls.text.value,
      rating: this.addForm.controls.rating.value,
  };
  this.loading = true;
  this.commentService.addComment(data).subscribe(
      data => {
          this.success = true;
          this.router.navigate(['/']);
      },
      error => {
          this.error = error;
          this.loading = false;
      }
  )
}

未引发错误或未发生任何操作，单击不起作用。我该如何解决这个问题？

【问题讨论】：

打开函数基本是：this.modalService.open(content);
您的代码中有太多未知的依赖组件。您介意创建一个最小的 StackBlitz 示例来复制该问题吗？

标签： html angular angular-reactive-forms ng-bootstrap

【解决方案1】：

您的组件不知道要关闭哪个模式。您需要将 NgbModal 引用传递给提交函数。

 <form [formGroup]="addForm" (ngSubmit)="onSubmit(content)">

'content'是指模态框的模板引用。

onSubmit(modal: NgbModal) {
    modal.dismiss(); // Add wherever you need
}

提醒一下，如果你...

<form [formGroup]="addForm" (ngSubmit)="onSubmit()" #f="ngForm"> /* Last attribute added */

然后在构造函数前添加一个ViewChild...

@ViewChild('f') ngForm: NgForm;

您将能够通过this.ngForm.submitted 访问 ngForm 的提交状态，而不是自己手动设置它们。 Angular docs for NgForm

【讨论】：