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 />
        <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 />
        <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 />
          <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 />
        </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 />
          <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 />
          <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 />
        </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 />
        </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>&nbsp;&nbsp;&nbsp;
              <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 />
            </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>