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 el 26 sep. 2018 a las 13:12
  • gracias!, tuve que montarlo localmente para probarlo
    – cardeol
    el 26 sep. 2018 a las 13:15
  • Muchas gracias.
    – bypabloc_
    el 26 sep. 2018 a las 16:06

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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