0

Estoy utilizando Angular 7 + Boostrap 4 y estoy abriendo un modal el cual está llamando a un componente a parte para ser mostrado en el cuerpo del modal. El contenido que se está llamando por medio de este componente es un formulario, pero al dar click en cancelar o guardar no consigo cerrar el modal.

Sería de gran ayuda si alguien puede colaborarme con esto.

*Esta es la imagen del modal que estoy abriendo llamando otro componente:

introducir la descripción de la imagen aquí

*Este sería el formulario que hay en el componente llamado desde el modal:

introducir la descripción de la imagen aquí

*Método que está en el component.ts de este formulario donde la variable valdría:

modal: NgbModalRef;

introducir la descripción de la imagen aquí

*Se añade código html del botón que abre el modal:

<button type="button" class="btn-shadow d-inline-flex align-items-center btn btn-primary" (click)="openModal(createNewEvent)">
    <i class="fa fa-plus mr-2" aria-hidden="true"></i>
    Crear Evento
  </button>

*Se añade código html donde se abre el modal:

<ng-template #createNewEvent  let-modal="dismiss">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Nuevo evento</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal('Close')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <app-add-new-evento-form (eventoNewRegistry)="eventoNewRegistry($event)"></app-add-new-evento-form>
</ng-template>

*Se añade el componente (formulario) que abre el modal:

import {Component, OnInit, Output, EventEmitter, Input} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms"; //Construir,grupo, validar formulario
import {NgbModalRef, ModalDismissReasons, NgbDateStruct} from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: 'app-add-new-evento-form',
  templateUrl: './add-new-evento-form.component.html',
  styleUrls: ['./add-new-evento-form.component.sass']
})
export class AddNewEventoFormComponent implements OnInit {

  @Input() dismiss;
  @Output() eventoNewRegistry: EventEmitter<any> = new EventEmitter(); //Salida de campos del formulario
  eventoNewRegistryForm: FormGroup; //Formulario
  modal: NgbModalRef;
  modelFechaEnd: NgbDateStruct;
  modelFechaInit: NgbDateStruct;
  fechaInicial: number;
  fechaFinal: number;

  constructor(public fb: FormBuilder) {
  }

  ngOnInit() {
    /**
     * @desc Se crea y se valida el formulario
     */
    this.eventoNewRegistryForm = this.fb.group({
      titulo: ['', Validators.required],
      info: ['', Validators.required],
      fechaInicio: ['', Validators.required],
      fechaFin: ['', Validators.required],
      valor: ['', Validators.required],
      cupos: ['', Validators.required],
      categoria: ['', Validators.required],
      clasificacion: ['', Validators.required],
    });
  }

  closeModal() {
    this.modal.close();
  }

