0

Meu objetivo é ter uma implementação que ao usuário começar a digitar seja mostrado em tempo real uma mensagem de validação a contagem dos caracteres que estão sendo digitados, sendo que não sei como fazer isso, eu sei que existe o método actualLength

Criei um componente de mensagem como podem ver.

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

@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;
  }

}

Conseguir realizar essa validação no campo conteudo.

  <div class="ui-g-6 ui-md-12 ui-fluid">
        <label>Conteúdo</label>
        <p-editor [style]="{'height':'320px'}" pInputText type="text" name="conteudo"
        [(ngModel)]="noticia.conteudo"
        ngModel #conteudo="ngModel"
        required maxlength="1000">
        </p-editor>


        <app-message [control]="conteudo" error="required"
        text="Informe o conteúdo"></app-message>
        <app-message [control]="conteudo" error="maxlength"
        text="Maximo de {{ conteudo.errors?.maxlength?.requiredLength }} caracteres"  ></app-message>

      </div>

Se digitar mais de 1000 caracteres acontece isso.

inserir a descrição da imagem aqui

1 Resposta 1

0

Minha sugestao e usar somente o reactive form vc nao deve misturar template forms com reactive forms

<label class="center-block">Name:
    <p-editor [style]="{'height':'320px'}" pInputText type="text" name="conteudo"
    [formControl]="conteudo">
    </p-editor>     
</label>

{{1000-num}} Characteres restantes

e no componente

  conteudo = new FormControl('', [Validators.required, Validators.maxLength(1000)]); // se vc tiver outros inputs use formGroups
  num = 0;
  ngOnInit() {
    this.conteudo.valueChanges.subscribe(val => this.num = val.length)
  }

Você deve fazer log-in para responder a esta pergunta.