OwenKelvin/Angular-School-Management-System

<h1> {{ newForm ? 'Create': 'Update'}} Subject/Unit</h1>
<form [formGroup]="unitForm" (submit)="submit()">
  <fieldset>
    <legend>General Subject Name</legend>
    <section class="row">
      <section class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <mat-form-field>
          <label hidden for="name">Subject/Unit Name</label>
          <input (blur)="validateName()" id="name" type="text" placeholder="Name" formControlName="name" matInput>
          <mat-error *ngIf="errors.name">
            {{ errors.name }}
          </mat-error>
        </mat-form-field>
      </section>
      <section *ngIf="!category && hasCategories" class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <app-select type="units" formControlName="unitCategory"></app-select>
      </section>
      <section class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
        <mat-form-field>
          <label hidden for="name-abbr">Subject/Unit abbreviation</label>
          <input (blur)="validateAbbr()" id="name-abbr" type="text" placeholder="Subject/Unit Abbreviation"
            formControlName="abbr" matInput>
          <mat-error *ngIf="errors.abbr">
            {{ errors.abbr }}
          </mat-error>
        </mat-form-field>
      </section>
      <section class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <section class="row">
          <section class="col-lg-6 col-md-7 col-sm-8 col-xs-7">
            <label for="active">Subject Is Active</label>
          </section>
          <section class="col-lg-6 col-md-5 col-sm-4 col-xs-5">
            <mat-slide-toggle id="active" color="primary" formControlName="active">
              {{ unitForm.get('active').value ? 'Active' : 'Inactive'}}
            </mat-slide-toggle>
          </section>
        </section>
      </section>
    </section>

  </fieldset>
  <fieldset>
    <legend>Subject/Unit Levels</legend>
    <section>
      <button type="button" mat-raised-button class="btn btn-primary" (click)="addSubjectLevel()">
        <mat-icon matPrefix>add</mat-icon>Add
      </button>
    </section>
    <section class='row' style="margin-top: 20px;" formArrayName="subjectLevels">
      <section class="col-lg-6 col-md-12 col-sm-12 col-xs-12"
        *ngFor="let subjetLevel of subjectLevels().controls; let i = index" [formGroupName]="i">
        <section class="row">
          <section class='col-lg-5 col-md-5 col-sm-5 col-xs-9'>
            <mat-form-field>
              <label hidden for='name'>Subject/Unit Name</label>
              <input (blur)='validatesubjectLevelName(i)' id='name' type='text' placeholder='Name'
                formControlName='name' matInput>
              <mat-error *ngIf='errors.subjectLevels[i]'> {{ errors.subjectLevels[i] }} </mat-error>
            </mat-form-field>
          </section>
          <section class='col-lg-5 col-md-5 col-sm-5 col-xs-9'>
            <app-select type="class-levels:level" formControlName='classLevels' multiple></app-select>
          </section>
          
          <section class="col-">
            <button (click)="deleteSubjectLevel(i)" type="button"
              [disabled]="i === 0" mat-icon-button>
              <mat-icon class="text-danger" clickable>delete</mat-icon>
            </button>

          </section>
        </section>
      </section>
    </section>
    <section hidden class="col-lg-12">
      <app-message type="error">No Data Found</app-message>
    </section>
  </fieldset>
  <section *ngIf="submitButton" class="row" style="margin-top: 20px">
    <section class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <button [disabled]="!unitForm.valid" type="submit" mat-raised-button class="btn btn-success">
        {{ newForm ? 'Create': 'Update'}} Subject/Unit</button>
    </section>
  </section>

</form>