Notes

html

<div class="container py-2 border border-3 border-black">
<section class="container mx-auto p-4 fst-normal">
<form
(ngSubmit)="ref.valid && formsubmit()"
#ref="ngForm"
[formGroup]="associateDetails"
>
<p class="display-6 fw-bolder">Form Validation*</p>

<!-- ASSOCIATE-DETAILS -->
<div class="mb-4 form-floating">
<input
type="text"
name="associateName"
id="Associate Name"
placeholder="Associate Name"
class="form-control p-1 border border-1"
formControlName="associateName"
autocomplete="off"
/>
<label for="Associate Name">Associate Name</label>
<!--associateName-validation -->
<div
*ngIf="(name.invalid && name.touched) || name.dirty || ref.submitted"
class="text-danger"
>
<p *ngIf="name.errors?.['required']">Please enter Associate name.</p>
<p *ngIf="name.errors?.['minlength']">Minlength is "5"</p>
<p *ngIf="name.errors?.['maxlength']">Maxlength is "30"</p>
<p *ngIf="name.errors?.['pattern']">Only alphabets and space are allowed</p>
</div>
</div>

<!--ASSOCIATE-ID-->
<div class="mb-4 form-floating">
<input
type="text"
id="Associate Id"
placeholder="Associate Id"
autocomplete="off"
class="form-control p-1 border border-1"
formControlName="associateId"
/>
<label for="Associate Id">Associate Id</label>
<!--associateId-validation -->
<div
*ngIf="(id.invalid && id.touched) || id.dirty || ref.submitted"
class="text-danger"
>
<p *ngIf="id.errors?.['required']">Please enter the Associate Id</p>
<p *ngIf="id.errors?.['pattern']">Invalid Associate Id</p>
</div>
</div>

<!-- PROJECT-ID -->
<div class="mb-4 form-floating">
<input
type="text"
id="Project ID"
placeholder="Project ID"
autocomplete="off"
class="form-control p-1 border border-1"
formControlName="projectId"
/>
<label for="Project ID">Project ID</label>
<!--associateId-validation -->
<div
*ngIf="(projectid.invalid && projectid.touched) || projectid.dirty || ref.submitted"
class="text-danger"
>
<p *ngIf="projectid.errors?.['required']">
Please enter the Project Id
</p>
<p *ngIf="projectid.errors?.['pattern']">Invalid Project Id</p>
</div>
</div>

<!-- OFFSHORE-radio -->
<div class="d-flex flex-row">
<div class="form-check border-2">
<input
type="radio"
name="location"
id="offshore"
value="offshore"
class="form-check-input "
(change)="radioSelect($event)"
/>
<label for="offshore" class="form-check-label">Offshore</label>
&nbsp;
</div>

<!-- ONSHORE-radio -->
<div class="form-check border-2">
<input
type="radio"
name="location"
id="onshore"
value="onshore"
class="form-check-input"
(change)="radioSelect($event)"
/>
<label for="onshore" class="form-check-label">Onshore</label>
</div>
</div>

<!-- LOCATION -->
<div>
<select
name="location" class="form-select " formControlName="selectionLocation" required [class.is-invalid]="associateDetails.controls['selectionLocation'].invalid && associateDetails.controls['selectionLocation'].touched">
<option value="">select your location</option>
<option *ngFor="let branch of selectLocation" value="{{ branch }}">
{{ branch }}
</option>
</select>
<!--Location Validation-->
<div *ngIf="associateDetails.controls['selectionLocation'].invalid && associateDetails.controls['selectionLocation'].touched">
<small class="text-danger" *ngIf="associateDetails.controls['selectionLocation']!.errors?.['required']">please select a location.</small>
</div>
</div>

<!-- CHECKBOXES -->
<div class="row row-cols-1 row-cols-sm-3 mt-3 mb-4 mx-auto fw-normal">
<div
class="mb-3 form-check"
*ngFor="let skill of skills; let ind = index"
>
<input
type="checkbox"
name="{{ skill.name }}"
id="{{ skill.name }}"
value="{{ skill.value }}"
class="form-check-input border-2 "
(change)="afterCheckBoxSelection($event)"
/>
<label for="{{ skill.name }}" class="form-check-label">
{{ skill.name }}</label
>
</div>
<!--checkbox-validation -->
<div
*ngIf="checkbox < 5 && associateDetails.get('skillsArray').invalid || ref.submitted"
class="text-danger"
>
Select min 5 skills
</div>
</div>

