Restablecer formularios en Angular 2

Este tutorial le mostrará cómo restablecer el formulario en Angular 2.

La directiva ngForm proporciona una forma de crear e inicializar un formulario y configurar la validación de sus campos. Un uso común para ngForm es restablecer los valores de todos los controles de formulario en su página a su estado inicial.

Debe agregar una referencia en su código HTML a la directiva ngForm y luego acceder a su método de reinicio.

el método resetForm() en Angular 2

El método resetForm() es un método Angular 2 incorporado que borra los valores del formulario y los restablece a su estado inicial.

El método resetForm() se puede invocar pasando un booleano como argumento. Los campos y valores del formulario se borrarán si el argumento booleano es válido.

Si es falso, solo se eliminarán los campos con propiedades establecidas en falso.

Pasos para restablecer un formulario usando el método resetForm() en Angular 2

Los siguientes son los pasos para restablecer un formulario en Angular 2 usando el método resestForm().

Sintaxis para importar el tipo de formulario:

import { ResestFormModule } from '@angular/forms';

Sintaxis para instanciar el tipo de formulario:

let myForm = new ResestForm();

Registre su formulario con su componente para ser utilizado en este componente y sus componentes secundarios. Esto asegurará que todos los componentes secundarios conozcan este formulario y puedan usarlo.

Llame a este método en su código cuando desee restablecer el formulario, como cuando el usuario hace clic en un botón o envía datos en el formulario.

Ejemplo (TypeScript):

import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})
export class AppComponent  {
    myForm: FormGroup;
    constructor(fb: FormBuilder) {
        this.myForm = fb.group({
            name: '2'
        })
    }
    resetForm() {
        this.myForm.reset();
    }
}

Ejemplo (HTML):

<form [formGroup]="myForm" novalidate>
<select formControlName="name">
    <option disabled hidden value="null">Please select</option>
    <option value="1">Pakistan</option>
    <option value="2">USA</option>
    <option value="3">Uk</option>
</select>
</form>
<button (click)="resetForm()">reset</button>

Haga clic aquí para ver la demostración en vivo del código anterior.