Mimes

The Mimes rule restricts an uploaded file to a specific, custom list of file extensions you provide — mimes:png,jpg accepts only PNG and JPG files, rejecting everything else regardless of what the Image rule's default set would otherwise allow. It's the right choice whenever an upload needs a narrower or entirely different set of accepted types than the built-in image formats, such as a document field limited to pdf,docx, a spreadsheet import limited to csv,xlsx, or a design-asset upload restricted to a single format like svg. Use the Image rule instead when the everyday case of accepting the common web image formats is all a field needs, without having to spell the list out yourself.

#Directive Code Snippet

<!DOCTYPE html> 
<html lang="en"> 
    ...
    <form (ngSubmit)="onSubmit(form)" #form="ngForm">
		<input mimes="<EXPECTED_VALUES>" 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="mimes:<EXPECTED_VALUES>" 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('mimes:<EXPECTED_VALUES>',<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>