In ionic 3, FormBuilder to check the validity of a form we use "form.valid" property of formGroup, which returns true if valid and false if invalid,
My problem is when i am setting values from javascript, "form.valid" gives true even setting any value which is not given(available) in the options of the select control.
I want select control to be invalid if select values are different from the given option.
Here's the working Plunker link,
Codes speaks better,
Here is the design part(page.html),
<button ion-button color="app" (click)="setval_valid()">Set valid values</button>
<button ion-button color="app" (click)="setval()">Set Different invalid values</button>
<form [formGroup]="knowledge" *ngIf="!retryButton">
<ion-list>
<ion-item>
<ion-label floating>Educational Qualification Details <span>*</span></ion-label>
<ion-select formControlName="f2_edudetail" interface="popover" (change)="getTotal()">
<ion-option value="illiterate"> Illiterate </ion-option>
<ion-option value="primary education"> Education </ion-option>
<ion-option value="matriculate"> Matriculate </ion-option>
<ion-option value="graduate"> Graduate </ion-option>
<ion-option value="post graduate"> Post Graduate </ion-option>
</ion-select>
</ion-item>
<div *ngIf="!knowledge.controls.f2_edudetail.valid && (knowledge.controls.f2_edudetail.dirty || submitAttempt)">
<p *ngIf="knowledge.controls.f2_edudetail.errors.required">This field is required.</p>
</div>
<ion-item>
<ion-label floating>What Is Your Proficiency In English?<span>*</span></ion-label>
<ion-select formControlName="f2_proficiency" interface="popover">
<ion-option value="fluent">Fluent</ion-option>
<ion-option value="read only">Read Only</ion-option>
<ion-option value="write only">Write Only</ion-option>
<ion-option value="speak only">Speak Only</ion-option>
<ion-option value="understand only">Understand Only</ion-option>
<ion-option value="Don't Know">Don't Know</ion-option>
</ion-select>
</ion-item>
<div *ngIf="!knowledge.controls.f2_proficiency.valid && (knowledge.controls.f2_proficiency.dirty || submitAttempt)">
<p *ngIf="knowledge.controls.f2_proficiency.errors.required">This field is required.</p>
</div>
<ion-item>
<ion-label floating>Participation In Farming Programs</ion-label>
<ion-select formControlName="f2_participation" interface="popover" (ionChange)="setValidation()">
<ion-option value="yes">Yes</ion-option>
<ion-option value="no">No</ion-option>
</ion-select>
</ion-item>
</ion-list>
</form>
<button ion-button color="app" (click)="save()">Save</button>
<br><br>
<b>{{validity}}</b>
Here is the TS part(page.ts),
knowledge: FormGroup;
validity:stirng = '';
constructor(public navController: NavController, public formBuilder: FormBuilder)
{
this.knowledge = formBuilder.group({
'f2_edudetail' : ['', Validators.required], //drp
'f2_proficiency' : ['', Validators.required], //drp
'f2_participation' : [''], //drp
});
}
setval(){
let formData = [];
formData['f2_edudetail'] = "Blah Blah";
formData['f2_proficiency'] = "Blah Blah";
formData['f2_participation'] = "Blah Blah";
this.knowledge.setValue(formData);
this.validity = '';
}
setval_valid(){
let formData = [];
formData['f2_edudetail'] = "illiterate";
formData['f2_proficiency'] = "fluent";
formData['f2_participation'] = "yes";
this.knowledge.setValue(formData);
this.validity = '';
}
save(){
if (this.knowledge.valid){
this.validity = "Valid (I want this to be invalid if select values are different from the given option)";
}
else{
this.validity = "Invalid";
}
}