  onSubmit(form, valid: boolean) {
    if (valid) {
      //Se obtiene la fecha inicial y se convierte a milisegundos
      this.fechaInicial = new Date(
        form.fechaInicio.year,
        form.fechaInicio.month - 1,
        form.fechaInicio.day
      ).getTime();

      //Se obtiene la fecha final y se convierte a milisegundos
      this.fechaFinal = new Date(
        form.fechaInicio.year,
        form.fechaInicio.month - 1,
        form.fechaInicio.day
      ).getTime();

      //Se crea formulario para enviar
      let formulario = {
        titulo: form.titulo,
        info: form.info,
        valor: form.valor,
        cupos: form.cupos,
        categoria: form.categoria,
        clasificacion: form.clasificacion,
        fechaInicio: this.fechaInicial,
        fechaFin: this.fechaFinal
      };
      this.eventoNewRegistry.emit(formulario);
    }
  }

}
<form novalidate [formGroup]="eventoNewRegistryForm" class="needs-validation"
      (ngSubmit)="onSubmit(eventoNewRegistryForm.value, eventoNewRegistryForm.valid)">

  <div class="modal-body">
    <div class="alert alert-warning">
      <span>Mediante esta acción podrá crear un nuevo evento.</span>
    </div>
  </div>

  <div class="alignColums">
    <!--PRIMERA COLUMNA-->
    <div class="col-md-7 col-sm-7">

      <div class="form-group">
        <label class="col-sm-4">Titulo:</label>
        <div class="col-sm-8">
          <input formControlName="titulo" type="text" class="form-control" id="titulo"
                 placeholder="Nombre Evento"
                 required>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4">Información:</label>
        <div class="col-sm-8">
         <textarea rows="1" formControlName="info" type="text" class="form-control" id="info"
                   placeholder="Información Evento"
                   required style="overflow: hidden; height: 41px; margin-top: 0px;"></textarea>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4">Fecha Incio:</label>
        <div class="col-sm-8">
          <div class="input-group">
            <input class="form-control" name="fechaInicio" formControlName="fechaInicio" placeholder="yyyy-mm-dd"
                   [(ngModel)]="modelFechaInit"
                   ngbDatepicker #fechaInicio="ngbDatepicker">
            <div class="input-group-append">
              <button class="btn btn-primary" (click)="fechaInicio.toggle()" type="button">
                <i class="fa fa-calendar"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4">Categoría:</label>
        <div class="col-sm-8">
          <input formControlName="categoria" type="text" class="form-control" id="categoria"
                 placeholder="Categoria Evento"
                 required>
        </div>
      </div>

    </div>

    <!--SEGUNDA COLUMNA-->
    <div class="col-md-7 col-sm-7">

      <div class="form-group">
        <label class="col-sm-4" for="valor">Valor:</label>
        <div class="col-sm-8">
          <input formControlName="valor" type="text" class="form-control" id="valor"
                 placeholder="Valor Evento"
                 required>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4" for="cupos">Cupos:</label>
        <div class="col-sm-8">
          <input formControlName="cupos" type="number" class="form-control" id="cupos"
                 placeholder="Cupos Evento"
                 required>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4">Fecha Final:</label>
        <div class="col-sm-8">
          <div class="input-group">
            <input class="form-control" name="fechaFin" formControlName="fechaFin" placeholder="yyyy-mm-dd"
                   [(ngModel)]="modelFechaEnd"
                   ngbDatepicker #fechaFin="ngbDatepicker">
            <div class="input-group-append">
              <button class="btn btn-primary" (click)="fechaFin.toggle()" type="button">
                <i class="fa fa-calendar"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4">Clasificación:</label>
        <div class="col-sm-8">
          <select class="form-control" formControlName="clasificacion" type="text" placeholder="Clasificación Evento"
                  required>
            <option disabled selected>*Elija una clasificación</option>
            <option value="ACTIVIDAD">Actividad</option>
            <option value="EVENTO">Evento</option>
          </select>
        </div>
      </div>

    </div>
  </div>

  <div class="modal-footer">
    <button class="btn btn-secondary" aria-label="Close" (click)="closeModal()" type="button">Cancelar</button>
    <button class="btn btn-primary" type="submit" [disabled]="eventoNewRegistryForm.invalid">Guardar</button>
  </div>
</form>

2
  • Andrés, seria bueno que colocaras el código en forma de texto en vez de imagen.
    – YemisiSCG
    el 4 jun. 2019 a las 20:59
  • Hola, ya postee el codigo. gracias el 4 jun. 2019 a las 21:54

1 respuesta 1

0

import {Component, OnInit, Output, EventEmitter, Input} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms"; //Construir,grupo, validar formulario
import {NgbModalRef, ModalDismissReasons, NgbDateStruct} from "@ng-bootstrap/ng-bootstrap";


@Component({
  selector: 'app-add-new-evento-form',
  templateUrl: './add-new-evento-form.component.html',
  styleUrls: ['./add-new-evento-form.component.sass']
})
export class AddNewEventoFormComponent implements OnInit {

  @Input() dismiss;
  @Output() eventoNewRegistry: EventEmitter<any> = new EventEmitter(); //Salida de campos del formulario
  eventoNewRegistryForm: FormGroup; //Formulario
  modal: NgbModalRef;
  modelFechaEnd: NgbDateStruct;
  modelFechaInit: NgbDateStruct;
  fechaInicial: number;
  fechaFinal: number;

  constructor(public fb: FormBuilder) {
  }

  ngOnInit() {
    /**
     * @desc Se crea y se valida el formulario
     */
    this.eventoNewRegistryForm = this.fb.group({
      titulo: ['', Validators.required],
      info: ['', Validators.required],
      fechaInicio: ['', Validators.required],
      fechaFin: ['', Validators.required],
      valor: ['', Validators.required],
      cupos: ['', Validators.required],
      categoria: ['', Validators.required],
      clasificacion: ['', Validators.required],
    });
  }

  closeModal() {
    this.modal.close();
  }

