Qaababka Calaamadaha ee Angular 21: Qoto dheer u quus API-ga Foomamka Cusub

Bogga Hore » Python » Qaababka Calaamadaha ee Angular 21: Qoto dheer u quus API-ga Foomamka Cusub

Angular 21 waxay keenaysaa hab cusub oo lagu dhiso foomamka iyadoo la adeegsanayo Foomamka Calaamadaha, oo ah API-kii ugu horreeyay ee calaamadda sameeya kaas oo beddelaya qalabkii hore ee FormControl/FormGroup ugu dambayntiina ka dhigaya xaaladda qaabka inay u ekaato qayb dabiici ah oo ka mid ah qaab-dhismeedkaaga falgalka ah. Halkii aad la dagaallami lahayd valueChanges streams, rukumada gacanta, iyo nooca jimicsiga, waxaad la shaqaysaa geedaha beeraha ee si adag loo qoray, xaqiijinta qeexitaanka, iyo isku-dubaridka UI-ga otomaatiga ah oo ay ku shaqeeyaan calaamadaha Angular.

Haddii aad waligaa ka xanaaqday noocyada xakamaynta aan la beddeli karin, waddooyinka jilicsan ee ku salaysan xarigga ee get(), ama xafladda ControlValueAccessor, Foomamka Calaamadaha waxay dareemi doonaan sida neefta hawada cusub ee horumariyayaasha Angular ay sugayeen. Wali waxaa loo calaamadeeyay inay yihiin kuwo tijaabo ah, laakiin waxay horey u dabooleen wax walba laga bilaabo foomamka gelitaanka fudud ilaa foomamka si qoto dheer u dhisan, ee ku saleysan qaab-dhismeedka oo leh xaqiijinta async, macquulka shuruudaysan, qaababka hoose, kala-goynta iyo waddooyinka socdaalka siman ee Foomamka Falcelinta Caadiga ah.

Waa maxay qaababka calaamadda xagasha iyo goorta la isticmaalayo

Foomamka Calaamadaha waa maktabad tijaabo ah oo ku dhisan Angular 21+ oo adeegsata calaamadaha aasaaska xaaladda foomka halkii laga isticmaali lahaa API-yada Observables iyo kuwa muhiimka ah. Fikrad ahaan, waxaad qeexeysaa qaabka foomka sida calaamad qoraal ah oo haysa qaab-dhismeedka xogtaada, ka dibna isticmaal form() shaqada laga bilaabo @angular/forms/signals si loo soo saaro FieldTree si xooggan loo qoray oo muraayad u ah qaabkaaga moodeelka.

FieldTree-kani wuxuu soo bandhigayaa goob kasta oo shaqo ah oo soo celinaysa shay xaalad falgal ah (qiimo, ansaxnimo, calammo wasakhaysan/taabasho leh, xaalad sugitaan ah, iwm.), waxaadna ku xidhaysaa beerahaas qaab-dhismeedka iyada oo loo marayo hal dardaaran. Natiijadu waa isku-dubarid laba-geesood ah oo otomaatig ah oo u dhexeeya kontaroolada UI-gaaga iyo calaamadda moodeelka ee hoose, iyadoo la adeegsanayo habayn nooca-ammaan ah oo la adeegsanayo calaamadaynta dhibcaha iyo tusmooyinka safka halkii laga isticmaali lahaa waddooyinka xarigga ee u nugul khaladaadka.

Foomamka Calaamadaha ayaa horey loogu xiray gudaha xudunta @angular/forms xirmada, laakiin waa inaad soo dejiso barta tijaabada ee gelitaanka @angular/forms/signals si aad u gasho API-yada cusub. Qaababka, waxaad soo dejisaa oo aad sheegtaa Field tilmaamaha soo dejinta qaybtaada si aad u xidhi karto kontarool kasta adoo isticmaalaya halkii ay ka ahayd formControl, formControlName, formGroupName, ama formArrayName.

Naqshadda Aasaasiga ah: Qaabka Qaabka, Geedka Field iyo Tilmaamaha

Isbeddelka maskaxda ugu muhiimsan ee Foomamka Calaamadaha ayaa ah in calaamadda qaabka foomka ay noqoto isha kaliya ee runta ee xogtaada, qaabka la soo saarayna uu si fudud u muujiyo oo u beddelo qaabkaas si isku mid ah. Caadi ahaan waxaad ku bilaabataa inaad ku dhawaaqdo calaamad qoran oo leh xogta foomkaaga bilowga ah, sida lacagta soo galitaanka oo leh iimayl iyo eraygaaga sirta ah.

