使用hng-bootstrap4

Question

我的目标是通过ng-bootstrap4模式弹出窗口验证组件中角度4的反应形式，如MyFormComponent。 提交后，字段将被正确验证并提交给控制台。但是我希望将表单显示为模式弹出窗口的一部分。因此用户将看到一个触发模态弹出窗口的按钮。单击时，弹出窗口将打开并显示在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>

app.component.ts

onSubmit(form){
    console.log("adding form values ");
    console.log(form.value.username);
    console.log(form.value.email);

   console.log(form.value.tel_no_1+form.value.tel_no_2+form.value.tel_no_3);
   console.log(form.value.regarding);
   console.log(form.value.message);
}

Answer 1

在您的父组件中：

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);
    }

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