Angular (8) form validation message

Question

I’m working on an Input that needs to have a message :

Type at least 10 characters

that message should change with each character that is typed

So, when you type:

Alex

the message should be:

Type at least 6 more characters

my problem is how to get the string size:

<input
type="text"
formControlName="nome" 
class="form-control"
[ngClass]="{'is-invalid': submitted && nome.invalid && (nome.dirty || nome.touched), 'is-valid': (nome.valid && nome.touched ) }">

.

<div class="text-muted" *ngIf="nome?.value.length < 10 ">
digite pelo menos mais {{10 - nome?.value.length }} caracteres </div>

But when starting the "name" this Undefined, and it breaks the application,

any suggestions?

Answer 1

A simple fit would be, create a get for your form

get formControl() { return this.form.controls; }

in html:

formControl.nome.length < 10

but the correct thing to do is to create a Validator, create a ts file or a function

function minCaracterValue(control: AbstractControl): { [key: string]: boolean } | null {
   if (control.value && (isNaN(control.value) || control.value < 10) {
      return { 'minCaracter': true };
   }
   return null;
}

or it could be a method in the class as well. The form would look like this

  this.form= new FormGroup({
       nome: new FormControl(null, [minCaracterValue])
    });

in your html template would look like this

<p *ngIf="formControl.nome.errors.minCaracter">digite pelo menos mais {{10 - formControl.nome.value }} caracteres</p>

Answer 2

Error can be corrected by double use of Elvis Operator

name? .value.length

does not work because value is also null,

should be:

name.value?. length

or

name?. value?. length