Desafio

<!-- EMAIL -->
    <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 e-mail é obrigatório"></app-mensagem>
        <app-mensagem *ngIf="email?.errors?.['pattern']" mensagem="Campo e-mail está inválido"></app-mensagem>
      </div>

    
<!-- NOME -->
      <label class="campo__etiqueta" for="nome">Nome Completo</label>
      <input name="nome" id="nome" class="campo__escrita" ngModel required minlength="2" #nome="ngModel">
<!-- VALIDACOES NOME -->
      <div *ngIf="(nome?.invalid && nome?.touched) || nome?.dirty ">
        <app-mensagem *ngIf="nome?.errors?.['required'] " mensagem=" O campo deve ser preenchido"></app-mensagem>
        <app-mensagem *ngIf="nome?.errors?.['minlength']"
          mensagem=" O campo deve conter mais que dois caracteres"></app-mensagem>
      </div>
    

    <!-- CONTATO -->
      <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="Campo obrigatório"></app-mensagem>
          <app-mensagem *ngIf="telefone?.errors?.['pattern']" mensagem="Número incorreto"></app-mensagem>
        </div>
      </div>
    </div>