<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>