NG Absolute Form Validator - V14.1

Dimension

The Dimension rule checks that an uploaded image meets specific pixel dimensions or aspect-ratio constraints, using any combination of five accepted parameters: height, max_height, width, max_width, and ratio. It's built for cases like a profile avatar that must be exactly 200x200, a banner image that needs a minimum width, or a thumbnail that has to match a fixed aspect ratio such as 1.2. Because it needs a structured set of key-value parameters rather than a single value, this rule isn't available in the pipe-delimited chain-rule syntax — use the Template Driven or Reactive binding modes instead.

#Directive Code Snippet
<!DOCTYPE html> 
<html lang="en"> 
    ...
    <form (ngSubmit)="onSubmit(form)" #form="ngForm">
		<input type="file" [dimension]="['width=200','height=200']" name="<name1>" [(ngModel)]="<name1>" #<name1>="ngModel">
		<ng-absolute-validator [formInstance]="<name1>"></ng-absolute-validator>
		
		<input type="file" [dimension]="['min_width=200','max_height=200']" name="<name2>" [(ngModel)]="<name2>" #<name2>="ngModel">
		<ng-absolute-validator [formInstance]="<name2>"></ng-absolute-validator>
		
		<input type="file" [dimension]="['max_width=200','min_height=200']" name="<name3>" [(ngModel)]="<name3>" #<name3>="ngModel">
		<ng-absolute-validator [formInstance]="<name3>"></ng-absolute-validator>
		
		<input type="file" [dimension]="['ratio=2.1']" name="<name4>" [(ngModel)]="<name4>" #<name4>="ngModel">
		<ng-absolute-validator [formInstance]="<name4>"></ng-absolute-validator>
	</form>
    ...
</html>
#Rule Code Snippet
<!DOCTYPE html> 
<html lang="en"> 
    ...
    <form (ngSubmit)="onSubmit(form)" #form="ngForm">
		<input type="file" rule="dimension:width=200,height=200" name="<name1>" [(ngModel)]="<name1>" #<name1>="ngModel">
		<ng-absolute-validator [formInstance]="<name1>"></ng-absolute-validator>
		
		<input type="file" rule="dimension:min_width=200,max_height=200" name="<name2>" [(ngModel)]="<name2>" #<name2>="ngModel">
		<ng-absolute-validator [formInstance]="<name2>"></ng-absolute-validator>
		
		<input type="file" rule="dimension:max_width=200,min_height=200" name="<name3>" [(ngModel)]="<name3>" #<name3>="ngModel">
		<ng-absolute-validator [formInstance]="<name3>"></ng-absolute-validator>
		
		<input type="file" rule="dimension:ratio=2.1" name="<name4>" [(ngModel)]="<name4>" #<name4>="ngModel">
		<ng-absolute-validator [formInstance]="<name4>"></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({
			<name1> : ['',this.rv.map('dimension:width=200,height=200',<CUSTOM_MESSAGE>)],
			<name2> : ['',this.rv.map('dimension:min_width=200,max_height=200',<CUSTOM_MESSAGE>)],
			<name3> : ['',this.rv.map('dimension:max_width=200,min_height=200',<CUSTOM_MESSAGE>)],
			<name4> : ['',this.rv.map('dimension:ratio=1.2',<CUSTOM_MESSAGE>)],
		})
	}
}

//component.html 
<!DOCTYPE html> 
<html lang="en"> 
    ...
    <form [formGroup]="form">
		<input type="file" name="<name1>" formControlName="<name1>">
        <ng-absolute-validator [formInstance]="form.get(<name1>)"></ng-absolute-validator>
		
		<input type="file" name="<name2>" formControlName="<name2>">
        <ng-absolute-validator [formInstance]="form.get(<name2>)"></ng-absolute-validator>
		
		<input type="file" name="<name3>" formControlName="<name3>">
        <ng-absolute-validator [formInstance]="form.get(<name3>)"></ng-absolute-validator>
		
		<input type="file" name="<name4>" formControlName="<name4>">
        <ng-absolute-validator [formInstance]="form.get(<name4>)"></ng-absolute-validator>

	</form>
    ...
</html>