Gudbinta qaabkan form(model, schema?) wuxuu abuuraa Geed Field ah oo muraayad u ah qaab-dhismeedka shayga ku dhawaad ​​mid-mid, sidaa darteed hanti kasta ama shay kasta oo buul leh oo ku jira qaabkaaga wuxuu noqonayaa guntin goobeed oo la qoray oo ku yaal geedka qaabka. Qiimayaasha aasaasiga ah (xariiq, lambar, boolean, xarig taariikheed, iwm.) waxay noqdaan qanjidhada caleenta, halka walxaha iyo safyadu ay u dhaqmaan sidii weelal ku siinaya hagitaan kala sarreyn ah oo la jaanqaadaya qaabkaaga domain.

Guntin kasta oo goob ah waxaa lagu geli karaa calaamadaynta dhibcaha, iyo, safka, helitaanka tusmada caadiga ah sida myForm.users.email, kaas oo si qoto dheer ugu milmay nooca TypeScript. Markaad goobtaas ugu yeerto shaqo ahaan (tusaale ahaan myForm.email()) waxaad heleysaa shay xaalad goob falgal ah oo soo bandhigaya value(), valid(), invalid(), dirty(), touched(), pending(), errors(), reset() iyo caawiyayaal dheeraad ah.

Ku xidhidda FieldTree iyo DOM waxaa maamula hal keli ah tilmaamaha, kaas oo aad u isticmaali karto gelinta asalka ah, manejo de mat-select, meelaha qoraalka, badhamada raadiyaha, sanduuqyada sanduuqa ama qayb kasta oo gaar ah ama tilmaamo oo hirgelisa qandaraaska FormValueControl ama FormCheckboxControl ee fudud. Tilmaamahan wuxuu maamulaa isku-dubaridka qiimaha laba-geesoodka ah, xaaladda diiradda/taabashada, calamada loo baahan yahay, xaaladda naafada/akhriska oo keliya, xogta xaqiijinta iyo waxyaabo kaloo badan, dhammaantood adiga oo aan qorin tuubooyinka gacanta.

Hooska hoostiisa, FieldTree waa nooc khariidaysan oo casri ah kaas oo si isdaba joog ah u socda nooca moodeelkaaga isla markaana soo saara API qaab ah oo si sax ah ula jaanqaadaya, isagoo ku siinaya badbaado waqti-buuxa ah oo ku saabsan waddo kasta iyo qabashada khaladaadka qoraalka ama is-waafaqla'aanta ku jirta qaababkaaga. Tani waa tallaabo aad u weyn oo laga qaadayo xarigga ku salaysan get('user.email') wicitaanada Foomamka Falcelinta, halkaas oo TypeScript uusan lahayn hab uu ku xaqiijiyo waddada wakhtiga ururinta.

Faa'iidooyinka Qorista marka loo eego Foomamka Falcelinta Caadiga ah

Foomamka Falcelinta ee la qoray ee lagu soo bandhigay Angular 14 waxay ahaayeen tallaabo weyn, laakiin waxay ku dhisnaayeen API hore oo aan waligiis si buuxda u qaadan awoodaha TypeScript, taasoo keentay dhibaado joogto ah sida T | null qiimayaal meel walba ah. Taas bedelkeeda, Foomamka Calaamadaha waxaa loo qaabeeyey laga bilaabo maalinta koowaad ee ku saabsan qorista adag ee si toos ah looga soo qaatay calaamaddaada moodeelka.

Foomamka Falcelinta, FormControl kasta si wax ku ool ah ayuu u shaqeeyaa FormControl<T | null> haddii aadan si cad u dooran nonNullable kontarool kasta, kaas oo ku faafaya buuqa iyo habaynta soo noqnoqda ee qeexitaannada foomkaaga. Foomamka Calaamadaha ayaa ka hor istaagaya tan iyagoo ka soo qaadanaya nooca saxda ah ee moodeelka bilowga ah, markaa haddii moodeelkaagu yahay email waa xarig aan la tirtiri karin, myForm.email().value() waa cadaalad stringma, string | null.

Dhib kale oo weyn oo la xalliyo waa luminta macluumaadka nooca marka la isticmaalayo get() oo leh waddooyin xarig ah oo ku jira Foomamka Falcelinta, kuwaas oo si lama huraan ah u soo celiya AbstractControl<unknown, unknown> | null waxayna meel walba ku qasbeysaa sheegashooyin fool xun. Foomamka Calaamadaha, waligaa ma wici doontid get('user.email'); si fudud ayaad ula socon kartaa myForm.user.email, iyo nooc kasta oo khalad ah ama magaca hantida khaldan wuxuu keenaa qalad ururin halkii uu ka ahaan lahaa cillad runtime ah.

