typescript - چگونه فرم مودال Bootstrap 3 را در Angular 5 اعتبارسنجی و بسته کنیم؟

من چند ورودی متنی دارم که نیاز دارم آنها را در یک فرم مودال بوتاسترپ 3 اعتبارسنجی کنم و از Angular 5 استفاده میکنم. میخواهم فرم مودال فقط در صورتی بسته شود که همه اعتبارسنجیها موفق باشند. اگر اعتبارسنجیها شکست بخورند، باید همانگونه باقی بماند، هنگام کلیک روی یک دکمه.

Plnkr: https://plnkr.co/edit/VgLArC3RkKMgXOhAPGei?p=preview

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>On click of validate, this modal form should not get closed if text input is empty. It should get closed only if text input is not empty.</p>
        <input type="text">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Validate</button>
      </div>
    </div>

  </div>
</div>

میخواهم بدانم چگونه میتوانیم از بسته شدن فرم مودال در انگولار با استفاده از تایپاسکریپت جلوگیری کنیم. از کمکتان سپاسگزارم.

پاسخ شماره ۱

شما باید یک ارجاع به مودال باز شده ذخیره کنید و از آن ارجاع برای بستن مودال استفاده کنید. NgbModalRef همانطور که در مستندات توضیح داده شده است: [https://ng-bootstrap.github.io/#/components/modal/api][1]

<ng-template #content let-d="dismiss">
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close"  (click)="dismiss()">
      <span aria-hidden="true">&times;</span>
    </button>

.....

import  NgbModal, NgbModalRef

public modelRef: NgbModalRef

openLg(content) {
   this.modelRef =  this.modalService.open(content);
  }

 dismiss() {
    this.modelRef.close();
  }

.....

پاسخ شماره ۲

شما میتوانید به سادگی از $ ('#myModal').modal('hide'); استفاده کنید

هر زمان که بخواهید مودال را مخفی کنید. من کد را بهروزرسانی کردهام، بررسی خواهد کرد که آیا مقدار ورودی وجود دارد یا نه، اگر وجود داشته باشد، فقط در آن صورت بسته خواهد شد.

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ViewChild, ElementRef} from '@angular/core';


@Component({
  selector: 'my-app',
  template: `
   <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>On click of validate, this modal form should not get closed if text input is empty. It should get closed only if text input is not empty.</p>
        <input type="text" #textValue>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="textvalue(textValue.value)">Validate</button>
      </div>
    </div>

  </div>
</div>
  `,
})
export class App {

textvalue(value){
  if(value !== ''){
    $('#myModal').modal('hide');

  }else{
    console.log("please enter value");
  }

}

  name:string;
  textValuebol : false;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }


}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

امیدوارم این کمک کند.