Home / Questions / 286066
Accepted
Hackerman
Asked: 2020-08-16 07:20:29 +0800 CST 2020-08-16 07:20:29 +0800 CST

cancel form button

  • 772

I have a button that saves correctly but I need a button that cancels what all the save does or clean the form this is the save code it would be to create a cancel() and call it on the button how could I achieve this taking into account the save button or just do it from the angular cheese client

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

View

<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>
angular7

1 Answers

  1. Best Answer

    What you should do to clean the form is the following

    i guess you have a[formGroup]="nombredelFrom"

    There are several ways to do this:

    from formwhen you dosubmit

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

    Keep in mind that the submitform buttons will reset it

    In a method when finished:

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

    this.nombredelFrom.reset();

  }

    From a button:

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