Reactive FormArray Example in Angular

Justin Thadathil — Sat, 26 Mar 2022 07:39:47 +0000

In this article, I’d like to showcase the process to create and apply validations in FormArray

What’s a FormArray
A FormArray is responsible for managing a collection of AbstractControl, which can be a FormGroup, a FormControl, or another FormArray. FormArray is one of the three fundamental building blocks used to define forms in Angular, along with FormControl and FormGroup.

Note: for dropdown i have used Angular Syncfusion. please install its package and import the package. you can use any other package also

let Further see the steps to create a form array

a. Import FormsModule and ReactiveFormsModule in your app.module.ts file.

b. Now in the component file add FormGroup variable like

addMemberItemInputForm = {} as FormGroup;

c. call FormBuilder in the constructor like

private formBuilder: FormBuilder

d. Now initialise form controls by calling it in a function or the constructor like i have used a function called createAddMemberItemInputForm. add the required validations to the controls. here itemDetails is declared a form Array in the below code and i have added a common Validation for form array in which only 5 rows can be added. you can remove or change it.

createAddMemberItemInputForm(){
  this.addMemberItemInputForm = this.formBuilder.group({
     memberName: ['', Validators.required],
     itemType: ['', Validators.required],
     itemDetails: this.formBuilder.array(
    [this.createEmpFormGroup()],
    [Validators.required, Validators.maxLength(5)])
   });
 }

e. Now i will use getter to binds an object property to a function in the createAddMemberItemInputForm() memberName object property is bind to a function called get memberName()

 get memberName() {
    return this.addMemberItemInputForm.get('memberName');
 }

f. Like this for every control create a getter function.

g. Now in the form array there is a function called this.createEmpFormGroup() that is used to initialise the controls in form array like the code bellow

createEmpFormGroup(){
   return this.formBuilder.group({
     itemName: ['', [Validators.required]],
     quantity: ['', [Validators.required, Validators.max(5)]],
     price: ['', [Validators.required]]
   })
 }

h. Now create a add and delete row for form array controls like

addEmployee() {
  let newMem = this.createEmpFormGroup();
  this.itemDetails.push(newMem);
}

deleteEmployee(i: number) {
  this.itemDetails.removeAt(i);
}

i. Coming to the HTML side add the formGroup and formControlName

j. For outer form control add

<div class="col-6">
   <label class="form-label">Enter Member Name</label>
   <input type="text" class="form-control" placeholder="Member Name" formControlName="memberName">
  <label *ngIf="memberName?.invalid && isValidFormSubmitted != null && !isValidFormSubmitted" class="error">
   Team name is required.
  </label>
</div>

k. For form Array add

<tbody formArrayName="itemDetails">
  <tr  *ngFor="let item of itemDetails.controls; let i = index" [formGroupName]="i">
   <td>
    <input type="text" class="form-control" placeholder="Enter Item Name" formControlName="itemName">
    <label *ngIf="itemDetails.controls[i].get('itemName')?.errors?.['required'] && isValidFormSubmitted != null && !isValidFormSubmitted" class="error">
     Employee name required.
  </label>
 </td>
<td>

l. Now reaching this step you have almost implemented form array with proper validations.

m. Entire code with live preview is on Github you can refer it.

Code available on GitHub:- [(https://github.com/justinthadathil/AngularFormArray]

Live preview on - [(https://justinthadathil.github.io/Angular_Form_Array/]

Upload images to Cloudinary using Angular

Justin Thadathil — Fri, 18 Mar 2022 08:11:21 +0000

Cloudinary is a SaaS based platform that helps you to store high quality images, where in your free tire you can store 25GB of images and videos. it has may other options to customize the image.
here I required the basic feature that is upload a image to Cloudinary via Angular. in my recent project, I was using firebase storage to store images but this time for a change thought to learn something new taking an inspiration by my tech enthusiast friend I though to try it out.

I am using Angular version 12. here for this basic upload feature there is no need to import any Cloudinary package. let's further roll out into the steps:-

First lets set up Cloudinary part

Sign in or login to your Cloudinary account.
now click on settings and then upload tab.
in the tab find for Upload presets option
now click on Add upload preset and add a Upload preset name.
select Signing Mode as unsigned and add a folder name.
now click on save button

Now in the Angular Project

From the input type file, get the file value
Pass it to a function that accept the image data

function onChangeImg(){
   data.append('file', file);
   data.append('upload_preset', 'Upload presets name here');
   data.append('cloud_name', 'copy from dashboard')
   data.append('public_id', file Name+todaysDate)
   this.myService.uploadSignature(data).subscribe((imageData) => {
     this.imageUrl = imageData.url;
     this.registrationForm.patchValue({
       signatureUrl: imageData.url
     });
   })
}

Now in the Service side

//upload signature
  uploadSignature(vals): Observable<any>{
    let data = vals;
    return this.http.post('https://api.cloudinary.com/v1_1/cloud_name/image/upload',data)
  }

In the angular once the function is submitted, then in the response you will get a image URL that can be store and used to access the uploaded image.

This were the few process to be followed which in return helps tp store image and that can be retrieved properly. Cloudinary is a good tool to fulfill the above requirements.

Anyone reading the article faces any issues can comment bellow. I will love to reply. Thank you

DEV Community: Justin Thadathil

Reactive FormArray Example in Angular

Upload images to Cloudinary using Angular