Проверка имени Formcontrol не работает в ionic3

Question

Я работаю над проектом ionic 3, и мне нужно выполнить необходимую проверку файлов, как в коде. Я использовал formcontrolname и попытался проверить (например, для: «required», но он загружен сначала и не скрывается после проверки поля). Я использовал div для отображения ошибок и если условие не работает в этом случае. Код выглядит следующим образом:

HTML code:

  <form [formGroup]="form" (ngSubmit)="manage(form.value)" class="job-form">
  <div class="form-content">
    <ion-list>



      <!-- Assign the array FormArray to the form
            where we want to track/generate new input track fields -->
      <div formArrayName="array" margin-bottom>


        <section [formGroupName]="i" *ngFor="let tech of 
          form.controls.array.controls; let i = index">



          <ion-item-group>



            <ion-item>
              <ion-label stacked>Qualification Category </ion-label>

              <select-searchable class="searchbar-input" item-content formControlName="qualification_category" name="qualification_category" itemValueField="id" itemTextField="name" [items]="qualification_category_search" (onChange)="qualification_categoryChange()"
                [isMultiple]="false">

              </select-searchable>


            </ion-item>

            <div class="error" *ngIf="form.controls['qualification_category'].hasError('required') ">* Required!</div>
            <ion-item>
              <ion-label stacked>Qualification</ion-label>


              <select-searchable class="searchbar-input" item-content formControlName="qualification" name="qualification" [items]="qualification_search" searchPlaceholder="Enter qualification" itemValueField="id" itemTextField="name" [canSearch]="true" [canClear]="true"
                [isMultiple]="false" (onSearch)="qualificationFun($event)">
              </select-searchable>

            </ion-item>

            <div class="error" *ngIf="form.controls['qualification'].hasError('required') ">* Required!</div>


            <ion-item>
              <ion-label stacked>Specialization</ion-label>
              <ion-input type="text" placeholder="eg: Computer Science" formControlName="specialization" name="specialization"></ion-input>
            </ion-item>
            <div class="error" *ngIf="form.controls['specialization'].hasError('required') ">* Required!</div>

            <ion-item>
              <ion-label stacked>College</ion-label>
              <ion-input type="text" placeholder="eg: Govt College" formControlName="college" name="college"></ion-input>
            </ion-item>

            <div class="error" *ngIf="form.controls['college'].hasError('required') ">* Required!</div>

            <ion-item>
              <ion-label stacked>Board/University</ion-label>


              <select-searchable class="searchbar-input" item-content formControlName="university" name="university" [items]="university_search" searchPlaceholder="Enter university" itemValueField="id" itemTextField="name" [canSearch]="true" [canClear]="true" [isMultiple]="false"
                (onSearch)="universityFun($event)">
              </select-searchable>
            </ion-item>

            <div class="error" *ngIf="form.controls['university'].hasError('required') ">* Required!</div>
            <ion-item>
              <ion-label stacked>Status</ion-label>
              <select-searchable class="searchbar-input" item-content formControlName="status" name="status" itemValueField="id" itemTextField="name" [items]="status_search" [isMultiple]="false">

              </select-searchable>
            </ion-item>

            <div class="error" *ngIf="form.controls['status'].hasError('required')">* Required!</div>


            <ion-item>
              <ion-label stacked>Year Of Passing</ion-label>
              <ion-input type="text" placeholder="eg: 2018" formControlName="passingyear" name="passingyear"></ion-input>
            </ion-item>
            <div class="error" *ngIf="form.controls['passingyear'].errors?.required">* Required!</div>
            <ion-item>
              <ion-label stacked>Grade / Percentage</ion-label>
              <ion-input type="text" placeholder="eg: 92%" formControlName="percent" name="percent"></ion-input>
            </ion-item>


            <div class="error" *ngIf="form.controls['percent'].hasError('required')">* Required!</div>


            <!-- Allow generated input field to be removed -->
            <span float-left ion-button icon-left clear *ngIf="form.controls.array.length > 1" (click)="removeInputField(i)">
                   <ion-icon name="close"></ion-icon>
                   Remove
                </span>
          </ion-item-group>

          <span float-left ion-button icon-left clear *ngIf="form.controls.array.length > 0" (click)="removeInputField(i)">
                   <ion-icon name="close"></ion-icon>
                   Remove
                </span>
        </section>
      </div>


      <!-- Allow new input field to be generated/added -->
      <span ion-button float-right icon-right clear (click)="addNewInputField(form.value)" class="add-button">
             <ion-icon name="add" ></ion-icon>
             <label style="margin-left:5px;margin-right: 5px">Add</label>
       </span>


    </ion-list>


    <!-- Only allow form to be submitted IF validation criteria for
            input fields has been successfully passed -->
    <!--<button
        ion-button
        block
        margin-top
        color="primary"
        text-center
        [disabled]="!form.valid">Submit</button>-->

    <button ion-button block color="secondary">Save</button>

  </div>
</form>

The typescript for this is as follows:

    import { FormBuilder, FormArray, FormGroup,Validators,FormControl } from 
    '@angular/forms';

   export class Editresume6Page {


   form : FormGroup;



   formArr=[];    // array for form submission

   qualification_category:any;
   specialization:any;
   college:any;
   passingyear:any;
   percent:any;

   qualification: any;
   university: any;



    constructor(public navCtrl: NavController, public navParams: NavParams, 
    private _FB: FormBuilder, public restProvider: RestProvider  ) {

    this.form = this._FB.group({
    qualification_category: [null,Validators.compose([Validators.required])],
    qualification :  [null, Validators.compose([ Validators.required])],
    specialization : [null, Validators.compose([ Validators.required])],
    college :  [null, Validators.compose([ Validators.required])],
    university:  [null, Validators.compose([ Validators.required])],
    status :  [null, Validators.compose([Validators.required])],
    passingyear : [null, Validators.compose([ Validators.required])],
    percent : [null, Validators.compose([ Validators.required])],

      array : this._FB.array([
       //  this.initTechnologyFields()
      ])
     });
      }
    }

Есть ли дополнительный код для добавления или удаления. Я пробовал со многими форматами, но он не работал должным образом. Не могли бы вы помочь мне с этой проблемой.