OwenKelvin/Angular-School-Management-System

<h1> {{ newForm ? 'Create': 'Update'}} Class Level</h1>
<form [formGroup]="classLevelForm" (submit)="submit()">
  <fieldset>
    <legend>General Details</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" class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
        <app-select type="class-level-categories" formControlName="classLevelCategory"></app-select>
      </section>
      <section class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
        <mat-form-field>
          <label hidden for='abbr'>Abbreviation</label>
          <input (blur)='validateAbbr()' id='abbr' type='text' placeholder='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">
              {{ classLevelForm.get('active').value ? 'Active' : 'Inactive'}}
            </mat-slide-toggle>
          </section>
        </section>
      </section>
    </section>

  </fieldset>
  <section class="row" style="margin-top: 20px">
    <section class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <button [disabled]="!classLevelForm.valid" type="submit" mat-raised-button class="btn btn-success">
        {{ newForm ? 'Create': 'Update'}} Class Level</button>
    </section>
  </section>

</form>