我无法在 ngb 模态 Angular 7 中提交 angular 反应形式

Question

我正在尝试在 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;
      }
  )
}

未抛出任何错误或未发生任何操作，点击无效。我该如何解决这个问题？

Answer 1

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

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

'content'指的是modal的模板引用

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

我无法在 ngb 模态 Angular 7 中提交 angular 反应形式

I cannot submit angular reactive form in a ngb modal Angular 7

html

ng-bootstrap

angular

angular-reactive-forms