1
resposta

Desafio

<div class="formulario__campo">
      <label class="campo__etiqueta" for="nome">Nome Completo</label>
      <input name="nome" id="nome" class="campo__escrita" ngModel required minlength="2" #nome="ngModel">
      <div *ngIf="(nome?.invalid && nome?.touched) || nome?.dirty">
        <app-mensagem *ngIf="nome?.errors?.['required']" mensagem="O campo de nome é obrigatório
          preencher"></app-mensagem>
        <app-mensagem *ngIf="nome?.errors?.['minlength']" mensagem="O campo de nome deve ter no mínimo 2
          caracteres"></app-mensagem>
      </div>
    </div>
    <div class="formulario__dupla">
      <div class="formulario__campo">
        <label class="campo__etiqueta" for="nascimento">Nascimento</label>
        <input name="nascimento" id="nascimento" type="date" class="campo__escrita" ngModel />
      </div>
      <div class="formulario__campo">
        <label class="campo__etiqueta" for="telefone">Contato</label>
        <input name="telefone" id="telefone" type="tel" placeholder="(XX) XXXXX-XXXX" class="campo__escrita" ngModel
          required pattern="(\(?\d{2}\)?\s?)(\d{5}\-?\d{4})" #telefone="ngModel" />
        <div *ngIf="(telefone?.invalid && telefone?.touched) || telefone?.dirty">
          <app-mensagem *ngIf="telefone?.errors?.['required']" mensagem="O campo de telefone é
          obrigatório"></app-mensagem>
          <app-mensagem *ngIf="telefone?.errors?.['pattern']" mensagem="Ex: (xx) 12345 - 6789"></app-mensagem>
        </div>
      </div>
    </div>
    <div class="formulario__campo">
      <label class="campo__etiqueta" for="email">E-mail</label>
      <input name="email" id="email" type="email" class="campo__escrita" ngModel required
        pattern="^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$" #email="ngModel" />
      <div *ngIf="(email?.invalid && email?.touched) || email?.dirty">
        <app-mensagem *ngIf="email?.errors?.['required']" mensagem="O campo de email deve ser
        preenchido"></app-mensagem>
        <app-mensagem *ngIf="email?.errors?.['pattern']" mensagem="O campo de email deve ser como o
        exemplo: email@dominio.com"></app-mensagem>
      </div>
    </div>
1 resposta

Olá, estudante!

Parabéns por aceitar o desafio e colocar em prática o que está aprendendo no curso. Lidar com validações em formulários no angular é realmente importante e você fez um ótimo trabalho!

Obrigada por compartilhar e bons estudos! :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software