Max
The Max rule enforces an upper size limit, and how it measures that size depends on the value's type: for a string it's the character count, for an array it's the item count, and for a number it's the value itself. That means max:10 rejects a bio longer than 10 characters, a tag list with more than 10 entries, or a quantity field where the number itself exceeds 10, all through the same rule. It's the natural counterpart to the Min rule — pair the two when a field needs both a floor and a ceiling, such as a password that must stay within a minimum and maximum length.
#Directive Code Snippet
<!DOCTYPE html>
<html lang="en">
...
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<input max="<THRESHOLD_VALUE>" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
<ng-absolute-validator [formInstance]="<name>"></ng-absolute-validator>
</form>
...
</html>
#Chain Rule Code Snippet
<!DOCTYPE html>
<html lang="en">
...
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
<input rule="max:<THRESHOLD_VALUE>" type="text" name="<name>" [(ngModel)]="<name>" #<name>="ngModel">
<ng-absolute-validator [formInstance]="<name>"></ng-absolute-validator>
</form>
...
</html>
#Reactive Form Code Snippet
//component.ts
export class ReactiveComponent{
public form !: FormGroup;
constructor(
private fb : FormBuilder,
private rv : ReactiveValidator,
){this.generteForm()}
generteForm(){
this.form = this.fb.group({
<name> : ['',this.rv.map('max:<THRESHOLD_VALUE>',<CUSTOM_MESSAGE>)]
})
}
}
//component.html
<!DOCTYPE html>
<html lang="en">
...
<form [formGroup]="form">
<input type="text" name="<name>" formControlName="<name>">
<ng-absolute-validator [formInstance]="form.get(<name>)"></ng-absolute-validator>
</form>
...
</html>