Ionic 4 yokuQinisekisa ukuQinisekiswa kweFom ngeeFomu eziSebenzayo

Ibhlog

Ionic 4 yokuQinisekisa ukuQinisekiswa kweFom ngeeFomu eziSebenzayo

Kweli nyathelo ngenyathelo le-Ionic 4 yeFom yokufundisa isifundo, siya kufunda ukwenza kunye nokuqinisekisa ifom ngendlela yeAngular's Reactive Forms indlela.



Ukuseta iifom kwisicelo se-Ionic kulula, iiAngular zibonelela ngeendlela eziqhutywa ziitemplate kunye neefom ezisebenzayo zokujongana nedatha yeefom. Indlela eqhutywa yitemplate isetyenziselwa ukusebenza ngeendlela ezilula. Ngokwahlukileyo, isetyenziselwa ukuphatha idatha enzima ngakumbi. Ngokukodwa xa ufuna ukusebenza ngamaxabiso ahlanganisiweyo.

Siza kwenza ifom esisiseko ngokulandela iinkalo zokufaka igama, i-imeyile, i-dob kunye nenombolo yeselfowuni .



Isiqulatho

Eyona ndlela ilungileyo yokufumana isitaki
  • Cwangcisa iProjekthi yeIonic
  • Chaza ulwakhiwo lweFom nge-Ionic HTML
  • Ukungenisa kunye nokubhalisa iReactiveFormsModule
  • Ukwenza ifom kwi-Ionic 4 eneefom ezisebenzayo
  • Qinisekisa ifom ye-Ionic
  • Isiphelo

Cwangcisa iProjekthi yeIonic

Ukuseta ifom kwi-Ionic app, kuya kufuneka usebenzise lo myalelo ungezantsi.



ionic start ionic-form-validation blank --type=angular

Ngena ngaphakathi kulawulo lweprojekthi.

cd ionic-form-validation

Faka imo yeelebhu njengokuxhomekeka ku-dev ngokusebenzisa lo myalelo ulandelayo.

npm i @ionic/lab --save-dev

Qalisa i-app yeIonic.

ionic serve -l

Iprojekthi yeIonic 4 yeFom

Chaza ulwakhiwo lweFom nge-Ionic HTML

Ukuseta ifom ekusetyenzisweni kwe-Ionic yefomathi ye-UI, apha ngezantsi senza ifom yabafundi besikolo kwaye umfundi unokugcwalisa ulwazi ngaye esebenzisa le fomu. Sisebenzise iibhokisi zokujonga ze-Ionic, amaqhosha erediyo, amaqhosha kunye nezinye izinto ukwakha le fomu.

Vula home.page.html fayile kwaye ungeze le khowudi ilandelayo ngaphakathi kuyo.

Name Email DOB Mobile Gender Male Female Subjects English Maths Science History Submit

Ukuqinisekiswa kweFom 4

Ukungenisa kunye nokubhalisa iReactiveFormsModule

Ukusebenza neeFom ezisebenzayo kufuneka singenise kwaye sibhalise ReactiveFormsModule. Ngoku ngesiqhelo xa sisebenza ngokusisiseko iAngular app ukuze sibhengeze iReactiveFormsModule kwihlabathi liphela app.module.ts ifayile. Nangona kunjalo, kufuneka sibhengeze i-ReactiveFormsModule kuwo onke amaphepha okanye icandelo xa sisebenza kunye nemodyuli yeefom.

Uyenza njani iphethini ye-camo kwifoto

Vula home.module.ts kwaye ungeze le khowudi ingezantsi kuyo.

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { HomePage } from './home.page'; @NgModule({ imports: [ CommonModule, ReactiveFormsModule, FormsModule, IonicModule, RouterModule.forChild([ { path: '', component: HomePage } ]) ], declarations: [HomePage] }) export class HomePageModule { }

Ukwenza ifom kwi-Ionic 4 eneefom ezisebenzayo

Emva koko, siya kusebenzisa IFomControl, iFomGroup, iFomBuilder, kwaye Iziqinisekiso inkonzo yokuqinisekisa idatha yefom.

Masiqonde ukuba zeziphi ezi nkonzo?

Iqela leFom: IFomGroup yingqokelela yeFomControls enye okanye ezininzi kwaye yabhengezwa kwithegi yefomathi ye-HTML. Ngokusisiseko, ingqokelela yolawulo lweefom ezahlukeneyo.

Ulawulo lweFom: IFomControl ibonisa ixabiso elifakwe ngumsebenzisi, iFomGroup yingqokelela yeefomula zoLawulo.

Name Email DOB Mobile Submit

IFomBuilder: Inkonzo yeFomBuilder ibhekisa kwinto yefom kwaye iseta iFomGroup. Igcina amanani angenisiweyo omsebenzisi kunye nemo yokuqinisekiswa kwefom yokufaka.

Ngenisa ezi nkonzo zilandelayo ukuqala ifom kwi home.page.ts.

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

Chaza into yefom ngokubhengeza iGroupGroup ngokwahluka.

ionicForm: FormGroup;

Ngena inkonzo yeFomBuilder kumakhi.

constructor(public formBuilder: FormBuilder) { }

Ukuseta isikhethi somhla kwi-Ionic 4

