angular-forms
form data
export let DEGREES = [
"GED",
"High School Diploma",
"Associate Degree",
"Bachelor of Arts",
"Bachelor of Science",
"Master of Arts",
"Master of Science",
"Doctor of Philosophy",
"Professional Degree",
"Associate of Arts",
"Associate of Science",
"Bachelor of Fine Arts",
"Bachelor of Social Work",
"Master of Business Administration",
"Master of Fine Arts",
"Master of Public Health",
"Doctor of Education",
"Doctor of Medicine",
"Juris Doctor",
"Not Listed"
];
export let COLLEGES = [
"Rutgers University",
"Princeton University",
"New Jersey Institute of Technology",
"University of Pennsylvania",
"Carnegie Mellon University",
"Pennsylvania State University",
"Temple University",
"Drexel University",
"Columbia University",
"New York University",
"University of Rochester",
"Syracuse University",
"Cornell University",
"Stony Brook University",
"Binghamton University",
"The City College of New York",
"Fordham University",
"University at Buffalo",
"Lehigh University",
"Villanova University",
"Not Listed"
];
export let MAJORS = [
"Business Administration",
"Psychology",
"Nursing",
"Biology",
"Education",
"Economics",
"English Language and Literature",
"Health Professions",
"Computer Science",
"Political Science",
"Engineering",
"Social Sciences",
"Communications",
"Anthropology",
"Mathematics",
"Environmental Science",
"Physics",
"Chemistry",
"Accounting",
"Art History",
"Sociology",
"Philosophy",
"Theater and Drama",
"Foreign Languages",
"Music",
"History",
"Journalism",
"Information Technology",
"Marketing",
"Finance",
"Not Listed"
];
export let YEARS = [
"Freshman",
"Sophomore",
"Junior",
"Senior",
"Graduate"
];
export let TECH_POSITIONS = [
{
label: "Full Stack Developer",
id: "fullStackDeveloper"
},
{
label: "Front End Developer",
id: "frontEndDeveloper"
},
{
label: "Back End Developer",
id: "backEndDeveloper"
}
];
export let DESIGN_POSITIONS = [
{
label: "Graphic Designer",
id: "graphicDesigner"
},
{
label: "Videographer",
id: "videoGrapher"
},
{
label: "Animation",
id: "animation"
},
];
export let BIZ_POSITIONS = [
{
id: "brandAmbassador",
label: "Brand Ambassador"
},
{
id: "sales",
label: "Sales"
},
{
id: "marketing",
label: "Marketing"
},
{
id: "projectManagement",
label: "Project Management"
},
{
id: "businessAnalyst",
label: "Business Analyst"
},
];
export let US_STATES: string[] = [
"Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia",
"Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey",
"New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"
];
import { Component, ChangeDetectorRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormGroup, FormBuilder, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { JobsService } from '../jobs.service';
import { BIZ_POSITIONS, COLLEGES, DEGREES, DESIGN_POSITIONS, IMAGES, MAJORS, TECH_POSITIONS, US_STATES, YEARS } from './jobForm';
const pattern = /[0-9\+\-\ ]/;
@Component({
selector: 'btm-job-application-form',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, NgbModule],
templateUrl: './job-application-form.html',
styleUrl: './job-application-form.scss'
})
export class JobApplicationForm {
degrees = DEGREES;
colleges = COLLEGES;
majors = MAJORS;
years = YEARS;
techPositions = TECH_POSITIONS;
designPositions = DESIGN_POSITIONS;
bizPositions = BIZ_POSITIONS;
usStates = US_STATES;
jobsForm!: FormGroup;
constructor(private fb: FormBuilder, private cd: ChangeDetectorRef, private jobsService: JobsService) {
this.initializeForm();
}
initializeForm() {
this.jobsForm = this.fb.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
fullStackDeveloper: [''],
frontEndDeveloper: [''],
backEndDeveloper: [''],
graphicDesigner: [''],
animation: [''],
videoGrapher: [''],
brandAmbassador: [''],
sales: [''],
marketing: [''],
projectManagement: [''],
businessAnalyst: [''],
usCitizenYes: [''],
usCitizenNo: [''],
resume: ['', Validators.required],
photo: ['', Validators.required],
educationLevel: ['', Validators.required],
college: ['', Validators.required],
major: ['', Validators.required],
address: ['', Validators.required],
address2: [''],
state: [''],
cellphone: ['', Validators.required],
city: ['', Validators.required],
zipcode: ['', Validators.required],
phone: ['', [Validators.required, Validators.pattern(pattern), Validators.minLength(10)]],
whyInternship: [''],
experience: [''],
dateOfBirth: ['', Validators.required],
felony: [''],
});
}
onSubmit() {
if (this.jobsForm.valid) {
this.jobsService.createJobApplication(this.jobsForm.value).subscribe({
next: () => {
this.jobsForm.reset();
// this.alertService.showAlert('Your application has been submitted. We will get back to you soon.', 'success');
},
error: (error: unknown) => {
console.error('Error submitting form', error);
}
});
} else {
this.jobsForm.markAllAsTouched();
}
}
onReset() {
this.jobsForm.reset();
}
}
<form [formGroup]="jobsForm" (ngSubmit)="onSubmit()" class="p-2" aria-describedby="form-error-message">
<div *ngIf="jobsForm.invalid && (jobsForm.touched || jobsForm.dirty)" id="form-error-message" role="alert" aria-live="assertive">
Please fill out all required fields.
</div>
<div class="form-group">
<div class="row">
<div class="col-12 col-lg-6">
<label for="firstName" class="text-primary">First Name</label>
<input type="text" class="form-control" id="firstName" [formControlName]="'firstName'" placeholder="First Name" required pattern="^[a-zA-Z]{3,}\$" aria-describedby="nameHelp">
<div id="nameHelp" class="form-text text-danger" *ngIf="jobsForm.get('firstName')?.invalid && jobsForm.get('firstName')?.touched">
full name is required.
</div>
</div>
<div class="col-12 col-lg-6">
<label for="lastName" class="text-primary">Last Name</label>
<input type="text" class="form-control" id="lastName" [formControlName]="'lastName'" placeholder="Last Name" required pattern="^[a-zA-Z]{3,}\$" aria-describedby="lastNameHelp">
<div id="lastNameHelp" class="form-text text-danger" *ngIf="jobsForm.get('lastName')?.invalid && jobsForm.get('lastName')?.touched">
full name is required.
</div>
</div>
</div>
<div class="border rounded p-3 my-3">
<div class="row">
<h5>Contact Info</h5>
<div class="col-12 col-lg-6">
<label for="email" class="text-primary">Email</label>
<input type="email" class="form-control" id="email" [formControlName]="'email'" placeholder="Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}\$">
<div *ngIf="jobsForm.get('email')?.errors?.['pattern'] && jobsForm.get('email')?.touched" class="form-text text-danger">
Please enter a valid email address.
</div>
</div>
<div class="col-12 col-lg-6">
<p>Phone</p>
<input type="text" class="form-control" [formControlName]="'phone'" placeholder="Phone" required pattern="[0-9]*" minlength="10" mask="(000) 000-0000">
</div>
</div>
</div>
<div class="border rounded p-3 my-3">
<div class="row">
<h5>Address</h5>
<div class="col-12 col-lg-6">
<label for="address" class="form-label">Street Address</label>
<input type="text" id="address" class="form-control" [formControlName]="'address'" placeholder="Address" required pattern="^\d+\s[a-zA-Z0-9\s,.'-]{3,}">
<p class="form-text">Permanent Residence</p>
<div *ngIf="jobsForm.get('address')?.touched">
<div *ngIf="jobsForm.get('address')?.errors?.['required']" class="form-text text-danger">
Address is required.
</div>
<div *ngIf="jobsForm.get('address')?.errors?.['pattern']" class="form-text text-danger">
Address format is invalid. Please include a number followed by the street name.
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<label for="address2" class="form-label">Address Line 2</label>
<input type="text" id="address2" class="form-control" [formControlName]="'address2'" placeholder="Address 2" required>
<p class="form-text">Apt #, etc.</p>
</div>
</div>
<div class="row my-3">
<div class="col-12 col-lg-3">
<label for="city" class="form-label">City</label>
<input type="text" id="city" class="form-control" [formControlName]="'city'" placeholder="City" required>
</div>
<div class="col-12 col-lg-3">
<label for="" class="form-label">State</label>
<select class="form-select" [formControlName]="'state'" required>
<option disabled>-- Select State --</option>
<option *ngFor="let state of usStates" [value]="state">{{ state }}</option>
</select>
</div>
<div class="col-12 col-lg-3">
<label for="" class="form-label">Zip Code</label>
<input type="text" class="form-control" [formControlName]="'zipcode'" placeholder="Zipcode" required>
</div>
</div>
</div>
<div class="row">
<h5 class="mt-2 text-primary">What Job Roles are you interested in?</h5>
<div class="col">
<h6 class="text-secondary">Tech</h6>
<div class="border rounded p-1">
<div class="col-4 d-inline-flex align-middle" *ngFor="let tech of techPositions">
<div class="form-check">
<input type="checkbox" class="form-check-input" [id]="tech.id" [formControlName]="tech.id" />
<label class="form-check-label" [attr.for]="tech.id">{{ tech.label }}</label>
</div>
</div>
</div>
</div>
<div class="col">
<h6 class="">Design</h6>
<div class="border rounded p-1">
<div class="col-4 d-inline-flex align-middle" *ngFor="let design of designPositions">
<div class="form-check">
<input type="checkbox" class="form-check-input" [id]="design.id" [formControlName]="design.id" />
<label class="form-check-label" [attr.for]="design.id">{{ design.label }}</label>
</div>
</div>
</div>
</div>
<div class="col">
<h6 class="">Biz</h6>
<div class="border rounded p-1">
<div class="col-4 d-inline-flex align-middle" *ngFor="let biz of bizPositions">
<div class="form-check">
<input type="checkbox" class="form-check-input" [id]="biz.id" [formControlName]="biz.id" />
<label class="form-check-label" [attr.for]="biz.id">{{ biz.label }}</label>
</div>
</div>
</div>
</div>
</div>
<div class="row m-2">
<div class="border rounded p-3">
<div class="row">
<div class="col-lg-4">
<p>Are you a US Citizen?</p>
<div class="border rounded p-2">
<input type="radio" class="with-gap" id="usCitizenYes" value="Yes" [formControlName]="'usCitizenYes'" />
<label for="usCitizenYes">Yes</label>
<input type="radio" class="with-gap" id="usCitizenNo" value="No" [formControlName]="'usCitizenNo'" />
<label for="usCitizenNo">No</label>
</div>
</div>
<div class="col-lg-4 ">
<label for="resume" class="form-label">Upload Resume</label>
<div class="form-group mb-3">
<input type="file" class="form-control" id="resume" [formControlName]="'resume'" required accept=".docx,.pdf">
</div>
</div>
<div class="col-lg-4 ">
<label for="photo" class="form-label">Upload Photo ID</label>
<div class="form-group mb-3">
<input type="file" class="form-control" id="photo" [formControlName]="'photo'" required accept="image/*">
<div class="invalid-feedback">
Please upload your photo ID.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border rounded p-3">
<div class="row">
<h5 class="mt-2">Education</h5>
<div class="col-12 col-lg-3">
<p>Highest Degree earned</p>
<select class="form-select mb-2" [formControlName]="'educationLevel'" required>
<option value="" disabled>-- Select Degree --</option>
<option *ngFor="let degree of degrees" [value]="degree">{{ degree }}</option>
</select>
</div>
<div class="col-12 col-lg-3">
<p>College</p>
<select class="form-select mb-2" [formControlName]="'college'" required>
<option value="" disabled>-- Select College --</option>
<option *ngFor="let college of colleges" [value]="college">{{ college }}</option>
</select>
</div>
<div class="col-12 col-lg-3">
<p>Major</p>
<select class="form-select mb-2" [formControlName]="'major'" required>
<option value="" disabled>-- Select Major --</option>
<option *ngFor="let major of majors" [value]="major">{{ major }}</option>
</select>
</div>
<div class="col-12 col-lg-3">
<p>Academic Year</p>
<select name="" id="" class="form-select mb-2">
<option value="" disabled>-- Select Academic Year --</option>
<option *ngFor="let year of years" [value]="year">{{ year }}</option>
</select>
</div>
</div>
</div>
<div class="row p-3 justify-content-end">
<div class="col-lg-2">
<div class="d-grid gap-2">
<button class="btn btn-secondary px-5" (click)="onReset()" type="button">Reset</button>
<button class="btn btn-primary px-5" (click)="onSubmit()" type="button" [disabled]="jobsForm.invalid">Save</button>
</div>
</div>
</div>
</div>
</form>