Use `minlength` when a form field needs a minimum number of characters. In an Angular template, `minlength="5"` makes a name shorter than five characters fail validation. It can be combined with `required` for an empty value and `pattern` for allowed characters. section 13.4.2
Listing 13.15. Adding form validation in the template.html file in the src/app folder
<div class="p-2">
<div class="bg-info text-white mb-2 p-2">
Model Data: {{jsonProduct}}
</div>
<form (ngSubmit)="addProduct(newProduct)">
<div class="form-group">
<label>Name</label>
<input class="form-control"
name="name"
[(ngModel)]="newProduct.name"
required
minlength="5"
pattern="^[A-Za-z ]+$" />
</div>
<button class="btn btn-primary mt-2" type="submit">
Create
</button>
</form>
</div>
A product-name input combines `name="name"`, `[(ngModel)]`, `required`, `minlength="5"`, and an alphabetic pattern inside a form. The form submits through `ngSubmit`. section 13.4.2
Give the input a `name` so Angular can identify it for validation, and keep the template-driven input inside a form. Angular assigns validation-state classes such as `ng-valid` or `ng-invalid`; combining these with `ng-dirty` lets CSS show feedback after the user edits the field. section 13.4.2
Show a minimum-length message
Export the input’s `ngModel` state as `#name="ngModel"`. When `name.dirty && name.invalid`, check `name.errors?.['minlength']` to show a message such as “Product names must be at least {{ name.errors?.['minlength'].requiredLength }} characters.” The error also supplies `actualLength`, the number entered. section 13.4.2
With a `FormControl`, configure the corresponding rule in its `validators` array using `Validators.minLength` instead of a template attribute. Its validation status can also drive another control: a category field remains disabled while the name fails validation and becomes enabled once the minimum length is reached. section 21.3.3 section 21.3.4
