{"id":1969,"date":"2023-11-23T12:47:01","date_gmt":"2023-11-23T15:47:01","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=1969"},"modified":"2023-11-23T12:47:03","modified_gmt":"2023-11-23T15:47:03","slug":"capitulo-5-formularios-en-angular","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/capitulo-5-formularios-en-angular\/","title":{"rendered":"Cap\u00edtulo 5: Formularios en Angular"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">5.1 Formularios Reactivos<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Los formularios reactivos son una forma poderosa de gestionar formularios en Angular. Te permiten crear formularios din\u00e1micos y flexibles mediante el uso de objetos JavaScript para representar los formularios y sus estados. Aqu\u00ed hay un ejemplo de c\u00f3mo crear un formulario reactivo:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Importa <code>ReactiveFormsModule <\/code>desde <code>@angular\/forms<\/code> en tu m\u00f3dulo principal (por lo general, <code>app.module.ts<\/code>).<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>import { ReactiveFormsModule } from '@angular\/forms';<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Crea un formulario reactivo en tu componente. Por ejemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { FormBuilder, FormGroup, Validators } from '@angular\/forms';\r\n\r\nexport class MyComponent {\r\n  myForm: FormGroup;\r\n\r\n  constructor(private fb: FormBuilder) {\r\n    this.myForm = this.fb.group({\r\n      username: &#91;'', Validators.required],\r\n      email: &#91;'', &#91;Validators.required, Validators.email]],\r\n      password: &#91;'', &#91;Validators.required, Validators.minLength(6)]]\r\n    });\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Utiliza el formulario en tu plantilla HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form &#91;formGroup]=\"myForm\" (ngSubmit)=\"onSubmit()\">\r\n  &lt;input formControlName=\"username\" placeholder=\"Nombre de usuario\">\r\n  &lt;input formControlName=\"email\" placeholder=\"Correo electr\u00f3nico\">\r\n  &lt;input formControlName=\"password\" type=\"password\" placeholder=\"Contrase\u00f1a\">\r\n  &lt;button type=\"submit\">Enviar&lt;\/button>\r\n&lt;\/form>\r<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">5.2 Validaci\u00f3n de Formularios<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Los formularios reactivos permiten realizar una amplia gama de validaciones. Puedes utilizar las funciones de validaci\u00f3n proporcionadas por <code>@angular\/forms<\/code>, como <code>Validators.required<\/code>, <code>Validators.email<\/code>, <code>Validators.minLength<\/code>, y personalizar tus propias validaciones. Adem\u00e1s, puedes mostrar mensajes de error en tu plantilla en funci\u00f3n de la validez de los campos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes una lista de algunas de las funciones de validaci\u00f3n proporcionadas por <code>@angular\/forms <\/code>en Angular:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>Validators.required<\/code>: Valida que el campo sea obligatorio (no est\u00e9 vac\u00edo).<\/li>\n\n\n\n<li><code>Validators.email<\/code>: Valida que el campo contenga una direcci\u00f3n de correo electr\u00f3nico v\u00e1lida.<\/li>\n\n\n\n<li><code>Validators.minLength(minLength: number)<\/code>: Valida que la longitud del campo sea igual o mayor que el valor de <code>minLength<\/code>.<\/li>\n\n\n\n<li><code>Validators.maxLength(maxLength: number)<\/code>: Valida que la longitud del campo sea igual o menor que el valor de <code>maxLength<\/code>.<\/li>\n\n\n\n<li><code>Validators.pattern(pattern: string | RegExp)<\/code>: Valida que el campo cumpla con un patr\u00f3n espec\u00edfico proporcionado como una expresi\u00f3n regular o una cadena de caracteres.<\/li>\n\n\n\n<li><code>Validators.min(min: number)<\/code>: Valida que el valor num\u00e9rico del campo sea igual o mayor que el valor de <code>min<\/code>.<\/li>\n\n\n\n<li><code>Validators.max(max: number)<\/code>: Valida que el valor num\u00e9rico del campo sea igual o menor que el valor de <code>max<\/code>.<\/li>\n\n\n\n<li><code>Validators.nullValidator<\/code>: Un validador nulo que siempre devuelve nulo. Se utiliza para desactivar validaciones en algunos casos.<\/li>\n\n\n\n<li><code>Validators.compose(validators: ValidatorFn[])<\/code>: Combina varios validadores en una sola funci\u00f3n de validaci\u00f3n.<\/li>\n\n\n\n<li><code>Validators.composeAsync(asyncValidators: AsyncValidatorFn[])<\/code>: Combina varios validadores asincr\u00f3nicos en una sola funci\u00f3n de validaci\u00f3n.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Estas son algunas de las funciones de validaci\u00f3n m\u00e1s comunes proporcionadas por&nbsp;<code>@angular\/forms<\/code>. Puedes combinar estas funciones para crear validaciones m\u00e1s complejas y personalizadas seg\u00fan las necesidades de tus formularios.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">5.3 Env\u00edo de Datos a trav\u00e9s de Formularios<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Para enviar datos a trav\u00e9s de un formulario reactivo, puedes utilizar el m\u00e9todo <code>getRawValue() <\/code>para obtener los valores del formulario y luego enviarlos a trav\u00e9s de una solicitud HTTP o realizar cualquier acci\u00f3n que necesites.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>onSubmit() {\r\n  if (this.myForm.valid) {\r\n    const formData = this.myForm.getRawValue();\r\n    \/\/ Realizar la acci\u00f3n necesaria, como enviar datos a trav\u00e9s de una solicitud HTTP\r\n  }\r\n}\r<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">5.4 Formularios Din\u00e1micos<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Los formularios reactivos tambi\u00e9n te permiten crear formularios din\u00e1micos, donde puedes agregar o quitar campos de formulario seg\u00fan las necesidades de tu aplicaci\u00f3n. Por ejemplo, puedes agregar un bot\u00f3n \u00abAgregar campo\u00bb que genere din\u00e1micamente nuevos campos en el formulario.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para agregar un campo de forma din\u00e1mica, puedes utilizar el m\u00e9todo <code>addControl <\/code>o <code>removeControl <\/code>en el formulario. A continuaci\u00f3n, un ejemplo b\u00e1sico:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>addField() {\r\n  const newField = this.fb.control('', Validators.required);\r\n  this.myForm.addControl('newField', newField);\r\n}\r\n\r\nremoveField() {\r\n  this.myForm.removeControl('newField');\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Esto te permite crear formularios altamente din\u00e1micos y adaptables a las necesidades de tu aplicaci\u00f3n. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este es un resumen del uso de formularios reactivos en Angular, incluyendo la validaci\u00f3n de formularios, el env\u00edo de datos y la creaci\u00f3n de formularios din\u00e1micos. Los formularios reactivos son una herramienta poderosa para manejar entradas de usuario en aplicaciones web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>5.1 Formularios Reactivos Los formularios reactivos son una forma poderosa de gestionar formularios en Angular. Te permiten crear formularios din\u00e1micos y flexibles mediante el uso de objetos JavaScript para representar los formularios y sus estados. Aqu\u00ed hay un ejemplo de c\u00f3mo crear un formulario reactivo: Importa ReactiveFormsModule desde @angular\/forms en tu m\u00f3dulo principal (por lo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1972,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[38],"tags":[],"class_list":["post-1969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-y-otras-hierbas"],"uagb_featured_image_src":{"full":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Formularios-en-Angular-1.jpg",1280,717,false],"thumbnail":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Formularios-en-Angular-1-150x150.jpg",150,150,true],"medium":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Formularios-en-Angular-1-300x168.jpg",300,168,true],"medium_large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Formularios-en-Angular-1-768x430.jpg",768,430,true],"large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Formularios-en-Angular-1-1024x574.jpg",1024,574,true],"1536x1536":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Formularios-en-Angular-1.jpg",1280,717,false],"2048x2048":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Formularios-en-Angular-1.jpg",1280,717,false]},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"5.1 Formularios Reactivos Los formularios reactivos son una forma poderosa de gestionar formularios en Angular. Te permiten crear formularios din\u00e1micos y flexibles mediante el uso de objetos JavaScript para representar los formularios y sus estados. Aqu\u00ed hay un ejemplo de c\u00f3mo crear un formulario reactivo: Importa ReactiveFormsModule desde @angular\/forms en tu m\u00f3dulo principal (por lo&hellip;","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=1969"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1969\/revisions"}],"predecessor-version":[{"id":1973,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1969\/revisions\/1973"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media\/1972"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=1969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=1969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=1969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}