Arrays-ku waxay ka faa'iidaystaan ​​​​naqshadeyntan ilaalinta qaab-dhismeedka: halka FormArray badanaa uu u dhaco si guud. AbstractControl noocyada marka la isticmaalayo at() ama buul ku yaal get(), Foomamka Calaamaduhu waxay sii wadaan qorista buuxda ee curiye kasta iyo sifooyinkiisa marka aad tusmayso myForm.users.name ama ku celcelin mar kale for (const of myForm.users). TypeScript wuxuu fahmaa nooca curiyaha, isagoo u oggolaanaya IntelliSense iyo hubin adag oo dhex mara geedka buulka ku jira oo dhan.

Foomamka firfircoon sidoo kale way fududahay in la fahmo sababtoo ah qaabku waa isha runta: halkii aad ku riixi lahayd FormControls-ka aan kala sooca lahayn FormGroup wakhtiga socodsiinta oo aad lumin lahayd qoritaanka qaab-dhismeedka, waxaad cusboonaysiinaysaa calaamadda moodeelka (tusaale ahaan ku darista hanti ikhtiyaari ah ama riixista walax array) FormTree-na si waafaqsan ayuu ula qabsadaa. Meelaha ikhtiyaariga ah waxaa lagu muujiyaa heerka nooca waxaadna ilaalinaysaa joogitaankooda adigoo hubinaya TypeScript-ka caadiga ah ka hor intaadan gelin xaaladdooda.

Abuuritaanka iyo Ku Xidhitaanka Foomamka Calaamadaha ee Ku Dhaqanka

Dhisidda foomka calaamadaha waxay ku bilaabataa qeexidda calaamad qoran oo matalaysa qaabkaaga domain, sida foomka galitaanka oo leh email iyo password ama shirkad duulimaad oo isku dhafan oo ay bixiso dukaan. Qaabkani wuxuu noqon karaa calaamad fudud, ama xitaa LinkedSignal haddii aad muraayad ka samaynayso xogta dukaan akhris-kaliya ah iyadoo weli oggolaanaysa wax-ka-beddelka maxalliga ah.

Markaad haysato moodeelka, waad wacaysaa form(model, schemaOrBuilder) ka @angular/forms/signals, halkaas oo doodda labaad ay noqon karto shaqo gudaha ah oo hesha shay waddo ah oo la qoray, ama qaab dib loo isticmaali karo oo la sameeyay schema<T>() caawiye. Gudaha dhisahan, waxaad dejisaa ansaxiyeyaasha, xeerarka shuruudaha leh, ka saarista, macquulka naafada/qarsoon/akhriska oo keliya iyo metadata goob kasta.

Qaab-dhismeedka, tilmaamaha waa barta guud ee aad ka soo gasho: <input ="loginForm.email" /> or <input type="number" ="flightForm.id" /> Si toos ah ayuu qiimaha xakamaynta DOM ugu xidhaa goobta hoose, isagoo labadaba ku haynaya isku-xirnaan mar walba. Si aad u hesho lambarro gelin ah, waa inaad isticmaashaa type="number" Markaa Foomamka Calaamaduhu si cad ayay u beddeli karaan matalaadda xarigga ee DOM iyo matalaadda lambarrada ee qaabkaaga.

Xaaladda goobta akhriska waxaa lagu sameeyaa iyadoo loogu yeerayo node-ka goobta shaqo ahaan, tusaale ahaan flightForm.from().errors() si aad u gasho liiska hadda ee khaladaadka xaqiijinta, ama flightForm.from().dirty() si loo hubiyo in isticmaaluhu uu wax ka beddelay goobtaas. Qiimayaashani waa calaamado, sidaa darteed si aan kala go 'lahayn ayay ula falgalaan dejimaha OnPush iyo Zone-less: Angular waxay dib u soo celisaa oo keliya meelaha dhab ahaantii ku tiirsan calaamadahaas.

Waxaad dib u dejin kartaa hal goob ama foomka oo dhan adoo isticmaalaya reset(), kaas oo nadiifiya xaaladda isdhexgalka (taabasho, wasakh) oo ikhtiyaari ahaan dib u dejinaya qiimayaasha haddii aad ku gudubto shay cusub. Iyadoo aan dood lahayn, reset() Waxay ka tagtaa qiimayaasha oo keliya laakiin waxay nadiifisaa xaaladda si UI-gu u dhaqmo sida qaab cusub iyadoo la ilaalinayo xogta hadda jirta.

