Notes

app.component.html

<div class="container mx-auto py-2 border border-3 border-danger">
<section class="container mx-auto p-4 fst-italic border border-3 border-dark">
<form
(ngSubmit)="ref.valid && formsubmit()"
#ref="ngForm"
[formGroup]="associateDetails"
>
<p class="display-5 fw-normal">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 border border-3 border-secondary"
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 mt-2 fw-bold "
>
<p *ngIf="name.errors?.['required']">*please enter the 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 border border-3 border-secondary"
formControlName="associateId"
/>
<label for="Associate Id">Associate Id</label>
<!--associateId-validation -->
<div
*ngIf="(id.invalid && id.touched) || id.dirty || ref.submitted"
class="text-danger mt-2 fw-bold "
>
<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 rounded-pill border border-3 border-secondary"
formControlName="projectId"
/>
<label for="Project ID">Project ID</label>
<!--associateId-validation -->
<div
*ngIf="(projectid.invalid && projectid.touched) || projectid.dirty || ref.submitted"
class="text-danger mt-2 fw-bold rounded-pill"
>
<p *ngIf="projectid.errors?.['required']">
*please enter the project id
</p>
<p *ngIf="projectid.errors?.['pattern']">*invalid project id</p>
</div>
</div>
<!-- LOCATION -->
<div class="container mb-4 fw-bold">
<!-- OFFSHORE-radio -->
<div class="form-check">
<input
type="radio"
name="location"
id="offshore"
value="offshore"
class="form-check-input border border-3 border-secondary"
(change)="radioSelect($event)"
/>
<label for="offshore" class="form-check-label"> offshore</label>
</div>
<!-- ONSHORE-radio -->
<div class="form-check">
<input
type="radio"
name="location"
id="onshore"
value="onshore"
class="form-check-input border border-3 border-secondary"
(change)="radioSelect($event)"
/>
<label for="onshore" class="form-check-label"> onshore</label>
</div>
<!--location-OPTIONS -->
<div class="mb-4">
<select
name="location"
class="form-select rounded-pill border border-3 border-secondary"
formControlName="selectionLocation"
>
<option *ngFor="let branch of selectLocation" value="{{ branch }}">
{{ branch }}
</option>
</select>
</div>
</div>
<!-- CHECKBOXES -->
<div class="row row-cols-1 row-cols-sm-3 mb-4 mx-auto fw-bold">
<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 border-3 border-secondary"
(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-bold">
<label for="file">Upload Profile</label>
<input
type="file"
id="file"
class="form-control rounded-pill border border-3 border-secondary"
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-bold">
<textarea
placeholder="comments"
class="form-control rounded-pill border border-3 border-secondary"
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>

app.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);

}
}