Working with Angular validation messages

Question

This is my beer register

I set up the error messages with these lines of code, it’s here:

import { Component, OnInit, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-message',
  template: `
  <div *ngIf="temErro()" class="ui-message ui-messages-error">
    {{ text }}
  </div>
  `,
  styles: [`
    .ui-messages-error {
      margin: 0;
      margin-top: 4px;
    }
  `]
})
export class MessageComponent {

  @Input() error: string;
  @Input() control: FormControl;
  @Input() text: string;

  temErro(): boolean {
    return this.control.hasError(this.error) && this.control.dirty;
  }

}

I cannot validate the name field with the code below:

<div class="ui-g-12 ui-md-6 ui-fluid">
                <label>Nome </label>
                <input pInputText type="text" name="nome"  [(ngModel)]="cerveja.nome"
                #nome="ngModel" required minlength="5">

                <app-message [control]="nome" error="required"
                          text="Informe o nome"></app-message>
                        <app-message [control]="nome" error="minlength"
                          text="Mínimo de {{ nome.errors?.minlength?.requiredLength }} caracteres"></app-message>


              </div>

But when I perform with the description field picks up perfectly as you can see:

Description

<app-message [control]="descricao" error="required"
  text="Informe a descrição"></app-message>
<app-message [control]="descricao" error="minlength"
  text="Mínimo de {{ descricao.errors?.minlength?.requiredLength }} caracteres"></app-message>

Two types of validation were performed in the same field.

Why is this same validation performed in the description field not working in the field name?