Ansaxiyeyaasha: Ku dhex jira, Gaar ah, Shuruud leh iyo Isku-dhafan

Foomamka Calaamaduhu waxay soo bandhigayaan hab cusub oo cadayn ah oo lagu xaqiijinayo halkaas oo aad ku qeexdo xeerarka shaqada shaxda dhexe halkii aad ku rushayn lahayd ansaxiyeyaasha qeexitaan kasta oo xakameyn ah. Maktabaddu waxay soo rartaa caawiyayaal ku dhex jira sida required, min, max, minLength, maxLength, pattern iyo email, kaas oo aad ku wacdo waddo goobeed iyo shay ikhtiyaari ah oo ay ku jiraan farriimaha qofka isticmaalaya.

Tusaale ahaan, waad wici kartaa required(login.email, { message: 'Email is mandatory' }) iyo email(login.email) gudaha dhisaha shaxda, iyo kuwa ansaxiyayaashu waxay si toos ah u qurxin doonaan xaaladda goobta ValidationError gelitaannada marka xeerarku fashilmaan. Khalad kasta wuxuu qaadi karaa kind xarig iyo xog dheeraad ah oo ikhtiyaari ah (sida qiimaha ugu yar, qaabka ama macluumaadka khaladaadka fog) si UI-gaagu u soo bandhigo farriimo joogto ah.

Ansaxiyeyaasha gaarka ah waxaa la sameeyaa iyadoo la isticmaalayo validate() beero keli ah ama validateTree() si loo xaqiijiyo goobo badan iyo heer geed, waxayna helaan shay macne leh oo muujinaya caawiyayaal sida value(), valueOf(path), state iyo stateOf(path). Gudaha ansaxiyaha, waxaad si isku mid ah u baari kartaa hal ama dhowr goobood oo aad soo celin kartaa undefined / null guusha, hal shay oo Xaqiijin ah, ama tiro khaladaad ah oo loogu talagalay xaalado aad u adag.

Maadaama saxayaashu ay ku shaqeeyaan gudaha xaalad falgal ah, Foomamka Calaamadaha ayaa si toos ah ula socda dhammaan calaamadaha aad akhrido inta lagu jiro xaqiijinta waxayna dib u socodsiin doonaan ansaxiyahaas mar kasta oo mid ka mid ah ku-tiirsanaantaas ay isbeddelaan, maaha oo keliya goobta aasaasiga ah ee ay ku xiran tahay. Kani waa waxa aad u baahan tahay xeerarka isdhaafka ah sida isku-xidhka furaha sirta ah: marka aad isbarbardhigto value() oo leh ConfirmPassword valueOf(password), beddelidda labada gooboodba waxay kicin doontaa dib-u-xaqiijin iyada oo aan wax rukhsad gacmeed ah la helin.

Marka laga hadlayo waxqabadka, waa inaad si taxaddar leh uga fiirsataa waxaad ka akhrido saxayaasha, maadaama akhrinta qaab dhan ama xaalad geed ay sababi doonto dib-u-socod isbeddel kasta; taa beddelkeeda, ku dhegganow calaamadaha ugu yar ee aad dhab ahaantii ku tiirsan tahay si aad dib-u-xisaabinta u ilaaliso oo aad u sii saadaalin karto. Raad-raacan ku-tiirsanaanta falcelinta ah waa mid ka mid ah kala duwanaanshaha ugu awoodda badan, laakiin qarsoon, ee qaabka caadiga ah halkaas oo aad gacanta ku wacday updateValueAndValidity() si loo faafiyo hubinta marka la beddelo kontaroolada la xiriira.

Xaqiijinta Sare: Zod, Schema Caadiga ah iyo Hubinta HTTP ee Async

Foomamka Calaamaduhu waxay si toos ah ula midoobi karaan maktabadaha qaab-dhismeedka dibadda ee raacaya qeexitaanka Heerka Caadiga ah ee soo baxaya, sida Zod, taasoo kuu oggolaanaysa inaad dib u isticmaasho macquulka ansaxinta ee dhinaca server-ka ama la wadaago. Iyadoo validateStandardSchema(someZodSchema) Waxaad ku dhejin kartaa qaab-dhismeedka Zod foomkaaga oo aad ka dhigi kartaa inuu qayb ka noqdo habka xaqiijinta foomka.

