Como Validar un Formulario con Angular 7 – Parte 1

3 minuto(s)

En esta página:

Demo

En este artículo queremos compartir contigo, una de varias maneras de crear un formulario para tus proyectos con Angular 7 y Bootstrap 4, hasta la fecha de este artículo ambos Frameworks se encuentran en sus últimas versiones, vamos a guiarte paso a paso los pasos necesarios para que el formulario quede muy bien. En este tutorial te enseñaré a Como Validar un Formulario con Angular 7, vamos con ello.

Partes

Parte 1
Parte 2 (Final – Código Fuente GitHub)

Nosotros avalamos el desarrollo de Software ágil, ya que en la vida real los proyectos se manejan con poco tiempo y debemos de terminarlos con mucho tiempo de anticipación.

Abre tu consola de comandos y ejecuta el siguiente comando para Crear un nuevo proyecto

ng new formulario-angular7-bootstrap4

CREATE formulario-angular7-bootstrap4/angular.json (3764 bytes)

CREATE formulario-angular7-bootstrap4/package.json (1335 bytes)

CREATE formulario-angular7-bootstrap4/README.md (1045 bytes)

CREATE formulario-angular7-bootstrap4/tsconfig.json (408 bytes)

CREATE formulario-angular7-bootstrap4/tslint.json (2805 bytes)

CREATE formulario-angular7-bootstrap4/.editorconfig (245 bytes)

CREATE formulario-angular7-bootstrap4/.gitignore (503 bytes)

...

... ( Continua creando el proyecto ...)

...

Espera que termine de crear el proyecto, no muevas nada para que no te de algún error.

Se nos ha creado un nuevo directorio para el proyecto, y dentro de este directorio se ha creado una estructura de archivos y carpetas para nuestro proyecto

/formulario-angular7-bootstrap4

├── e2e/

├── node_modules/

├── src/

├── .editorconfig

├── angular.json

├── package.json

├── tsconfig.json

├── tslint.json

Verificamos si el proyecto se ha creado sin problemas, ingresamos a la carpeta de nuestro proyecto y ejecutamos en la consola el siguiente comando

ng serve

** Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200/ **

Date: 2018-11-20T09:20:11.463Z

Hash: c91ce5e964ab6f3ece31

Time: 10032ms

chunk {main} main.js, main.js.map (main) 9.85 kB [initial] [rendered]

chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]

chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]

chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]

chunk {vendor} vendor.js, vendor.js.map (vendor) 3.43 MB [initial] [rendered]

i ｢wdm｣: Compiled successfully.

Abrimos el servidor https://localhost:4200/ y podemos ver que nuestro proyecto se ha creado correctamente

Vamos a verificar la versión de Angular que estamos usando, para esto ejecutaremos el siguiente comando

ng v

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 7.1.0
Node: 11.2.0
OS: win32 x64
Angular: 7.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.0
@angular-devkit/build-angular     0.11.0
@angular-devkit/build-optimizer   0.11.0
@angular-devkit/build-webpack     0.11.0
@angular-devkit/core              7.1.0 // Versión 7.1.0 de Angular
@angular-devkit/schematics        7.1.0
@angular/cli                      7.1.0
@ngtools/webpack                  7.1.0
@schematics/angular               7.1.0
@schematics/update                0.11.0
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

ng v

_ _ ____ _ ___

/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|

/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |

/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |

/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|

|___/

Angular CLI: 7.1.0

Node: 11.2.0

OS: win32 x64

Angular: 7.1.1

... animations, common, compiler, compiler-cli, core, forms

... http, language-service, platform-browser

... platform-browser-dynamic, router

Package Version

-----------------------------------------------------------

@angular-devkit/architect 0.11.0

@angular-devkit/build-angular 0.11.0

@angular-devkit/build-optimizer 0.11.0

@angular-devkit/build-webpack 0.11.0

@angular-devkit/core 7.1.0 // Versión 7.1.0 de Angular

@angular-devkit/schematics 7.1.0

@angular/cli 7.1.0

@ngtools/webpack 7.1.0

@schematics/angular 7.1.0

@schematics/update 0.11.0

rxjs 6.3.3

typescript 3.1.6

webpack 4.23.1

Puedes ver que el paquete Angular Dev Kit Core que es el centro de Angular, junto con otras dependencias se encuentra en la versión 7.1.0, entonces estamos en el camino correcto, haciendo uso de Angular 7

Conclusión

En este artículo ya tenemos desplegado el nuevo proyecto con Angular 7, en el siguiente capitulo crearemos el formulario con Bootstrap 4, asi mismo haremos la validación de los campos con Angular.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.