# Formcontrolname validation not working

**URL:** <https://forum.ionicframework.com/t/formcontrolname-validation-not-working/145761>\
**Category:** ionic-v3\
**Created:** [October 26, 2018, 5:50am UTC](https://forum.ionicframework.com/t/formcontrolname-validation-not-working/145761 "2018-10-26T05:50:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Parvathi](https://avatars.discourse-cdn.com/v4/letter/p/bbce88/32.png) [@Parvathi](https://forum.ionicframework.com/u/Parvathi)\
**Post date:** [October 26, 2018, 5:50am UTC](https://forum.ionicframework.com/t/formcontrolname-validation-not-working/145761/1 "2018-10-26T05:50:37Z")

</div>

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:

```auto
 <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:

```auto
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()
	  ])
	 
	  
	  
   });
      
   }
}

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:12pm UTC](https://forum.ionicframework.com/t/formcontrolname-validation-not-working/145761/2 "2021-07-19T21:12:12Z")

</div>

Closed on July 19, 2021, 9:12pm UTC