Angular 使用ng-bootstrap4以角度4显示模态弹出体中的组件

我的目标是通过ng-bootstrap4模式弹出窗口验证组件（比如MyFormComponent）中angular 4中的反应形式。 提交后，字段将被正确验证并提交到控制台。但是我想将表单显示为模态弹出窗口主体的一部分。因此，用户将看到一个按钮来触发模式弹出窗口。单击弹出窗口将打开并显示在MyFormComponent中创建的表单。提交时，必须对表单进行验证，如果验证，则会对数据进行处理

我能够从控制台中的字段中获取值。但不知道如何将组件显示为一个模态体，并在提交时进行验证

app.component.html

<div class="container">

<h2></h2>
    <button type="button" class="btn btn-primary" data-toggle="modal" data- 
target="#myModal">
       Open form
    </button>

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title">Provide your information</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <div class="modal-body">
         <form (ngSubmit)="onSubmit(modalform)" #modalform="ngForm" > 

              <div  class="form-group">
              <label for="field1" class="row">
                <span class="col-sm-4">Name
                  <span class="required">*</span>
                </span>

                <input type="text" #username 
                class="form-control col-sm-8 input-field"  ngModel id="nameid" 
                name="username" value="" />                  
              </label>
              </div>
              <label for="field2" class="row">
                <span class="col-sm-4">Email
                  <span class="required">*</span>
                </span>
                <input type="text" class="input-field form-control col-sm-8" ngModel name="email"
                 value="" />
              </label>
              <label class="row">
                <span class="col-sm-4">Telephone</span>
                <input type="text" class="col-sm-2 tel-number-field" ngModel name="tel_no_1" value="" maxlength="4" />-
                <input type="text" class="col-sm-2 tel-number-field" ngModel name="tel_no_2" value="" maxlength="4" />-
                <input type="text" class="col-sm-2 tel-number-field" ngModel name="tel_no_3" value="" maxlength="4" />
              </label>
              <label for="field4" class="row">
                <span class="col-sm-4">Regarding</span>
                <select name="regarding" ngModel class="form-control col-sm-8 select-field">
                  <option value="General Question">General</option>
                  <option value="Advertise">Advertisement</option>
                  <option value="Partnership">Partnership</option>
                </select>
              </label>
              <label for="field5" class="row">
                <span class="col-sm-4" >Message
                  <span class="required">*</span>
                </span>
                <textarea name="message" ngModel class=" form-control col-sm-8 textarea-field"></textarea>
              </label>

              <label>
                <span>&nbsp;</span>
                <input class="btn" style="background-color: #182c3a" type="submit"  value="Submit" />
              </label>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

---

在父组件中：

import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';

在构造函数中：

constructor(        
    private _modalService: NgbModal
) { }

显示您的模式：

onAdd() {
    const modalRef = this._modalService.open(RentACarDetailComponent, { size: 'lg' });
    modalRef.componentInstance.car = this.car;
    modalRef.componentInstance.pageTitle = 'New vehicle';
    modalRef.result.then((result) => {
        if (result) {                
            console.log(result)
        }
    },
        (reason) => { });
    }

import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

    constructor(
        public activeModal: NgbActiveModal
    ) { }


    onClose() {
        this.activeModal.close(false);
    }

    onDismiss() {
        this.activeModal.dismiss(false);
    }

    onResult() {
        // do something with you data and send result
        this.activeModal.close(this.car);
    }

在您的模式中：

onAdd() {
    const modalRef = this._modalService.open(RentACarDetailComponent, { size: 'lg' });
    modalRef.componentInstance.car = this.car;
    modalRef.componentInstance.pageTitle = 'New vehicle';
    modalRef.result.then((result) => {
        if (result) {                
            console.log(result)
        }
    },
        (reason) => { });
    }

import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

    constructor(
        public activeModal: NgbActiveModal
    ) { }


    onClose() {
        this.activeModal.close(false);
    }

    onDismiss() {
        this.activeModal.dismiss(false);
    }

    onResult() {
        // do something with you data and send result
        this.activeModal.close(this.car);
    }

如果你需要任何澄清，请告诉我