Ansixinta aan isku mid ahayn waxaa ku shaqeeya validateAsync iyo takhasuska gaarka ah validateHttp caawiye, kaas oo maamula wareegga nolosha oo dhan ee xuduudaha xisaabinta, soo saarista codsi ay ku tiirsan yihiin kheyraad, khariidaynta jawaabaha guusha khaladaadka Xaqiijinta iyo maaraynta guuldarrooyinka si qurux badan. Qaab caadi ah ayaa ah in laga soo saaro codsiga HTTP laga bilaabo ctx.value() goob (sida magaca isticmaalaha ama magaca magaalada), ka dibna isticmaal onSuccess si loo soo sheego khaladaadka gaarka ah ee domain-ka sida "garoonka diyaaradaha lama helin" marka gadaal-gadaalku muujiyo xog aan sax ahayn.

In kasta oo ansaxiye aan isku mid ahayn uu weli taagan yahay, goobta pending() calaamaddu run bay noqotaa, taas oo aad u isticmaali karto qaab-dhismeedka si aad u muujiso tilmaame rarista ama si ku meel gaar ah u joojiso gudbinta. Muhiimad ahaan, ansaxiyeyaasha aan isku-xidhnayn waxay shaqeeyaan oo keliya ka dib marka dhammaan ansaxiyeyaasha isku-xidhan ay dhaafaan, sidaa darteed API-gaaga kuma dhufanaysid codsiyada marka shuruudaha aasaasiga ah ama hubinta qaabku ay horeba u fashilmeen.

Wicitaanada REST ee caadiga ah validateHttp way fududahay in la isticmaalo, maadaama aad soo celiso shay qaabeyn codsi ah oo aad maktabadda u ogolaato inay dhisto HttpResource hoosteeda; dejimaha qalaad ama xaaladaha ku saleysan RxJS waxaad hoos ugu dhici kartaa validateAsync oo la dhexgalo rxResource ama macluumaad dheeraad ah oo ku saabsan kheyraadka gaarka ah. Si kastaba ha ahaatee, xaqiijinta async waxay si fiican ugu habboon tahay isla qaladka iyo qaabka xaaladda sida ansaxiyeyaasha isku-dhafka ah, sidaa darteed UI-gaagu uma baahna inuu si kala duwan ula dhaqmo.

Xeerarka Shuruudda, Goobaha Naafada ah/Qaran iyo Xogta Metadata

Qaabab badan oo dunida dhabta ah waxay u baahan yihiin oo keliya goobo gaar ah oo ku jira xaalado gaar ah, Foomamka Calaamadahana waxay tan wax ka qabtaan iyagoo wata kaaliyeyaasha shuruudaha leh sida applyWhen, applyWhenValue, Iyo when ikhtiyaarrada ku saabsan ansaxiyeyaasha shaqsiyeed. Tusaale ahaan, waxaad ku dabaqi kartaa qorshe gaar ah qayb-hoosaadka lacag-bixinta oo keliya marka paymentMethod la mid ah "kaarka", ama dhaqan gelin delay iyo qiimaheeda ugu yar oo keliya marka a delayed calanku waa run.

The applyWhenValue caawiyuhu si gaar ah ayuu ugu habboon yahay sababtoo ah wuxuu u gudbiyaa qiimaha cidhiidhiga ah ee shayga waalidka calaamad, taasoo kuu oggolaanaysa inaad sameyso ilaalada nooca ka dibna aad dhaqaajiso qaabab kala duwan iyadoo ku xiran noocyada ururka ee la takooray. Habkani wuxuu kuu ogolaanayaa inaad qaabayso foomamka halkaas oo qaab-dhismeedku uu isbeddelo iyadoo lagu salaynayo doorashooyinka isticmaalaha, iyadoo dhammaan xeerarka la isku meel dhigayo oo nooca la isticmaalayo ay ammaan yihiin.

Marka laga reebo xaqiijinta, waxaad si cad u xakamayn kartaa in meelaha la naafo ka dhigayaan, la qariyay ama la akhrinayo oo keliya iyadoo la adeegsanayo disabled, hidden iyo readonly hawlaha ku jira shaxda, mid walbana wuxuu qaadan karaa magac u yaal xaaladda macnaha guud. Goob naafo ah ayaa laga reebay ansaxnimada waalidka iyo xisaabinta wasakhaysan, halka meelaha qarsoon aysan waalidkood ka dhigin kuwo aan ansax ahayn xitaa haddii ay khaladaad leeyihiin, iyo meelaha akhriska oo keliya laga boodo xaqiijinta sababtoo ah isticmaaluhu ma beddeli karo.

