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