OwenKelvin/Angular-School-Management-System

<h1>Create Academic Year</h1>
<form [formGroup]="academicYearForm">
  <fieldset>
    <legend>Academic Year Period</legend>
    <section class="row">
      <section class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <mat-form-field>
          <mat-icon matPrefix>calendar_today</mat-icon>
          <label hidden for="name">Academic Year Name</label>

          <input (blur)="validateName()" id="name" type="text" placeholder="Academic Year Name" formControlName="name"
            matInput>
          <mat-error *ngIf="errors.name">
            {{ errors.name }}
          </mat-error>
        </mat-form-field>
      </section>
      <section class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <mat-form-field>
          <input matInput [matDatepicker]="startDate" placeholder="Start Date" formControlName="startDate"
            (blur)="validateStartDate()">
          <mat-datepicker-toggle matSuffix [for]="startDate">
            <mat-icon style="font-size: 1.7em;" matDatepickerToggleIcon>date_range</mat-icon>
          </mat-datepicker-toggle>
          <mat-datepicker #startDate>

          </mat-datepicker>
          <mat-error *ngIf="errors.startDate">
            {{ errors.startDate }}
          </mat-error>
        </mat-form-field>
      </section>
      <section class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <mat-form-field>
          <input matInput [matDatepicker]="endDate" placeholder="endDate" formControlName="endDate"
            (blur)="validateEndDate()">
          <mat-datepicker-toggle matSuffix [for]="endDate">
            <mat-icon style="font-size: 1.7em;" matDatepickerToggleIcon>date_range</mat-icon>
          </mat-datepicker-toggle>
          <mat-datepicker #endDate></mat-datepicker>
          <mat-error *ngIf="errors.endDate">
            {{ errors.endDate }}
          </mat-error>
        </mat-form-field>
      </section>
    </section>
  </fieldset>
  <fieldset formArrayName="units">
    <legend>Academic Year Subjects/Units</legend>
    <section class="container-fluid">
      <section style="border-left: 10px solid rgb(57, 68, 160); background: rgb(220, 220, 229);"
        *ngFor="let unit of units.controls; let i = index;" class="row mt-2" [formGroupName]="i">

        <section class='col-lg-12 col-md-12 col-sm-12 col-xs-12 m-1 p-3'>
          <mat-checkbox formControlName="value" (change)="selectionChange(i)" color="primary">
            {{ unit.get('subject').value }}
          </mat-checkbox>
        </section>
        <section class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <app-select type="unit-levels" formControlName="subjectLevel" multiple>
          <!-- <app-select [parentId]="unit.get('subjectId').value" type="unit-levels" formControlName="subjectLevel" multiple> -->
          </app-select>
        </section>
      </section>
    </section>
  </fieldset>
  <section>
    <button [disabled]="!academicYearForm.valid" (click)="submit()" style="margin-top: 20px" mat-raised-button
      color="primary">Save Academic Year</button>
  </section>
</form>