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>