Se você é novo no React.js, você pode estar se perguntando o porquê de ele ser tão popular e por que você deveria usá-lo em suas aplicações. Se esse for o caso, você está no lugar certo.

Vamos discutir o que torna o React.js tão bom e porque você deve usá-lo em seus projetos.

Índice

• Breve história do React.js
• Por que você deveria usar o React?
• O React é flexível
• O React possui uma ótima experiência de desenvolvedor
• O React tem suporte/recursos do Facebook
• O React também tem um amplo suporte da comunidade
• O React possui um ótimo desempenho
• O React é fácil de testar

Breve história do React.js

O Facebook criou o React.js em 2011 para o seu próprio uso. Como você sabe, Facebook é, atualmente, um dos maiores sites de redes sociais da web do mundo.

Em 2012, o Instagram, que é uma subsidiária do Facebook, também começou a utilizá-lo.

Em 2013, o Facebook disponibilizou o código do React.js como código-aberto. Inicialmente, a comunidade de desenvolvedores o rejeitou, pois fazia uso de Markup e JavaScript em um único arquivo. No entanto, à medida que mais pessoas experimentavam, elas começaram a apoiar a abordagem centrada em componentes para separação de responsabilidades.

Em 2014, diversas empresas grandes começaram a usar o React.js em seus ambientes de produção.

Em 2015, o Facebook também disponibilizou o código do React Native como código-aberto. O React Native é uma biblioteca que nos permite a criação de aplicativos nativos para dispositivos móveis em Android e iOS usando o React.js.

Em 2016, com a versão 15, o React.js começou a empregar o versionamento semântico. Isso também ajudou a transmitir à comunidade de desenvolvedores que o React estava mais estável.

Hoje, o React.js é usado por muitas empresas dentre as Fortune 500. O Facebook possui uma equipe de desenvolvedores em tempo integral dedicada ao React. Eles, regularmente, lançam correções de bugs, melhorias, postagens em blogs e documentação.

Por que você deveria usar o React?

Você pode estar se perguntando por que você deveria usar o React.js. Afinal, com o aumento dos usos do JavaScript nos últimos anos, sabemos que há uma variedade de opções disponíveis no mercado, tais como Angular e Vue.js. Então, por que React?

Vamos explorar os seis motivos principais para usar o React.js.

O React é flexível

O React é consideravelmente flexível. Após aprendê-lo, você pode usá-lo numa variedade de plataformas para construir interfaces de usuário de qualidade. O React é uma biblioteca, NÃO um framework. Sua abordagem de biblioteca o possibilitou evoluir e se tornar uma ferramenta notável.

O React foi criado com um único foco: criar componentes para aplicações para a web. Um componente do React (texto em inglês) pode ser qualquer coisa em sua aplicação para a web como, por exemplo, um botão, um texto, um label ou um grid.

Porém, à proporção que a popularidade do React cresceu, seu ecossistema também ampliou para abranger diversos casos de uso.

Você pode gerar um site estático com React usando ferramentas como, por exemplo, o Gatsby. Você pode usar o React Native para construir aplicações para dispositivos móveis. Você, igualmente, pode criar uma aplicação para desktop, usando uma ferramenta como o Electron, que consegue ser executada em Mac e Windows com a tecnologia React.js.

O React, da mesma maneira, suporta à renderização no servidor de seus componentes usando ferramentas como o Next.js. Você também pode usar o React.js para criar um site da web de realidade virtual e experiências em 360 graus usando o React VR.

"Aprenda o React uma vez e escreva código em qualquer lugar" - Reactjs.org

Você também pode usar o React em suas aplicações já existentes. O React foi projetado com isso em mente. Você pode mudar uma pequena parte da sua aplicação existente usando o React e, se essa alteração funcionar, você pode começar a converter sua aplicação inteira para o React.js. O Facebook aplicou a mesma abordagem.

