You can refer to this stackblitz URL for your above issue I’ve given a details answer.
https://stackblitz.com/edit/angular-ivy-gjcu4t?file=src/app/app.component.html
TypeScript
export class AppComponent implements OnInit {
name = 'Angular ' + VERSION.major;
formDummy: FormGroup = this.fb.group({
val: [
'',
Validators.compose([Validators.required, Validators.minLength(4)]),
],
});
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.formDummy.get('val').patchValue('12');
console.log(this.formDummy.controls['val'].errors.minlength);
console.log('ActualLength ',
this.formDummy.controls['val'].errors.minlength.actualLength);
console.log('requiredLength ',
this.formDummy.controls['val'].errors.minlength.requiredLength
);
}
}
HTML Code for show errors
<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<form [formGroup]="formDummy">
<input type="text" formControlName="val" placeholder="Enter number here" />
<br />
Value => {{ formDummy.get('val')?.value }}
<br />
RequireLength {{ formDummy.get('val')?.errors.minlength.requiredLength }}
<br />
ActualLength {{ formDummy.get('val')?.errors.minlength.actualLength }}
</form>