Isikhethi somhla sisetyenziselwa ukufumana umhla kumsebenzisi, i-Ionic ibonelela ngesikhethi sayo somhla ukujongana nomhla onxulumene nomhla. Siwubhengezile umhla kunye ixesha le-ion ithegi kwitemplate ye-HTML. Ngoku siza kufumana ixabiso lomhla kumsebenzisi kwaye sisete kwifom ye-dob yokuLawula kwifom yeAngular's Reactive form.

Sichaze defaultDate Umahluko ukuseta umhla ongagqibekanga. I getDate(e) Umsebenzi uthatha into yomhla njengengxoxo kwaye uyiguqulele kwi YYYY-MM-DD format kwaye usete njenge IFomControl kwi IFomGroup .

ikheshi yokujonga usetyenziso
getDate(e) { let date = new Date(e.target.value).toISOString().substring(0, 10); this.ionicForm.get('dob').setValue(date, { onlyself: true }) }

I (ngSubmit)='submitForm()' Umyalelo ubangela ukungeniswa kwefom.

submitForm() { console.log(this.ionicForm.value) }

Ngenisa amaxabiso athile kwifom yefom kwaye ucofe kwiqhosha lokungenisa, uya kubona amaxabiso angenisiweyo omsebenzisi kwi ionicForm | kwikhonsoli yesikhangeli.

Ukudala iFom kwi-Ionic 4

Qinisekisa ifom ye-Ionic 4

Kweli candelo siza kufunda ngendlela yokuqinisekisa i-Ionic 4 yefom yamasimi usebenzisa inkonzo yeefom ezisebenzayo.

Ngenisa Validators service kwi template ye-Ionic, Inika iindlela ezakhelweyo ngaphakathi zokuqinisekisa ulawulo lwefom.

import { Validators } from '@angular/forms';

Udidi lweValidators lubonelela ngezi ndlela zilandelayo zokujongana nokuqinisekiswa kwefom kwi-Ionic 4 / Angular 8.

class Validators null static email(control: AbstractControl): ValidationErrors

Siza kubangela ukungqinisisa xa umsebenzisi ecofa kwiqhosha lokungenisa, ke kufuneka sichaze umahluko we-boolean kwaye siyisete Ubuxoki ekuqaleni.

isSubmitted = false;

Ngoku, siya kuqinisekisa ulawulo lwefom yegama lethu. Ngeli xabiso siza kuliphumeza iyafuneka kwaye Imin-ubude ukungqinisisa.

this.ionicForm = this.formBuilder.group({ name: ['', [Validators.required, Validators.minLength(2)]], })

Njengoko ubona ukuba sijoje iindlela zokuqinisekisa ngoncedo lodidi lweValidators. Uluhlu lweziqinisekiso lusivumela ukuba siphumeze ukuqinisekiswa okuninzi kulawulo lwefom enye.

ukuba uyenza ingasebenzi i-facebook usengayisebenzisa i-messenger

Ngoku, siza kubhengeza indlela yokufumana ukufikelela kulawulo lwefom. Yongeza le khowudi ilandelayo ukufikelela kulawulo lwefom ngqo ngetemplate ye-Ionic / yeAngular.

get errorControl() { return this.ionicForm.controls; }

Okulandelayo, kufuneka songeze imiyalezo yokulumkisa kwitemplate ye-Ionic ye-HTML yokubonisa imiyalezo yokuqinisekisa. Le miyalezo iya kuvela xa le fomu ingasebenziyo.

Name Name is required. Name should be min 2 chars long.

Ngaphakathi * ngIf Isikhokelo, siyajonga ukuba zombini iimeko ziyinyani. I *ngIf='' Umyalelo uya kubonisa kuphela umyalezo wesilumkiso kubasebenzisi xa le fomu ingasebenzi.

Indlela elandelayo iya kubangela ukuba ifom ingeniswe.

submitForm() { this.isSubmitted = true; if (!this.ionicForm.valid) { console.log('Please provide all the required values!') return false; } else { console.log(this.ionicForm.value) } }

Nantsi ikhowudi yokugqibela yale Ionic 4 / Angular 8 Form tutorial tutorial.

home.page.ts
import { Component, OnInit } from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage implements OnInit { ionicForm: FormGroup; defaultDate = '1987-06-30'; isSubmitted = false; constructor(public formBuilder: FormBuilder) { } ngOnInit() { this.ionicForm = this.formBuilder.group({ name: ['', [Validators.required, Validators.minLength(2)]], email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$')]], dob: [this.defaultDate], mobile: ['', [Validators.required, Validators.pattern('^[0-9]+$')]] }) } getDate(e) { let date = new Date(e.target.value).toISOString().substring(0, 10); this.ionicForm.get('dob').setValue(date, { onlyself: true }) } get errorControl() { return this.ionicForm.controls; } submitForm() { this.isSubmitted = true; if (!this.ionicForm.valid) { console.log('Please provide all the required values!') return false; } else { console.log(this.ionicForm.value) } } }
home.page.html
Ionic Forms Name Name is required. Name should be min 2 chars long. Email Email is required. Please provide valid email id. DOB Mobile Mobile number is required. Only numerical values allowed. Submit

Qinisekisa ifom ye-Ionic 4

Isiphelo

Okokugqibela, sigqibile i-Ionic 4 yeFom yokuQinisekiswa kweFomathi ngeeFomu eziSebenzayo. Sifunde nje ukuba isiseko sefom sokuqinisekiswa ngeeFomu ezisebenzayo kwi-Ionic 4 app, ndiyathemba ukuba uya kuyithanda ngokuqinisekileyo.

#Ionic #Angular #MobileApp