6

Usando -->>esta librería<<--:

Ejemplo de mi modal:

<ng-template #content let-modal>
  <div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Crear</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
  <span aria-hidden="true">&times;</span>
</button>
  </div>
  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
      <div class="row">
          <div class="col-md-6 offset-md-3">
                  <div class="form-group">
                      <label>Nombre</label>
                      <input type="text" formControlName="nombre" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.nombre.errors }" />
                      <div *ngIf="submitted && f.nombre.errors" class="invalid-feedback">
                          <div *ngIf="f.nombre.errors.required">Nombre Requerido</div>
                      </div>
                  </div>
          </div>
      </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modal.dismiss()">
    <span class="fa fa-remove"></span>  
    <span class="hidden-xs"> Cerrar</span> 
  </button> 
  <button [disabled]="loading" class="btn btn-primary">
    <span class="fa fa-save"></span>
    <span class="hidden-xs"> Guardar</span>
  </button>
</div>
  </form>
</ng-template>

Ejemplo de mi component:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { CategoriaService } from '../../services/categoria.service';
import { Categoria } from '../../models/categoria';

@Component({
    selector: 'app-categoria-crear',
    templateUrl: '../../views/categoria/crear.html',
    styleUrls: ['../../styles/categoria.component.css'],
  providers: [CategoriaService]
})
export class CategoriaCrearComponent implements OnInit {

  registerForm: FormGroup;
  submitted = false;
  closeResult: string;
  public categoria: Categoria;

  constructor(
    private modalService: NgbModal,
    private formBuilder: FormBuilder
  ){
    this.categoria = new Categoria(null, '', true);
  }

  open(content) {
    this.modalService.open(content, { centered: true, backdropClass: 'light-blue-backdrop' });
  }

  ngOnInit(): void {
    this.registerForm = this.formBuilder.group({
        nombre: ['', Validators.required],
    });
  }

  get f() { return this.registerForm.controls; }

  onSubmit() {
    this.submitted = true;
    if (this.registerForm.invalid) {
      return;
    }
    alert('SUCCESS!! :-)');
  }
}

No consigo disparar el método para cerrar el modal desde Angular.

1 respuesta 1

4
+50

Debes crear una referencia al Dialogo Modal (NgbModalRef) para poder manipularlo en el template o en el codigo.

<h1>Ejemplo formulario</h1>
<button (click)="open(content)">Abrir</button>
<button (click)="cerrar('Adios')">Cerrar</button>
<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Crear</h4>
    <button type="button" class="close" aria-label="Close" (click)="cerrar()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <form (ngSubmit)="onSubmit()">
    <div class="modal-body">
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <div class="form-group">
            <label>Nombre</label>
            <input #camponombre type="text" formControlName="nombre" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.nombre.errors }" />
            <div *ngIf="submitted && f.nombre.errors" class="invalid-feedback">
              <div *ngIf="f.nombre.errors.required">Nombre Requerido</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="cerrar()">
        <span class="fa fa-remove"></span>
        <span class="hidden-xs" (click)="cerrar()"> Cerrar</span>
      </button>
      <button [disabled]="loading" class="btn btn-primary">
        <span class="fa fa-save"></span>
        <span class="hidden-xs" (click)="guardar(camponombre.value)"> Guardar</span>
      </button>
    </div>
  </form>
</ng-template>

Controlador

import { Component } from '@angular/core';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'app';
  modal : NgbModalRef;

  constructor(private modalService: NgbModal) { }

  open(content) {
    this.modal = this.modalService.open(content, { centered: true, backdropClass: 'light-blue-backdrop' })    
    this.modal.result.then((e) => {
        console.log("dialogo cerrado")
    });        
  }

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

  guardar(nuevonombre) {
    console.log("El nuevo nombre es " + nuevonombre);
    this.modal.close();
  }
}
3
  • Por si te apetece montar una versión de tu ejemplo funcionando: stackblitz.com Commented el 26 sept. 2018 a las 13:12
  • gracias!, tuve que montarlo localmente para probarlo
    – cardeol
    Commented el 26 sept. 2018 a las 13:15
  • Muchas gracias.
    – bypabloc_
    Commented el 26 sept. 2018 a las 16:06

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.