"A principal vantagem de se usar uma biblioteca em vez de um framework é o fato de que as bibliotecas são leves. Há uma liberdade para escolher ferramentas diversas. O framework, por outro lado, consiste em um ecossistema completo para se criar uma aplicação. Não existe um modo fácil de se usar outras ferramentas que não sejam do framework."

O React possui uma ótima experiência de desenvolvedor

Seu time se apaixonará pelo React quando eles começarem a programar com ele. O rápido desenvolvimento e a API enxuta do React combinados criam uma fantástica experiência de desenvolvimento.

A API do React é muito simples, pois possui poucos conceitos para aprender. Aqui está um curto exemplo de um componente do React:

Você precisa apenas importar a biblioteca do React. Message é um componente que recebe uma props (entrada) e retorna JSX.

JSX é uma sintaxe especial que se assemelha ao HTML, convertendo as chamadas da API do React e, ao final, renderizando HTML.

Frameworks tradicionais, como o Angular e Vue, potencializam o HTML. Eles usam JavaScript dentro do HTML. Eles criaram atributos HTML que fornecem capacidades adicionais a ele.

O principal problema com essa abordagem é que você tem que aprender esses novos atributos do HTML ou sempre ficar consultando a documentação oficial.

Aqui está um exemplo de laço de repetição no Angular. Olhe o atributo *ngFor:

Aqui, por outro lado, temos um exemplo de laço de repetição no Vue.js. Dê uma olhada no atributo v-for:

O React usa uma conduta oposta. Ele utiliza HTML (JSX) dentro do JavaScript. Eu gosto dessa abordagem porque, nela, você pode lidar com JavaScipt e HTML puros.

Aqui temos um exemplo de laço de repetição no React.js

‌O componente NumberList do React usa código em JavaScript puro (a função 'map'). Além disso, você pode observar que o JSX é uma simples, e bem conhecida, tag HTML com atributos elegantes. A função 'render' está apenas renderizando o componente NumberList no elemento raiz no arquivo HTML.

O que mais você precisa, enquanto desenvolvedor, se tem à disposição uma plataforma onde você pode lidar com JavaScript e HTML puros e, ainda, criar uma Interface de Usuário interativa?

Observação: quando eu digo "JavaScript puro", isso não significa que você usará simplesmente JavaScript no React. O React é uma biblioteca do JavaScript e ele possui sua camada baseada no próprio JavaScript. PORÉM, como eu disse, a API do React é bem enxuta e simples de aprender. Angular e Vue forçam suas regras a você. O React é mais conceitual. Ele mostra como você pode fazer um melhor uso do JavaScript no estilo do React.

O React.js também nos disponibiliza o pacote create-react-app, que permite a começar instantaneamente o desenvolvimento.

O React tem suporte/recursos do Facebook

O React é amplamente usado na aplicação e no site da web do Facebook e no Instagram. É por isso que o Facebook é profundamente comprometido com isso. Eles usam mais de 50 mil componentes do React em seu ambiente de produção. Os quatro principais contribuidores do React no GitHub são funcionários em tempo integral do Facebook.

Além disso, o time do React mantém um blog que constantemente fornece detalhes de cada novo lançamento.

Por conta do sólido comprometimento do Facebook com o React em produção, quando ocorrem mudanças significativas (breaking changes) no React, o Facebook consistentemente provê um Codemod que automatiza a mudança.

O Codemod é uma ferramenta de linha de comando que automatiza mudanças em sua base de código. Quando uma nova especificação entra no React, o Codemod automaticamente substitui velhos componentes com a nova especificação.

Desde 2015, a popularidade do React tem crescido constantemente. Ele possui uma comunidade muito grande e bastante ativa. Seu repositório no GitHub tem mais de 164 mil estrelas. É um dos cinco principais repositórios na plataforma.

O pacote do NPM do React tem, também, milhões de downloads semanalmente.

Mais de 9 mil empresas relataram no Stackshare que estão usando React. Você até pode ver empresas da Fortune 500.