<!-- UPLOAD-PROFILE -->
<div class="mb-4 fw-normal">
<label for="file">Upload Profile</label>
<br>
<input
type="file"
id="file"
class="p-1 border border-1"
formControlName="uploadProfile"
/>
<!--profile-validation -->
<div *ngIf="profile.invalid && profile.touched || ref.submitted" class="text-danger">
Please upload profile picture
</div>
</div>

<!-- COMMENTS -->
<div class="mb-4 fw-normal">
<textarea
placeholder="comments"
class="form-control p-1 border border-1"
formControlName="comments"
></textarea>
<!--comments-validation -->
<div
*ngIf="(comments.invalid && comments.touched) || ref.submitted"
class="text-danger"
>
Enter the comments
</div>
</div>

<!-- BUTTONS -->
<div class="d-flex justify-content-center gap-3">
<button type="submit" class="btn btn-primary">
Submit
</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</form>
</section>
</div>


ts

import { Component } from '@angular/core';
import{FormBuilder,Validators,FormArray,FormControl} from "@angular/forms"


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

skills=[
{name:'HTML,CSS3,JS',value:'HTML,CSS3,JS'},
{name:'Angular 8',value:'Angular 8'},
{name:'Express js',value:'Express js'},
{name:'SASS',value:'SASS'},
{name:'React JS',value:'React JS'},
{name:'Node JS',value:'Node JS'},
{name:'ES5,ES6,ES7..',value:'ES5,ES6,ES7..'},
{name:'Vue JS',value:'Vue JS'},
{name:'Mongo DB',value:'Mongo DB'},
{name:'Bootstrap 5',value:'Bootstrap 5'},
{name:'TypeScript',value:'TypeScript'},
{name:'AWS',value:'AWS'}
]

constructor(public formBuliderObj:FormBuilder){}

associateDetails=this.formBuliderObj.group({
associateName:['',[Validators.required,Validators.minLength(5),Validators.maxLength(30),Validators.pattern('[a-zA-Z][a-zA-Z ]+[a-zA-Z]$')]],
associateId:['',[Validators.required,Validators.minLength(6),Validators.maxLength(6),Validators.pattern('^[0-9]{6}')]],
projectId:['',[Validators.required,Validators.pattern('[a-zA-Z0-9]{12}')]],
uploadProfile:['',Validators.required],
comments:['',Validators.required],
selectionLocation:['',Validators.required],
skillsArray:this.formBuliderObj.array([],Validators.minLength(5))
})


// LOCATION
offShore:string[]=['chennai','bangalore']
onShore:string[]=['hyderabad','pune','kochi']

selectLocation:string[]=[]
radioSelect(event){
console.log(event.target.value)
if(event.target.value ==='offshore'){
this.selectLocation=this.offShore;
console.log(this.selectLocation);

}

if(event.target.value ==='onshore'){
this.selectLocation=this.onShore;
console.log(this.selectLocation);

}

}

// CHECKBOXES
afterCheckBoxSelection(event){
//get skillsArray
let sk= this.associateDetails.get('skillsArray') as FormArray
//skill is checked
if(event.target.checked){

sk.push(new FormControl(event.target.value));
}
// skill is unchecked
else{
let indexOfFormContolArray=0;
sk.controls.forEach((fc:FormControl)=>{
if(fc.value == event.target.value){
//remove from array
sk.removeAt(indexOfFormContolArray)
return;
}
indexOfFormContolArray++;
})

}

}

// getters
get name(){
return this.associateDetails.get('associateName')
}
get id(){
return this.associateDetails.get('associateId')
}
get projectid(){
return this.associateDetails.get('projectId')
}
get checkbox(){
let a= this.associateDetails.get('skillsArray') as FormArray
return a.length
}
get profile(){
return this.associateDetails.get('uploadProfile')
}
get comments(){
return this.associateDetails.get('comments')
}


formsubmit(){
console.log(this.associateDetails.value);
// console.log(this.associateDetails.controls);

}
}


module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';