Arrin xiiso leh, disabled() ma soo celin karo oo keliya Boolean laakiin sidoo kale xarig sababeed, dhammaan sababaha firfircoonna waxaa lagu soo bandhigayaa goobta. disabledReasons() calaamad loogu talagalay khaladaadka ama sharraxaadda UI. Tani waxay ku siinaysaa hab ka sii wanaagsan oo aad ku gudbin karto sababta goobtu hadda u xiran tahay, taas oo si gaar ah ugu habboon socodka adag ama is-dhexgalka maamulka.

Foomamka Calaamadaha waxay sidoo kale soo bandhigaan nidaam metadata oo adag halkaas oo aad ku qeexdo furayaasha metadata adoo adeegsanaya caawiyayaal sida createMetadataKey, orMetadataKey, andMetadataKey or listMetadataKey, ka dibna ku lifaaq metadata meelaha adoo isticmaalaya metadata() shaqo. Macaamiishu waxay akhrin karaan qiimayaashan metadata iyada oo loo marayo fieldState.metadata(SOME_KEY), kaas oo soo celiya qiime toos ah ama calaamad iyadoo ku xiran in furaha la wadar ahaan yahay, taasoo suurtogalinaysa qaybaha dib loo isticmaali karo ee muujinaya filashooyinka sida calamada loo baahan yahay, dhererka ugu yar/ugu badan ama tilmaamaha gaarka u ah domain-ka.

Schemas-yada Dib Loo Isticmaali Karo, Qaab-hoosaadyada iyo Garaafyada Walxaha Isku-dhafan

Marka foomamku koraan, ku celcelinta macquulka xaqiijinta meelo badan waxay noqotaa riyo dayactir ah, sidaa darteed Foomamka Calaamadaha waxay dhiirigeliyaan soo saarista qorshayaasha dib loo isticmaali karo iyadoo la adeegsanayo schema<T>() iyo iyaga oo la qorayo apply iyo applyEach. Waxaad qeexi kartaa, tusaale ahaan, addressSchema kaas oo hirgeliya qaab waddo, magaalo iyo zip kood ah oo loo baahan yahay, ka dibna dib ugu isticmaal meel kasta oo abkaagu ka hadlo cinwaanada.

Heerka sare, qaabkaaga ugu weyn wuxuu soo dejin karaa oo ku dabaqi karaa qaababkan yaryar walxaha buulka ku jira sida billingCinwaanka, shippingCinwaanka iyo xiriirka, ama isticmaal applyEach si loo beegsado walax kasta oo ku jirta tiro cinwaano ama qiimo ah. Qaabkani wuxuu ka dhigayaa jaantusyada kuwo yar, diiradda saaraya oo si fudud loo tijaabin karo, iyadoo dammaanad qaadaysa dhaqan joogto ah dhammaan foomamka isticmaala noocyadaas domainka.

Dhinaca qaab-dhismeedka, foomamka isku dhafan si dabiici ah ayaa loogu qaybiyaa qaabab hoose iyadoo qaybo ka mid ah FieldTree loo gudbiyo qaybaha ilmaha iyada oo loo marayo @Input() nooca FieldTree<T>. Waalid ayaa laga yaabaa inuu dhaafo flightForm.aircraft ilaa a <app-aircraft> qayb, ama flightForm.prices ilaa a <app-prices> qayb, taasoo u oggolaanaysa ilmo kasta inuu si madax-bannaan u bixiyo oo uu u ansixiyo qayb-hoosaadkiisa isagoo weli ka qayb qaadanaya xaaladda Foomka Calaamadaha ee caalamiga ah.

Wixii arrimo ah sida qiimaha, waxaad saf u samaysaa adigoo ku celcelinaya safka FieldTree (@for(price of priceForms; track price)), ku xidha beer kasta oo buul leh ="price.amount", iyo ikhtiyaar ahaan muujinta soo koobid khalad ah oo saf kasta ah iyadoo la adeegsanayo price().errorSummary(). Ku darista safafka cusub waa mid fudud sida cusboonaysiinta calaamadda safka moodeelka ee hoose oo leh curiye cusub, markaas oo Angular si toos ah u ballaariso FieldTree oo isku xidhka qaab-dhismeedka ayaa ka jawaaba.

Waxaad sidoo kale ku qeexi kartaa ansixiyeyaasha safka laftooda, sida fulinta gaar ahaanshaha fasalka duulimaadka ee safafka qiimaha adoo ku celcelinaya qiimaha safka hadda jira ee ansaxiyaha iyo soo celinta Qalad Xaqiijin ku habboon haddii nuqul la helo. Khaladaadkan heerka array-ka ah ayaa markaa ka soo muuqan doona node-ka array-ka, waxaana lagu soo bandhigi karaa meel la wadaago oo ka sarreysa jadwalka ama dhinaca kooxda khuseysa.