A Reactiflux é uma comunidade especialmente feita para desenvolvedores do React. Mais de 110 mil membros da comunidade estão engajados em ajudar a resolver e compartilhar problemas relativos ao React.

Um dos sites da web mais populares entre os desenvolvedores de software é o StackOverflow. Você pode ver que há mais de 250 mil perguntas feitas sobre o React e bibliotecas relacionadas a ele.

Em alguns casos, você nem precisa criar seus próprios componentes. Existem várias bibliotecas de componentes gratuitas e maduras disponíveis on-line.

Aqui estão alguns exemplos:

• A Microsoft criou a biblioteca de componente Fluent UI, que possibilita desenvolver sua interface de usuário (semelhante a do office).
• A Material-UI oferece componentes do React que implementam as diretrizes de interface de usuário do Google Material.
• A React-Bootstrap contém componentes do React que facilitam o trabalho com o Bootstrap.
• Ademais, confira a lista Awesome React Components no GitHub para encontrar mais componentes do React.

Também existem projetos/bibliotecas maduras relacionadas que você pode usar com React.

• Se você quiser roteamento, então pode empregar o React Router. Se você deseja gerenciar um sistema de dados mais complexo, então utilize o Redux e o MobX.
• Para testes automatizados, use Jest, que também é desenvolvido pelo Facebook.
• Para chamadas a APIs RESTful, use o GraphQL.
• Para renderização do lado do servidor de componentes do React com Node, faça uso do Express.js.

Todas essas bibliotecas e ferramentas são importantes, pois se você está procurando criar algo no React, você encontrará na web ajuda e soluções em abundância para tudo o que precisar.

React possui um ótimo desempenho

A equipe do React percebeu que o JavaScript é rápido, mas atualizar o DOM o torna lento. O React minimiza as mudanças no DOM, tendo descoberto uma mais eficiente e inteligente de atualizá-lo.

Antes do React, a maioria dos frameworks e bibliotecas atualizava o DOM de maneira não inteligente para refletir um novo estado, resultando em mudanças em uma parte significativa da página.

O React monitora os valores do estado de cada componente com o Virtual DOM. Quando o estado do componente é alterado, o React compara o estado existente do DOM com o que o novo DOM deveria parecer. Depois disso, ele encontra a maneira menos custosa de atualizá-lo.

Isso não parece ser muito fácil, mas o React lida muito bem com isso nos bastidores. Ele possui múltiplos benefícios, tais como evitar o 'layout trashing', que ocorre quando o navegador tem de recalcular a posição de tudo quando o elemento do DOM é modificado.

Além disso, como a maioria das aplicações tem sido usada em dispositivos móveis, elas precisam ser altamente eficientes. Portanto, economizar bateria e poder de CPU é muito importante.

O modelo simples de programação do React permite que ele mude os estados automaticamente quando dados são atualizados. Isso ocorre na memória, o que torna o processo bastante rápido.

O tamanho da biblioteca do React também é enxuto. É de menos de 6kb (menos de 3kb quando compactado em gzip). Isso é significativamente inferior ao tamanho dos seus concorrentes.

O React é fácil de testar

O design do React é muito amigável para testes.

• O teste de interfaces de usuário tradicionais pode ser complicado de configurar. Por outro lado, você requer bem pouca ou nenhuma configuração para testar no React.
• Testar interfaces de usuário tradicionais requer navegadores para os testes, mas você pode testar componentes do React rápida e facilmente usando a linha de comando no Node.
• Os testes tradicionais de interface de usuário no navegador são lentos. No entanto, os testes de linha de comando são rápidos e você pode executar uma quantidade considerável de conjuntos de testes ao mesmo tempo.
• O teste tradicional de interface de usuário no navegador, frequentemente, consome tempo e é desafiador para manter. Os testes em React podem ser escritos rapidamente usando ferramentas como Jest e Enzyme.

Há uma vasta variedade de frameworks JavaScript de testes disponíveis na web, os quais você pode implementar para testar o React.js (uma vez que também é uma biblioteca JavaScript). Alguns dos frameworks populares são o Mocha, o Jasmine, o Tape, o QUnit e o AVA.

Conclusão

O React é uma ferramenta excelente para criar aplicações interativas para dispositivos móveis, para a web e para outras plataformas.

Tanto a popularidade quanto a utilização do React estão aumentando dia a dia por uma boa razão. Como desenvolvedor, programar em React torna você melhor em JavaScript, uma linguagem que detém, atualmente, aproximadamente 90% do mercado de desenvolvimento para a web.

Muito obrigado por ler este artigo. Conecte-se com o autor pelo LinkedIn.

Introdução

Neste artigo, aprenderemos sobre validações em formulários do Angular orientados a templates. Criaremos um formulário simples de registro de usuário e implementaremos algumas validações embutidas nele. Junto às validações embutidas, implementaremos algumas validações customizadas para o formulário orientado a templates.

Consideraremos as seguintes validações customizadas para essa demonstração:

• Verificação de disponibilidade do nome de usuário;
• Validação de padrão de senha;
• Correspondência da senha inserida em dois campos diferentes.

Dê uma olhada na aplicação funcionando:

Pré-requisitos

• Instale o Visual Studio Code aqui;
• Instale a última versão da Angular CLI por aqui;
• Instale a última versão LTS do Node.js aqui.

Código fonte

Você pode acessar o código fonte pelo GitHub.

Crie a aplicação do Angular

Navegue até o diretório no qual deseja criar o seu projeto. Abra uma janela de comando e execute o comando mostrado abaixo:  

ng new angular-forms-validation --routing=false --style=scss

Estamos especificando o comando para criar uma aplicação do Angular. A opção para criar o módulo de roteamento é definida como false e a extensão de arquivos de estilização é definida como SCSS. Esse comando criará o projeto do Angular com o nome angular-forms-validation.

Dirija-se ao diretório do novo projeto e abra-o no VS Code usando o conjunto de comandos abaixo.

cd angular-forms-validation
code .

Instale o Bootstrap

Execute o seguinte comando para instalar o Bootstrap:

npm install bootstrap --save

Adicione a seguinte definição de importação no arquivo styles.scss :

@import "~bootstrap/dist/css/bootstrap.css";

Crie o serviço de validação

Execute o seguinte comando para criar um serviço:

ng g s services\customvalidation

Esse comando criará um subdiretório chamado services, que possui dois arquivos dentro dele – customvalidation.service.ts e customvalidation.service.spec.ts. Abra customvalidation.service.ts e insira o seguinte código dentro dele.

import { Injectable } from '@angular/core';
import { ValidatorFn, AbstractControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class CustomvalidationService {

  patternValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      if (!control.value) {
        return null;
      }
      const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$');
      const valid = regex.test(control.value);
      return valid ? null : { invalidPassword: true };
    };
  }

  MatchPassword(password: string, confirmPassword: string) {
    return (formGroup: FormGroup) => {
      const passwordControl = formGroup.controls[password];
      const confirmPasswordControl = formGroup.controls[confirmPassword];

      if (!passwordControl || !confirmPasswordControl) {
        return null;
      }

      if (confirmPasswordControl.errors && !confirmPasswordControl.errors.passwordMismatch) {
        return null;
      }

      if (passwordControl.value !== confirmPasswordControl.value) {
        confirmPasswordControl.setErrors({ passwordMismatch: true });
      } else {
        confirmPasswordControl.setErrors(null);
      }
    }
  }

  userNameValidator(userControl: AbstractControl) {
    return new Promise(resolve => {
      setTimeout(() => {
        if (this.validateUserName(userControl.value)) {
          resolve({ userNameNotAvailable: true });
        } else {
          resolve(null);
        }
      }, 1000);
    });
  }

  validateUserName(userName: string) {
    const UserList = ['ankit', 'admin', 'user', 'superuser'];
    return (UserList.indexOf(userName) > -1);
  }
}

O método patternValidator é usado para validar o padrão de senha no seu formulário. O parâmetro para esse método é do tipo AbstractControl, que é uma classe base para oFormControl.

Usaremos uma expressão regular para validar a senha. Ela verificará as seguintes quatro condições na senha:

• A senha deve ter, no mínimo, oito caracteres;
• Deve possuir pelo menos uma letra minúscula;
• Deve conter, no mínimo, uma letra maiúscula;
• Deve ter, ao menos, um número.

Se a senha falhar na verificação da regex, definiremos a propriedade invalidPassword como sendo verdadeira (true).

O método MatchPassword é usado para comparar as senhas em dois campos. Esse método receberá dois parâmetros do tipo string, os quais representam os nomes dos campos a serem comparados. Utilizaremos o FormControl para esses dois campos e, em seguida, compararemos os valores contidos neles. Se os valores não corresponderem, definiremos a propriedade passwordMismatch como verdadeira (true).

O método userNameValidator é utilizado para verificar se o nome de usuário já foi utilizado ou não. Esse método receberá um parâmetro do tipo AbstractControl.

Verificaremos se o valor deste campo está presente em um array estático, UserList. Se o valor inserido pelo usuário já estiver presente, definiremos a propriedade userNameNotAvailable como verdadeira (true).

Estamos utilizando a função setTimeout para invocar essa verificação a cada dois segundos. Isso assegurará que o erro seja disparado após dois segundos a partir do momento em que o usuário parar de digitar no campo.

Por questão de simplicidade deste artigo, estamos fazendo o uso de um array estático para buscar a disponibilidade de nomes de usuário. Idealmente, essa deveria ser uma chamada de serviço ao servidor para procurar pelo valor em um banco de dados.

Crie o modelo de usuário

Crie uma pasta chamada models dentro de src/app. Adicione um novo arquivo dentro do diretório models, chamado user.ts. Insira o seguinte código dentro do arquivo user.ts.  

export class User {
    public name: string;
    public email: string;
    public username: string;
    public password: string;
    public confirmPassword: string;
}

Crie diretivas customizadas

Criaremos diretivas customizadas para implementar validators customizados para o formulário orientado a templates.

Execute o comando exibido abaixo para criar a diretiva passwordPattern.

ng g d directives\passwordPattern

Este comando criará uma pasta chamada directives, que possui dois arquivos dentro de si – passwordPattern.directive.ts e passwordPattern.directive.spec.ts. Abra o passwordPattern.directive.ts e insira o seguinte código dentro dele.

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';

@Directive({
  selector: '[appPasswordPattern]',
  providers: [{ provide: NG_VALIDATORS, useExisting: PasswordPatternDirective, multi: true }]
})
export class PasswordPatternDirective implements Validator {

  constructor(private customValidator: CustomvalidationService) { }

  validate(control: AbstractControl): { [key: string]: any } | null {
    return this.customValidator.patternValidator()(control);
  }
}

Essa diretiva é usada para validar o padrão da senha. Implementaremos a interface Validator na classe PasswordPatternDirective. Sobrescreveremos o método validate, o qual recebe um parâmetro do tipo AbstractControl, que é o controle que desejamos validar. Em seguida, invocaremos o método patternValidator do serviço.

Execute o comando mostrado abaixo para criar a diretiva matchPassword:

ng g d directives\matchPassword

Abra o arquivo matchPassword.directive.ts e insira o seguinte código dentro dele:

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, ValidationErrors, FormGroup } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';

@Directive({
  selector: '[appMatchPassword]',
  providers: [{ provide: NG_VALIDATORS, useExisting: MatchPasswordDirective, multi: true }]
})
export class MatchPasswordDirective implements Validator {
  @Input('appMatchPassword') MatchPassword: string[] = [];

  constructor(private customValidator: CustomvalidationService) { }

  validate(formGroup: FormGroup): ValidationErrors {
    return this.customValidator.MatchPassword(this.MatchPassword[0], this.MatchPassword[1])(formGroup);
  }
}

Essa diretiva é usada para validar se as senhas inseridas nos dois campos correspondem ou não. Essa diretiva receberá uma entrada do tipo array de strings, o qual contém os campos a serem comparados. Sobrescreveremos o método validate e passaremos o parâmetro do tipo FormGroup. Em seguida, invocaremos o método MatchPassword do serviço.  

Execute o comando abaixo para criar a diretiva validateUserName:

ng g d directives\validateUserName

Abra o arquivo validateUserName.directive.ts e introduza o seguinte código nele:

import { Directive, forwardRef } from '@angular/core';
import { Validator, AbstractControl, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';
import { Observable } from 'rxjs';

@Directive({
  selector: '[appValidateUserName]',
  providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => ValidateUserNameDirective), multi: true }]

})
export class ValidateUserNameDirective implements Validator {

  constructor(private customValidator: CustomvalidationService) { }

  validate(control: AbstractControl): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }> {
    return this.customValidator.userNameValidator(control);
  }
}

Essa diretiva é usada para validar a disponibilidade do nome de usuário. Sobrescreveremos o método validate e passaremos um parâmetro do tipo AbstractControl. Em seguida, invocaremos o método userNameValidator do serviço. Esse método retornará uma promise.

Crie o componente do formulário orientado a templates

Execute o comando apresentado abaixo para criar o componente do formulário orientado a templates:

ng g c template-driven-form

Abra o arquivo template-driven-form.component.ts e insira o seguinte código nele:

import { Component } from '@angular/core';
import { User } from '../models/user';

@Component({
  selector: 'app-template-driven-form',
  templateUrl: './template-driven-form.component.html',
  styleUrls: ['./template-driven-form.component.scss']
})
export class TemplateDrivenFormComponent {

  userModal = new User();

  constructor() { }

  onSubmit() {
    alert('Form Submitted succesfully!!!\n Check the values in browser console.');
    console.table(this.userModal);
  }
}

Criamos um objeto userModal do tipo User. Vincularemos os campos do formulário com a propriedade desse objeto. O método onSubmit mostrará a mensagem de sucesso na tela e exibirá os conteúdos do formulário no console.

Abra o arquivo template-driven-form.component.html e introduza o seguinte código nele:

<div class="container">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h3>Angular Template-driven Form</h3>
                </div>
                <div class="card-body">
                    <form class="form" #registerForm="ngForm" [appMatchPassword]="['password', 'confirmPassword']"
                        (ngSubmit)="registerForm.form.valid && onSubmit()" novalidate>
                        <div class=" form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" [(ngModel)]="userModal.name" name="name"
                                #name="ngModel" required>
                            <span class="text-danger"
                                *ngIf="(name.touched || registerForm.submitted) && name.errors?.required">
                                Name is required
                            </span>
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="text" class="form-control" [(ngModel)]="userModal.email" name="email"
                                #email="ngModel" required email>
                            <span class="text-danger"
                                *ngIf="(email.touched || registerForm.submitted) && email.errors?.required">
                                Email is required
                            </span>
                            <span class="text-danger" *ngIf="email.touched && email.errors?.email">
                                Enter a valid email address
                            </span>
                        </div>
                        <div class="form-group">
                            <label>User Name</label>
                            <input type="text" class="form-control" [(ngModel)]="userModal.username" name="username"
                                #username="ngModel" appValidateUserName required>
                            <span class="text-danger"
                                *ngIf="(username.touched || registerForm.submitted) && username.errors?.required">
                                User Name is required
                            </span>
                            <span class="text-danger" *ngIf="username.touched && username.errors?.userNameNotAvailable">
                                User Name not available
                            </span>
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control" [(ngModel)]="userModal.password" name="password"
                                #password="ngModel" appPasswordPattern required>
                            <span class="text-danger"
                                *ngIf="(password.touched || registerForm.submitted) && password.errors?.required">
                                Password is required
                            </span>
                            <span class="text-danger" *ngIf="password.touched && password.errors?.invalidPassword">
                                Password should have minimum 8 characters, at least 1 uppercase letter, 1 lowercase
                                letter and 1 number
                            </span>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label>
                            <input type="password" class="form-control" [(ngModel)]="userModal.confirmPassword"
                                name="confirmPassword" #confirmPassword="ngModel" required>
                            <span class="text-danger"
                                *ngIf="(confirmPassword.touched || registerForm.submitted) && confirmPassword.errors?.required">
                                Confirm Password is required
                            </span>
                            <span class="text-danger"
                                *ngIf="confirmPassword.touched && confirmPassword.errors?.passwordMismatch">
                                Passwords doesnot match
                            </span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">Register</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Criaremos um formulário orientado a templates e usaremos o card do Bootstrap para estilização. O card-header conterá um título, enquanto o card-body terá os campos do formulário.

Usaremos a diretiva appMatchPassword em nosso formulário e passaremos para validação os campos de senha e confirmPassword. A propriedade ngModel é usada para vincular o controle do formulário ao modelo.

Para validar a disponibilidade do nome de usuário, usaremos a diretiva appValidateUserName no campo username. Do mesmo modo, utilizaremos a diretiva appPasswordPattern no campo de senha para validar o padrão da senha.

Verificaremos os erros nos controles do formulário e, então, exibiremos na tela a mensagem de erro de validação apropriada.

Crie um componente nav-bar

Execute o comando abaixo para criar um componente nav-bar:

ng g c nav-bar

Abra o arquivo nav-bar.component.html e insira nele o seguinte código:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" [routerLink]='["/"]'>Form Validation Demo</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" [routerLink]='["/template-form"]'>Template Form</a>
            </li>
        </ul>
    </div>
</nav>

Aqui, estamos adicionando o link de navegação para o componente de formulário orientado a templates.

Atualize o componente app

Abra o arquivo app.component.html e introduza nele o código a seguir:

<app-nav-bar></app-nav-bar>
<div class="container">
  <router-outlet></router-outlet>
</div>

Atualize o módulo de app

Importaremos o módulo de formulários e, também, configuraremos o roteamento para nossa aplicação no módulo do app. Adicione o seguinte código no arquivo app.module.ts. Você pode consultar o GitHub para obter o código fonte completo deste arquivo:

import { RouterModule } from '@angular/router';
import { FormsModule } from  '@angular/forms';

@NgModule({
  ...    
  imports: [
    ...
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: TemplateDrivenFormComponent },
      { path: 'template-form', component: TemplateDrivenFormComponent }
    ]),
  ],
})

Execução de demonstração

Use o comando a seguir para iniciar o servidor da web:

ng serve -o

Este comando iniciará a aplicação em seu navegador padrão no http://localhost:4200/. Você pode realizar todas as validações de formulário que discutimos aqui.

Resumo

Criamos um formulário de registro de usuário de exemplo usando a abordagem de formulário orientado a templates no Angular. Implementamos no formulário as validações nativas, assim como as validações customizadas. A biblioteca do Bootstrap foi usada para estilização do formulário.

Acesse o código-fonte pelo GitHub e explore o repositório para ter um melhor entendimento.

Veja também (recursos em inglês)

• Reactive Form Validation In Angular
• Localization In Angular Using i18n Tools
• Policy-Based Authorization In Angular Using JWT
• ASP.NET Core – Using Highcharts With Angular 5
• ASP.NET Core – CRUD Using Angular And Entity Framework Core

Você pode encontrar este artigo em inglês, Template-Driven Form Validation In Angular, e outros artigos semelhantes no blog do autor.