AngularSP - Reactive Forms & Forms Signals

Talk about reactive forms and forms signals using angular v21.2.0

Transcript

1. REACTIVE FORMS E FORMS SIGNAL: O QUE MUDOU A N G U L A R S P
2. 1 O problema com formulários 2 Reactive Forms 3 Signals 4 Signal Forms 5 Comparação Direta AGENDA
3. O PROBLEMA COM FORMULÁRIOS P O R Q U E F O R M U L Á R I O S S Ã O C O M P L E X O S ?
4. POR QUE FORMULÁRIOS SÃO COMPLEXOS? • Estados do formulários espalhado pelo componente e pelo template – Valores, validações, erros – em lugares diferentes • Validações acopladas à estrutura de controles – Validators dentro de cada formControl e mensagens de erro dentro do template • Sincronização manual entre modelo de dados e form • RxJS obrigatório para reatividade – valueChanges, statusChanges
5. REACTIVE FORMS
6. REACTIVE FORMS TEMPLATE COMPONENT
7. REACTIVE FORMS NO DOM
8. TYPE SAFETY FORMS ANGULAR < 14 • FormControl – Contrato implícito e silencioso – Valor retornado era `any` – Erros apareciam em runtime ANGULAR >= 14 • FormControl<T> – Contrato explícito – Valor agora pode ser T | null • Se você não quer o null, use o {nonNullable: true} no seu controle
9. SIGNALS
10. C O N T E X TO R Á P Í D O • O que é: • É um valor reativo que não depende de inscrição para ser atualizado • Por que agora? • Zonejs : Zoneless • Impacto • Atributos/propriedades, inputs, outputs, estados – tudo pode ser signal.
11. FORMS/SIGNAL E X P E R I M E N TA L A P I V 2 1
12. SETUP E ESTRUTURA import { email, form, FormField, FormRoot, minLength, required, submit } from '@angular/forms/signals’; @Component({ imports: [FormField, FormRoot], }) export class Login {}
13. SETUP E ESTRUTURA type LoginSchema = { email: string; password: string; } const loginSchema = signal<LoginSchema>({ email: '', password: '', });
14. SETUP E ESTRUTURA form = form(loginSchema, (path) => { // validadores email(path.email, { message: 'Invalid email address', }); minLength(path.password, 10, { message: 'Password must be at least 10 characters long', }); });
15. SETUP E ESTRUTURA protected async onSubmit() { await submit(this.form, async (form) => { const value = form().value(); console.log(value); alert(`Login successful for ${value.email}`); }); }
16. SETUP E ESTRUTURA <form [formRoot]="form" (submit)="onSubmit()" class="login"> <div class="login__field"> <label for="email">email</label> <input [formField]="form.email" id="email" type="email" autocomplete="email" inputMode="email" /> @for (error of form.email().errors(); track $index) { <span>{{ error.message }}</span> } <button type="submit" [disabled]="form().submitting() || form().invalid()">Login</button> </form>
17. COMPARAÇÃO DIRETA R E A C T I V E F O R M S V S F O R M S S I G N A L
18. REACTIVE FORMS VS FORMS SIGNAL Critério Reactive Forms Forms Signal Status Stable Experimental Fonte da verdade FormControl / FormGroup Signal Type safety Explícito por controls Inferido no signal Validação Validator por control Schema centralizado Reatividade Observables Signal Form dinâmico FormArray, FormRecord @for Production ready Sim Não recomendado
19. QUANDO USAR CADA UM R E A C T I V E F O R M S V S F O R M S S I G N A L
20. USE REACTIVE FORMS QUANDO • App já em produção • Rxjs já sendo usado na base do código • EQUIPE DOMINA O MODELO ATUAL USE FORMS SIGNAL QUANDO • App novo totalmente signal first • Type safety inferido no modelo • Prefere validação centralizada em schema
21. USE REACTIVE FORMS QUANDO • App já em produção • Rxjs já sendo usado na base do código • EQUIPE DOMINA O MODELO ATUAL USE FORMS SIGNAL QUANDO • App novo totalmente signal first • Type safety inferido no modelo • Prefere validação centralizada em schema
23. VOCÊ PODE MIGRAR SEU FORMULÁRIO REATIVO • Utilizando a API de “SignalFormControl” É usado da mesma forma que um formControl, mas recebe validadores reativos Você pode adicionar esse signalFormControl dentro do seu controle reativo
24. CLASSES DENTRO DO FORMS SIGNAL • Você pode adicionar um provider: • provideSignalFormsConfig({ • classes: NG_STATUS_CLASSES • }) • E então o framework aplica as classes tradicionais de validação.
25. OBRIGADO E TOMEM ÁGUA