Isdhexgalka Tilmaamaha Goobta iyo Xakamaynta Gaarka ah iyada oo aan la isticmaalin Xakamaynta Qiimaha Helitaanka

Mid ka mid ah horumarinta tayada nolosha ugu fiican ee Foomamka Calaamadaha waa fududeynta kontaroolada gaarka ah: halkii aad ka hirgelin lahayd is-dhexgalka ControlValueAccessor ee hadalka ah iyo diiwaangelinta NG_VALUE_ACCESSOR bixiye, waxaad kaliya hirgelinaysaa habka fudud. FormValueControl<T> or FormCheckboxControl qandaraas. Ugu yaraan, waxaad soo bandhigaysaa value calaamadda moodeelka, iyo ikhtiyaari ahaan wax-soo-gelinta dheeraadka ah sida disabled, errors, touched, invalid, required or name.

The Tilmaamaha ayaa si toos ah u ogaanaya qaybaha ama tilmaamaha fulinaya is-dhexgalkan wuxuuna ku xiraa calaamadaha xaaladda foomka ku habboon, isagoo ilaalinaya xakamaynta value calaamadda oo la jaanqaadaysa goobta foomka iyo faafinta macluumaadka la taabtay/wasakhaysan dib. Tani waxay hoos u dhigaysaa qayb gelinta gaarka ah ilaa sadar yar, badanaa waxay ku xidhaysaa value() gudaha hoose <input> iyo dhageysiga dhacdooyinka la wacayo value.set(...).

Sanduuqyada sanduuqa, FormCheckboxControl isticmaalaa a checked calaamadda moodeelka halkii value, oo ka tarjumaysa domain-ka ay caadiyan xukumaan booleans ama xaaladaha xubinnimada, iyo tilmaamaha goobta ayaa wax ka qabta faahfaahinta khariidaynta qiimaha garoonka boolean ee ku jira checked calamada. Tani waxay qaabka maskaxeed ka dhigaysaa mid joogto ah iyadoo la raacayo macnaha HTML.

Qaab isku mid ah ayaa lagu dabaqi karaa tilmaamaha sifada xubno u dhashay, oo kuu oggolaanaya inaad ku duubto dhaqanka ku wareegsan gelinta caadiga ah adoo ku fulinaya FormValueControl tilmaamaha iyo isticmaalka isku xidhka martida , (input) iyo (blur). Dhammaan kiisaska, mar dambe kama fikiraysid zone-ka ama buug-gacmeedka Change / onTouched callbacks; waxaad kaliya maamulaysaa calaamadaha oo maktabadda u ogolaanaysaa inay sameyso inta soo hartay.

Hubinta nooca qaab-dhismeedka ayaa aad u adag marka la eego : haddii aad si kama' ah ugu xidho goob tirooyin ah qayb qoraal-kaliya ah oo filaysa FieldTree<string>, TypeScript wuxuu si toos ah uga warbixiyaa qalad nooca ah oo ku saabsan isku xidhka qaab-dhismeedka, isagoo hore u qabtay isku-dheellitir la'aanta iyo ka hortagga dhibaatooyinka wakhtiga socodsiinta ee aan la garanayn. Shabakaddan badbaadada dheeraadka ah waa wax Angular aysan waligood horay u lahayn heerkan daacadnimada ah.

Socdaalka oo leh compatForm(), Socodka Gudbinta iyo Ka-hagaajinta

Foomamka Calaamadaha waxay qiraan xaqiiqada: saldhigyo badan oo code ah ayaa si weyn loogu maalgeliyaa Foomamka Falcelinta, sidaa darteed maktabaddu waxay soo dirtaa compatForm() shaqo kuu ogolaanaysa inaad duubto garaaf shay oo ka kooban qiimayaal caadi ah iyo tusaalooyin FormControl ah oo jira. Foomka iswaafajinta wuxuu soo bandhigayaa meelo u dhaqma sida qanjidhada Signal Form ee caadiga ah laakiin si gudaha ah ula jaanqaadaya FormControls-ka la duubay, oo ay ku jiraan qiimayaasha, ansaxnimada, la taabtay, wasakhda iyo xaaladaha khaladka.

Markaad wacdo myForm.age().value() foomka tartanka halkaas oo age waxay ka timaadaa FormControl, waxaad heleysaa asalka aasaasiga ah (sida lambarka) halkii aad ka heli lahayd FormControl lafteeda, iyadoo weli aad marin u heli karto FormControl dhabta ah iyada oo loo marayo myForm.age().control() haddii aad u baahan tahay inaad wacdo API-yada dhaxalka ah. Isbeddelladu waxay ku faafaan labada jihoba: dejinta qiimaha iyada oo loo marayo goobta foomka ayaa cusboonaysiisa xakamaynta, iyo wicitaanka setValue() Foomka Xakamaynta wuxuu cusbooneysiiyaa aragtida Foomka Calaamadaha.

Xaqiijinta laga helay FormControls-ka dhaxalka ah waa la sharfay, khaladaadkooduna waxay ku soo baxaan xaaladda Foomka Calaamadaha si qaababkaagu si siman ula shaqeeyaan. valid() iyo errors() iyadoon loo eegin asalka. Xaddidaadda muhiimka ah ayaa ah inaadan ku lifaaqi karin xeerar cusub oo qaabka calaamadda ah (sida required() laga bilaabo calaamadaha API) si toos ah kontaroolada isku-dhafan; kuwaas waa inay la socdaan dejistooda asalka ah ee Xaqiijinta si looga fogaado nidaamyada iska hor imanaya.

Gudbinta Foomamka Calaamadaha waxaa fududeeyay submit(form, action) Gargaare, kaas oo calaamadeeya goob kasta sidii la taabtay, hubiya ansaxnimada foomka, dejiya a submitting() calan ka dibna wac ficilkaaga aan isku xidhnayn oo keliya haddii foomku sax yahay. Ficilku wuxuu helaa xaaladda foomka, wuxuu sameyn karaa wicitaan API ah isagoo isticmaalaya form().value(), oo ikhtiyaar ahaan u soo celi hal ama in ka badan khaladaad xaqiijin ah oo maktabaddu ku dhejin doonto meelaha khuseeya.

Inta lagu jiro gudbinta, si fudud ayaad u joojin kartaa badhanka gudbinta adiga oo isticmaalaya ="myForm().submitting()" oo muuji qoraalka ku habboon ee rarista, iyadoo calanka la gudbinayo uu ku fidayo qanjidhada carruurta si ay ula qabsadaan xaaladdooda UI haddii loo baahdo. Ka dib marka ficilku xalliyo, Foomamka Calaamadaha ayaa nadiifiya gudbinta waxayna adeegsadaan khaladaadka server-ka ee la soo celiyay, iyagoo si fiican ugu daraya ansaxinta dambe ee xeerarka dhinaca macaamiisha.

Wixii wax-soo-gelinta xasaasiga ah ee waxqabadka sida goobaha raadinta ama kiisaska aadan rabin in furaha kasta uu isla markiiba cusbooneysiiyo qaabka ama uu kiciyo xaqiijinta async, debounce() caawiyuhu wuxuu kuu ogolaanayaa inaad dib u dhigto faafinta qiimaha. Waxaad ku dabaqi kartaa dib-u-soo-celinta heerka xididka ama goobta-halka ah, adigoo qeexaya waqti-joojin milisecond ah ama adigoo gudbinaya shaqo gaar ah oo dib-u-soo-celin ah oo hesha macnaha guud iyo calaamad joojin ah si aad u joojiso saacadaha sugaya.

Xeerarka ka-saarista xogta waxaa laga dhaxlaa geedka hoostiisa, sidaa darteed habaynta qaab-dhismeedka waalidka waxay saameyn doontaa carruurta haddii aysan qeexin waxyaabaha ka-saarista u gaarka ah; tani waxay ku habboon tahay foomamka raadinta halkaas oo shayga shaandhaynta oo dhan ay tahay inuu cusbooneysiiyo oo keliya ka dib marka isticmaaluhu joojiyo qorista. Marka lagu daro ansixiyeyaasha async-ga ee ku shaqeeya oo keliya qiimayaal sax ah oo la baabi'iyay, tani waxay horseedaa UI-yo hufan oo ka fogaada hadallada ka dhanka ah API-yadaada.

Foomamka Calaamadaha ee Angular 21 waxay u beddelaan maaraynta foomka khibrad isku xiran oo calaamad u gaar ah halkaas oo qaabkaaga, macquulka xaqiijinta iyo UI-gaagu si adag isugu xiran yihiin, haddana si raaxo leh loogu caddeeyo oo nooca ammaan ah loo ilaaliyo, taasoo ka dhigaysa wax walba laga bilaabo shaashadaha gelitaanka fudud ilaa socodka shaqada ganacsiga ee culus ee xaqiijinta mid fudud in la dhiso, la fahmo oo la horumariyo waqti ka dib.