0

Tengo un botón que guarda correctamente pero necesito un botón que cancele lo que todo el guardar hace o limpiar el formulario este es el código del guardar seria crear un cancelar () y llamarlo en el botón como podria lograr esto teniendo en cuenta el del botón guardar o simplemente hacerlo desde el cliente quesería angular

guardar() {
    let crearRolRequest = new CrearRolRequest();
    crearRolRequest.nombre = this.form.controls["Nombre"].value;
    crearRolRequest.funcionalidadesIds = this.funcionalidadesSeleccionadas;
    this.dataService.actionUrl = this.configuration.ServerWithApiUrl + 'roles/obtenerxnombre';
    this.dataService .add<any>(crearRolRequest)
        .subscribe(resp => {
           this.showSuccess();
        }, error => {
           this.showError() ;
            return;
        });
  }

Vista

<p-toast [style]="{marginTop: '80px'}"></p-toast>
<p-panel [transitionOptions]="'0ms'" header="Registro de roles" [toggleable]="true">
    <div class="ui-fluid">
        <form [formGroup]="form" class="ui-g">
            <div class="ui-g-12 ui-md-6">
                <div class="ui-g-12">
                    <span class="ui-float-label">
                        <input id="float-input" type="text" size="30" pInputText  formControlName="Nombre" >
                     </span>
                    <p class="form-control-feedback" *ngIf="!form.controls['Nombre'].valid&&form.controls['Nombre'].dirty">El nombre es requerido
                    </p>
                </div>
            </div>
            <div class="ui-g-12">
                <div class="ui-g-12">
                    <p-tabView>
                        <p-tabPanel header="{{item.Nombre }}" [selected]="i == 0" *ngFor="let item of modulosFuncionalidades.registros; let i = index;">
                            <div *ngFor="let funcionalidad of item.Funcionalidades">
                                <p-checkbox name="groupname" value="{{funcionalidad.Nombre}}" (click)="addFuncionalidad(funcionalidad.FuncionalidadId)"></p-checkbox>
                                {{funcionalidad.Nombre}}
                            </div>
                        </p-tabPanel>
                    </p-tabView>
                </div>
            </div>
        </form>
    </div>
    <p-footer>
        <button [disabled]=" !form.valid " pButton type="button" icon="pi pi-save " label="Guardar " (click)="guardar() " class="ui-button-success "></button>
        <button [disabled]=" !form.valid " pButton type="button" icon="pi pi-times " label="Cancelar " (click)="guardar() " class="ui-button-danger "></button>

    </p-footer>
</p-panel>
3
  • Pero que lo cancele como ? cuando lanzas la petición ? o que, no entiendo, o lo que necesitas es limpiar el formulario del guardar Commented el 15 ago. 2019 a las 15:25
  • Si señor limpiar
    – Hackerman
    Commented el 15 ago. 2019 a las 15:28
  • ok ya te pongo la respuesta. Commented el 15 ago. 2019 a las 15:30

1 respuesta 1

1

Lo que debes hacer para limpiar el formulario es lo siguientes

Supongo que tienes un [formGroup]="nombredelFrom"

Hay varias formas de hacer esto:

Desde el form cuando hagas submit

<form  [formGroup]="nombredelFrom" (submit)="nombredelFrom.reset()"> ... </form>

Ten en cuenta que los botones submit del formulario lo van a resetear

En un metodo cuando termine:

MetodoQueejecutas() {
    // aqui se realiza todo el proceso y logica y cuando termines

    this.nombredelFrom.reset();

  }

Desde un botón:

 <button type="button" (click)="nombredelFrom.reset()">Cancelar </button> 

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.