Today, We want to share with you Angular 6 Image Upload with Validation Example.In this post we will show you Angular 6 Multiple File Upload with Validation Example, hear for file extension validation in Angular 6 we will give you demo and example for implement.In this post, we will learn about Image Upload with Validation in Angular 6 with an example.

Angular 6 Image Upload with Validation Example

There are the Following The simple About Angular 6 Image Upload with Validation Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Angular 6 file upload with Validation, so the some major files and Directory structures for this example is following below.

• index.html

Angular 6 Example

Angular Latest My Previous Post With Source code Read more…..

1. Angular 6 Folder Project Structure
2. Angular 6 CLI Installation
3. Angular 6 Module File
4. Angular 6 Components
5. Angular 6 Services
6. Angular 6 Routing
7. Angular 6 CSS
8. Angular 6 Class Binding
9. Angular 6 Animation
10. Angular 6 Templating
11. Angular 6 HTTP Client

Image Upload with Validation in Angular 6

member-form/member-form.component.ts

import { Component } from '@angular/core';

import { Member } from '../member';

@Component({
selector: 'app-member-form',
templateUrl: './member-form.component.html',
styleUrls: ['./member-form.component.css']
})
export class MemberFormComponent {

qualifications = ['Jaydeep Gondaliya', 'Krunal sisodariya',
'Ankit Shah', 'Jigar Shah'];

model = new Member(18, 'Dr IQ', this.qualifications[0], 'Chuck Overstreet');

submitted = false;

onSubmit() { this.submitted = true; }

newMember() {
this.model = new Member(42, '', '');
}
}

member-form/member-form.component.html

Simple Member Form Angular 6 Image Upload with Validation Example

Member Form

Name
Name is required

Status
Member Qualification{{pow}}
Qualification is required

Submit
New Member



You Angular 6 submitted the following:

Name
{{ model.name }}


Status
{{ model.status }}


Qualification
{{ model.qualification }}

Edit

member.ts

export class Member {

constructor(
public id: number,
public name: string,
public qualification: string,
public status?: string
) { }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MemberFormComponent } from './member-form/member-form.component';

//Angular 6 validate file input
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,
MemberFormComponent
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.html

app.component.ts

//Angular 6 validate file input import
import { Component } from '@angular/core';

Angular 6 validate file input Component
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

forms.css

.ng-valid[required], .ng-valid.required {
border-left: 6px solid #c60000;
}

.ng-invalid:not(form) {
border-left: 6px solid #a94442;
}

Angular 6 Image Upload with Validation Example

Component

Example Angular 6 – File Uploads with Angular Reactive Forms

@Component({
template: `

Submit

`
})
export class MemberComponent {

memberGroup = this.fb.group({
file: [null, Validators.required]
});

constructor(private fb: FormBuilder) {}

}

File Uploads with Angular Reactive Forms

//Angular 6 Image Upload with Validation Example Input

JS part

uploadImageFile Events

uploadImageFile(event) {
let fileimgmain = new FileReader();

if(event.target.files && event.target.files.length) {
const [file] = event.target.files;
fileimgmain.readAsDataURL(file);

fileimgmain.onload = () => {
this.memberGroup.patchValue({
file: fileimgmain.result
});

this.cd.markForCheck();
};
}
}

Angular 6 Component

@Component({
template: `

Submit

`
})
export class MemberComponent {

memberGroup = this.fb.group({
file: [null, Validators.required]
});

constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) {}

uploadImageFile(event) {
const fileimgmain = new FileReader();

if(event.target.files && event.target.files.length) {
const [file] = event.target.files;
fileimgmain.readAsDataURL(file);

fileimgmain.onload = () => {
this.memberGroup.patchValue({
file: fileimgmain.result
});
this.cd.markForCheck();
};
}
}

}

Angular 6 File upload validation before the file uploads

• Angular 6 applications – Insert, Fetch , Edit – update , Delete Operations
• Angular 6 CRUD
• Angular 6 and ASP.NET Core 2.0 Web API
• Angular 6 features
• Angular 6 Form Validation
• Angular 6 – User Registration and Login
• Angularjs 6 User Registration and Login Authentication
• Angular 6 CLI Installation Tutorial With Example
• Angular 6 Toast Message Notifications From Scratch

Angular 6 CRUD Operations Application Tutorials

Read :

• Technology
• Google Adsense
• Programming

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angular 6 Image Upload with Size Type Dimension Validation.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.