Отображение компонента в модальном всплывающем теле в угловом формате 4 с помощью h ng-bootstrap4 - PullRequest
Новая
       27

Отображение компонента в модальном всплывающем теле в угловом формате 4 с помощью h ng-bootstrap4

0 голосов
/ 14 мая 2018

Моя цель - проверить реактивную форму в angular 4 в компоненте скажем MyFormComponent через модальное всплывающее окно ng-bootstrap4. После отправки поля будут правильно проверены и отправлены на консоль. Но я хочу показать форму как часть модального всплывающего окна. Таким образом, пользователь увидит кнопку для запуска модального всплывающего окна. При нажатии откроется всплывающее окно и отобразится форма, созданная в 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);
}

1 Ответ

0 голосов
/ 14 мая 2018

В вашем родительском компоненте: 

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

Если вам нужны какие-либо разъяснения, просто дайте мне знать.

...