  onSubmit(form, valid: boolean) {
    if (valid) {
      //Se obtiene la fecha inicial y se convierte a milisegundos
      this.fechaInicial = new Date(
        form.fechaInicio.year,
        form.fechaInicio.month - 1,
        form.fechaInicio.day
      ).getTime();

      //Se obtiene la fecha final y se convierte a milisegundos
      this.fechaFinal = new Date(
        form.fechaInicio.year,
        form.fechaInicio.month - 1,
        form.fechaInicio.day
      ).getTime();

      //Se crea formulario para enviar
      let formulario = {
        titulo: form.titulo,
        info: form.info,
        valor: form.valor,
        cupos: form.cupos,
        categoria: form.categoria,
        clasificacion: form.clasificacion,
        fechaInicio: this.fechaInicial,
        fechaFin: this.fechaFinal
      };
      this.eventoNewRegistry.emit(formulario);
    }
  }

}
<form novalidate [formGroup]="eventoNewRegistryForm" class="needs-validation"
      (ngSubmit)="onSubmit(eventoNewRegistryForm.value, eventoNewRegistryForm.valid)">

  <div class="modal-body">
    <div class="alert alert-warning">
      <span>Mediante esta acción podrá crear un nuevo evento.</span>
    </div>
  </div>

  <div class="alignColums">
    <!--PRIMERA COLUMNA-->
    <div class="col-md-7 col-sm-7">

      <div class="form-group">
        <label class="col-sm-4">Titulo:</label>
        <div class="col-sm-8">
          <input formControlName="titulo" type="text" class="form-control" id="titulo"
                 placeholder="Nombre Evento"
                 required>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4">Información:</label>
        <div class="col-sm-8">
         <textarea rows="1" formControlName="info" type="text" class="form-control" id="info"
                   placeholder="Información Evento"
                   required style="overflow: hidden; height: 41px; margin-top: 0px;"></textarea>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4">Fecha Incio:</label>
        <div class="col-sm-8">
          <div class="input-group">
            <input class="form-control" name="fechaInicio" formControlName="fechaInicio" placeholder="yyyy-mm-dd"
                   [(ngModel)]="modelFechaInit"
                   ngbDatepicker #fechaInicio="ngbDatepicker">
            <div class="input-group-append">
              <button class="btn btn-primary" (click)="fechaInicio.toggle()" type="button">
                <i class="fa fa-calendar"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4">Categoría:</label>
        <div class="col-sm-8">
          <input formControlName="categoria" type="text" class="form-control" id="categoria"
                 placeholder="Categoria Evento"
                 required>
        </div>
      </div>

    </div>

    <!--SEGUNDA COLUMNA-->
    <div class="col-md-7 col-sm-7">

      <div class="form-group">
        <label class="col-sm-4" for="valor">Valor:</label>
        <div class="col-sm-8">
          <input formControlName="valor" type="text" class="form-control" id="valor"
                 placeholder="Valor Evento"
                 required>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4" for="cupos">Cupos:</label>
        <div class="col-sm-8">
          <input formControlName="cupos" type="number" class="form-control" id="cupos"
                 placeholder="Cupos Evento"
                 required>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4">Fecha Final:</label>
        <div class="col-sm-8">
          <div class="input-group">
            <input class="form-control" name="fechaFin" formControlName="fechaFin" placeholder="yyyy-mm-dd"
                   [(ngModel)]="modelFechaEnd"
                   ngbDatepicker #fechaFin="ngbDatepicker">
            <div class="input-group-append">
              <button class="btn btn-primary" (click)="fechaFin.toggle()" type="button">
                <i class="fa fa-calendar"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4">Clasificación:</label>
        <div class="col-sm-8">
          <select class="form-control" formControlName="clasificacion" type="text" placeholder="Clasificación Evento"
                  required>
            <option disabled selected>*Elija una clasificación</option>
            <option value="ACTIVIDAD">Actividad</option>
            <option value="EVENTO">Evento</option>
          </select>
        </div>
      </div>

    </div>
  </div>

  <div class="modal-footer">
    <button class="btn btn-secondary" aria-label="Close" (click)="closeModal()" type="button">Cancelar</button>
    <button class="btn btn-primary" type="submit" [disabled]="eventoNewRegistryForm.invalid">Guardar</button>
  </div>
</form>

***Econtre la respuesta despues de varios intentos y la dejare aca por si depronto a alguien le pasa

-Lo que hice fue crear un emiter desde el formulario para tratarlo al llegar al componente padre y asi poder cerrar la modal

  @Output() modal: EventEmitter<any> = new EventEmitter();  //Salida de evento para cerrar modal


 /**
   * @name closeModal
   * @desc Metodo que emite un evento al componente padre para cerrar la modal
   */
  closeModal() {
    this.modal.emit('close');
  }

  • En el componente padre queda así

<ng-template #createNewEvent  let-modal="dismiss">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Nuevo evento</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal('Close')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <app-add-new-evento-form (eventoNewRegistry)="eventoNewRegistry($event)" (modal)="modal('Close')" ></app-add-new-evento-form>
</ng-template>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.