Formcontrolname validation not working


#1

Hi,
I am working on a ionic 3 project and i need to do validation.I have used formcontrolname and I have tried validating (for eg:‘required’ ,but its loaded at first and is not hidden after validating the field). The html and ts code are as follows:

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>

ts code:

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, ValidatorsPreformatted text.compose([ Validators.required])],
			passingyear : [null, Validators.compose([ Validators.required])],
			percent : [null, Validators.compose([ Validators.required])],
		
      array : this._FB.array([
       //  this.initTechnologyFields()
	  ])
	 
	  
	  
   });
      
   }
}