En Angular 2, hay dos tipos de formularios:
- Formularios basados en plantillas.
- Formas reactivas.
En los formularios basados en plantillas, la mayor parte del contenido se completará en un archivo .html.
En los formularios Reactivos, la mayoría de las funcionalidades y contenidos se realizarán en .tsarchivo. La principal ventaja de los formularios reactivos es que podemos crear validaciones personalizadas y la segunda ventaja fundamental es cuando realizamos pruebas unitarias, ya que el código HTML estará limpio, es más factible componer pruebas unitarias.
Restablecer un formulario en un enfoque basado en plantillas:
En el enfoque basado en plantillas, necesitamos importar NgForm desde ‘@angular/forms’ y usamos la directiva [(ngModel)] para el enlace de datos bidireccional y también debemos importar FormsModule desde ‘@angular/forms ‘ en el archivo app.module.ts. En la línea de abajo está presente el formato de entrada. Además, cuando mencionamos la directiva ngModel, debemos agregar el atributo de nombre al tipo de entrada.
import { FormsModule } from '@angular/forms';
En formularios reactivos, necesitamos importar FormGroup desde '@angular/forms'.
Después de importar los módulos mencionados anteriormente en el enfoque respectivo, el módulo de formas angulares proporciona un método incorporado llamado reset(). Podemos usar el método y podemos restablecer el formulario.
Ejemplo:.html archivo
// In .html file <form #login="ngForm" (ngSubmit)="completeLogin(login)"> <h3>Login Form</h3> <label for="name">Username :</label> <input type="text" [(ngModel)]="username" name="name" id="name"> <label for="password">Password :</label> <input type="password" [(ngModel)]="password" name="name" id="password"> <button type="submit">Submit</button> </form>
Ejemplo: .ts archivo
import {NgForm} from '@angular/forms'
import { Component, OnInit } from '@angular/core';
@Component({
selector: "app-login",
templateUrl: "./login.html",
styleUrls: [],
})
export class Sample implements OnInit{
constructor(){}
ngOninit(){
}
username='';
password='';
completeLogin(login :NgForm){
// In .ts file
login.reset()
// call this inbuilt method to reset the form
}
}
Restablecer un formulario en formularios reactivos:
Ejemplo:.html archivo
<form [formGroup]="login" (ngSubmit)="completeLogin()"> // In.html file <h3>Login Form</h3> . . <label for="name">Username :</label> <input type="text" formControlName="username" id="name"> <label for="password">Password :</label> <input type="password" formControlName="password" id="password"> <button type="submit">Submit</button> </form>
Ejemplo: .ts archivo
import {FormGroup, FormControl} from '@angular/forms'
import { Component, OnInit } from '@angular/core';
@Component({
selector: "app-signin",
templateUrl: "./signin.html",
styleUrls: ["],
})
export class Sample implements OnInit{
// In.ts file
login:FormGroup;
constructor(){}
ngOninit(){
login=newFormGroup({
username:new FormControl(''),
password:new FormControl(''),
})
}
completeLogin(){
this.login.reset();
// calling this method will reset the method
}
}
Producción:
Después de enviar el formulario, el resultado sería:
Publicación traducida automáticamente
Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA