05_forms

Forms!

Para referência a branch utilizada é a topicos/t5/p1.

Vamos criar um formulário simples, com alguns campos e regras de validação simples.

Template Driven Forms

Template Driven Forms é o modelo de formulário aonde as regras de validação são adicionadas no proprio html.

Para criar o formulário:

1. Adicionar a referência do bootstrap para melhorar layout, no arquivo app.component.css.
2. Dentro de src\app vamos criar um novo modulo aonde vamos colocar nossos formulários:
   • ng g m cadastros
   • Adicione a referência para o FormsModule no CadastrosModule
3. Dentro da pasta do módulo criado:
   • ng g class cadastroModel
   • ng g c templateDrive
4. Crie o modelo padrão no template-drive.component.ts.
5. Adicione o html do formulário no template-drive.component.html.
6. Defina o TemplateDriveComponent no exports do CadastrosModule.
7. Importe o CadastrosModule no AppModule.
8. Adicione um novo item de router no app-routing.module.ts.
9. Adicione a html da nova página no pag-layout.component.html.

A branch com as alteraçoes é a topicos/t6/p1.

Para ver as alteraçoes veja o DIFF das alteraçoes.

Model Driven Forms

Para referência a branch utilizada é a topicos/t6/p1.

Model Driven Forms é o modelo de formulário aonde as regras de validação são adicionadas dentro de um modelo feito através do FormBuilder.

Para criar o formulário:

1. Adicione a referência para o ReactiveFormsModule no CadastrosModule
2. Dentro da pasta do módulo cadastros:
   • ng g c modelDrive
3. Defina o código padrão no model-drive.component.ts.
4. Adicione o html do formulário no model-drive.component.html.
5. Defina o ModelDriveComponent no exports do CadastrosModule.
6. Adicione um novo item de router no app-routing.module.ts.
7. Adicione a html da nova página no pag-layout.component.html.

A branch com as alteraçoes é a topicos/t6/p2.

Para ver as alteraçoes veja o DIFF das alteraçoes.

Validador Async

Para referência a branch utilizada é a topicos/t6/p2.

É possível criar validadores assíncronos, para criar validações que precisam de confirmação externa. Vamos criar um validador de CPF.

Um validador Assíncrono tem o seguinte retorno: Observable<{ [key: string]: any } | null>

• { [key: string]: any } => { 'cep': true }: indica que que está inválido.
• null : indica que o campo está válido

Para criar o Validador:

1. Adicione a referência para o HttpClientModule no CadastrosModule
2. Dentro da pasta do módulo cadastros:
   • ng g s customValidators
3. Defina o código do campo CEP no model-drive.component.ts.
4. Adicione o html do formulário no model-drive.component.html.
5. Adicione novo html do formulário no model-drive.component.html.

A branch com as alteraçoes é a topicos/t6/p3.

Para ver as alteraçoes veja o DIFF das alteraçoes.