Diferencia entre las formas impulsadas por plantillas y las formas reactivas en la angular

Para habilitar los formularios basados en plantillas, es decir, para que ngModel y otras directivas relacionadas con los formularios estén disponibles para su uso en nuestro proyecto, tenemos que importarlos explícitamente a nuestro AppModule. Así es como debería ser nuestro app.module.ts después de añadir la importación:

12345678910111213141516171819importar{Módulo de Navegador}de$0027@angular/plataforma-navegador$0027;importar{NgMódulo}de$0027@angular/núcleo$0027;importar{Módulo de Formas}de$0027@angular/formas$0027;importar{Componente de Aplicación}de$0027./app.componente$0027;importar{Componente de Plantilla de Formas}de$0027. /template-forms.component$0027;@NgModule({ declaraciones:[AppComponent,TemplateFormsComponent], importa:[BrowserModule,FormsModule], proveedores:[], bootstrap:[AppComponent]})exportclassAppModule{}

javascript

Ahora que tenemos lista nuestra configuración básica para los formularios, empecemos a agregar nuestro código de formulario.

Tenemos una pantalla para añadir un nuevo curso. A continuación se muestra cómo se vería la plantilla para eso:

12345678910111213141516171819202122232425262728293031323334353637383940<div /label;/label="inputtype="text"</div;;div;;* labelfor="courseDesc "*;Descripción del curso</label;;*;inputtype="text"</div;;*; labelfor="courseAmount"/importe del curso</label="inputtype="number"/div;;/div;;/div;;/div;;/div;;/div;;/botón="submit"/subir< /buttonAtHouse="button"/button"/Borrar</buttonAtHouse="button"/Borrar</buttonAtHouse="button"/div
html

Tenemos el formulario HTML básico creado con los campos Nombre del curso, Descripción del curso y Cantidad y también tenemos los botones para añadir, eliminar o borrar el formulario.

Aunque Angular sería capaz de detectar el elemento en el código anterior (ya que tenemos el FormsModule importado en app.module.ts), necesitamos registrar los controles de formulario manualmente, para lo cual debemos añadir "ngModel" al control de formulario y también añadir un atributo "name" al control. El "ngModel" vincularía nuestros campos de entrada a propiedades en nuestro modelo de datos.También para enviar el formulario, usaremos la directiva (ngSubmit) que se dispararía cada vez que se envíe el formulario.

Así es como nuestro HTML actualizado se vería entonces:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546<div>div><form(ngSubmit)="onSubmit()"<div Nombre del curso</etiqueta="inputtype="text "name="courseName "ngModel;;/div;²;div;²;²;labelfor="courseDesc"²;Descripción del curso</etiqueta="inputtype="text "name="courseDesc "ngModel;²; labelfor="courseAmount"/Curso Cantidad</label="inputtype="number "name="courseAmount "ngModel buttontype="submit"³;Add</button><buttontype="button"³;Delete</button>
html

En caso de que queramos asignar cualquier valor por defecto a cualquiera de los campos (por ejemplo, el nombre del curso), podemos enlazarnos al ngModel como se muestra a continuación:
123456<inputtype="text "name="courseName"[ngModel]="$0027default course name$0027"
html

Ahora que hemos creado nuestro formulario, intentemos enviar el formulario. También añadiremos algunas validaciones básicas al formulario (por ejemplo, marcaremos el campo de entrada del nombre del curso como requerido). También añadiremos una referencia local en el elemento del formulario, de modo que podamos acceder al formulario en nuestro código de Typescript.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<div><div><form(ngSubmit)="onSubmit(f) "#f="ngForm"<div>div;w;labelfor="courseName "*; Nombre del curso</etiqueta="inputtype="text "name="courseName "ngModelrequired labelfor="courseAmount"/capítulo del curso</label="inputtype="number "name="courseAmount "ngModel
html

Ahora que tenemos el manejador definido para el formulario de envío, vamos a añadir el código para manejar esto en nuestro componente de Typescript. También restableceremos el formulario cuando el usuario haga clic en el botón "Clear". Para ello, accederemos al formulario en el código del Typescript a través de @ViewChild. A continuación se muestra cómo se vería el código de nuestro componente del Typescript:

123456789101112131415161718192021222324252627282930313233343536373839importar{Componente,OnInit,OnDestroy}de$0027@angular/core$0027;importar{NgForm}de$0027@angular/formas$0027;@Componente({ selector:$0027app-template-forms$0027, templateUrl:$0027. /template-forms.component.html$0027, styleUrls:[$0027./template-forms.component.css$0027]})exportclassTemplateFormsComponentimplementsOnInit,OnDestroy{constructor(){}ngOnInit(){} @ViewChild($0027f$0027) courseForm:NgForm;onSubmit(form:NgForm){console.log("Course Name is : "+ form.value.courseName);console.log("Course Desc is : "+ form.value.courseDesc);console. log("Course Amount es : "+ form.value.courseAmount);}onClear(){// Ahora que tenemos acceso al formulario a través del $0027ViewChild$0027, podemos acceder al formulario y borrarlo. this.courseForm.reset();}onDelete(){}ngOnDestroy(){}}De esta manera, podemos ver que un objeto de tipo "NgForm" se crea y podemos acceder a los valores que el usuario introdujo accediendo a ellos en la propiedad "value".
javascript

Por último, agreguemos el código para mostrar un mensaje de error si el campo requerido (Nombre del campo, aquí) no es ingresado por el usuario. Además, tenga en cuenta que este error no debe mostrarse por defecto, es decir, en la carga del formulario, sino sólo si el usuario sale sin introducir ningún valor. Por lo tanto, haremos uso de las propiedades "sucio" y "tocado". Echemos un vistazo al código de la plantilla correspondiente:
1234567891011121314151617<div;;labelfor="courseName"``Nombre del curso</label><inputtype="text "name="courseName "ngModelrequired#courseName="ngModel"</div;;div*ngIf="courseName. errores && (courseName.dirty || courseName.touched)";p*ngIf="courseName.errors.required"``; Se requiere el nombre del curso

html

Por lo tanto, sólo estamos añadiendo un elemento div para los mensajes de validación. El *ngIf del elemento div se muestra sólo cuando hay errores de validación en nuestro campo courseName, que en realidad apunta a la instancia ngModel.También, queremos mostrar esta div sólo cuando nuestro campo courseName está sucio o tocado.dentro de esa div, podemos agregar algunas validaciones más para diferentes tipos de errores accediendo a la propiedad courseName.errors e.g. en este caso, estamos revisando por courseName.errors.required.