forms.d.ts 143 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438
  1. /**
  2. * @license Angular v8.1.0
  3. * (c) 2010-2019 Google LLC. https://angular.io/
  4. * License: MIT
  5. */
  6. import { AfterViewInit } from '@angular/core';
  7. import { ElementRef } from '@angular/core';
  8. import { EventEmitter } from '@angular/core';
  9. import { InjectionToken } from '@angular/core';
  10. import { Injector } from '@angular/core';
  11. import { ModuleWithProviders } from '@angular/core';
  12. import { Observable } from 'rxjs';
  13. import { OnChanges } from '@angular/core';
  14. import { OnDestroy } from '@angular/core';
  15. import { OnInit } from '@angular/core';
  16. import { Renderer2 } from '@angular/core';
  17. import { SimpleChanges } from '@angular/core';
  18. import { StaticProvider } from '@angular/core';
  19. import { Type } from '@angular/core';
  20. import { Version } from '@angular/core';
  21. /**
  22. * This is the base class for `FormControl`, `FormGroup`, and `FormArray`.
  23. *
  24. * It provides some of the shared behavior that all controls and groups of controls have, like
  25. * running validators, calculating status, and resetting state. It also defines the properties
  26. * that are shared between all sub-classes, like `value`, `valid`, and `dirty`. It shouldn't be
  27. * instantiated directly.
  28. *
  29. * @see [Forms Guide](/guide/forms)
  30. * @see [Reactive Forms Guide](/guide/reactive-forms)
  31. * @see [Dynamic Forms Guide](/guide/dynamic-form)
  32. *
  33. * @publicApi
  34. */
  35. export declare abstract class AbstractControl {
  36. validator: ValidatorFn | null;
  37. asyncValidator: AsyncValidatorFn | null;
  38. private _parent;
  39. private _asyncValidationSubscription;
  40. /**
  41. * The current value of the control.
  42. *
  43. * * For a `FormControl`, the current value.
  44. * * For an enabled `FormGroup`, the values of enabled controls as an object
  45. * with a key-value pair for each member of the group.
  46. * * For a disabled `FormGroup`, the values of all controls as an object
  47. * with a key-value pair for each member of the group.
  48. * * For a `FormArray`, the values of enabled controls as an array.
  49. *
  50. */
  51. readonly value: any;
  52. /**
  53. * Initialize the AbstractControl instance.
  54. *
  55. * @param validator The function that determines the synchronous validity of this control.
  56. * @param asyncValidator The function that determines the asynchronous validity of this
  57. * control.
  58. */
  59. constructor(validator: ValidatorFn | null, asyncValidator: AsyncValidatorFn | null);
  60. /**
  61. * The parent control.
  62. */
  63. readonly parent: FormGroup | FormArray;
  64. /**
  65. * The validation status of the control. There are four possible
  66. * validation status values:
  67. *
  68. * * **VALID**: This control has passed all validation checks.
  69. * * **INVALID**: This control has failed at least one validation check.
  70. * * **PENDING**: This control is in the midst of conducting a validation check.
  71. * * **DISABLED**: This control is exempt from validation checks.
  72. *
  73. * These status values are mutually exclusive, so a control cannot be
  74. * both valid AND invalid or invalid AND disabled.
  75. */
  76. readonly status: string;
  77. /**
  78. * A control is `valid` when its `status` is `VALID`.
  79. *
  80. * @see {@link AbstractControl.status}
  81. *
  82. * @returns True if the control has passed all of its validation tests,
  83. * false otherwise.
  84. */
  85. readonly valid: boolean;
  86. /**
  87. * A control is `invalid` when its `status` is `INVALID`.
  88. *
  89. * @see {@link AbstractControl.status}
  90. *
  91. * @returns True if this control has failed one or more of its validation checks,
  92. * false otherwise.
  93. */
  94. readonly invalid: boolean;
  95. /**
  96. * A control is `pending` when its `status` is `PENDING`.
  97. *
  98. * @see {@link AbstractControl.status}
  99. *
  100. * @returns True if this control is in the process of conducting a validation check,
  101. * false otherwise.
  102. */
  103. readonly pending: boolean;
  104. /**
  105. * A control is `disabled` when its `status` is `DISABLED`.
  106. *
  107. * Disabled controls are exempt from validation checks and
  108. * are not included in the aggregate value of their ancestor
  109. * controls.
  110. *
  111. * @see {@link AbstractControl.status}
  112. *
  113. * @returns True if the control is disabled, false otherwise.
  114. */
  115. readonly disabled: boolean;
  116. /**
  117. * A control is `enabled` as long as its `status` is not `DISABLED`.
  118. *
  119. * @returns True if the control has any status other than 'DISABLED',
  120. * false if the status is 'DISABLED'.
  121. *
  122. * @see {@link AbstractControl.status}
  123. *
  124. */
  125. readonly enabled: boolean;
  126. /**
  127. * An object containing any errors generated by failing validation,
  128. * or null if there are no errors.
  129. */
  130. readonly errors: ValidationErrors | null;
  131. /**
  132. * A control is `pristine` if the user has not yet changed
  133. * the value in the UI.
  134. *
  135. * @returns True if the user has not yet changed the value in the UI; compare `dirty`.
  136. * Programmatic changes to a control's value do not mark it dirty.
  137. */
  138. readonly pristine: boolean;
  139. /**
  140. * A control is `dirty` if the user has changed the value
  141. * in the UI.
  142. *
  143. * @returns True if the user has changed the value of this control in the UI; compare `pristine`.
  144. * Programmatic changes to a control's value do not mark it dirty.
  145. */
  146. readonly dirty: boolean;
  147. /**
  148. * True if the control is marked as `touched`.
  149. *
  150. * A control is marked `touched` once the user has triggered
  151. * a `blur` event on it.
  152. */
  153. readonly touched: boolean;
  154. /**
  155. * True if the control has not been marked as touched
  156. *
  157. * A control is `untouched` if the user has not yet triggered
  158. * a `blur` event on it.
  159. */
  160. readonly untouched: boolean;
  161. /**
  162. * A multicasting observable that emits an event every time the value of the control changes, in
  163. * the UI or programmatically.
  164. */
  165. readonly valueChanges: Observable<any>;
  166. /**
  167. * A multicasting observable that emits an event every time the validation `status` of the control
  168. * recalculates.
  169. *
  170. * @see {@link AbstractControl.status}
  171. *
  172. */
  173. readonly statusChanges: Observable<any>;
  174. /**
  175. * Reports the update strategy of the `AbstractControl` (meaning
  176. * the event on which the control updates itself).
  177. * Possible values: `'change'` | `'blur'` | `'submit'`
  178. * Default value: `'change'`
  179. */
  180. readonly updateOn: FormHooks;
  181. /**
  182. * Sets the synchronous validators that are active on this control. Calling
  183. * this overwrites any existing sync validators.
  184. */
  185. setValidators(newValidator: ValidatorFn | ValidatorFn[] | null): void;
  186. /**
  187. * Sets the async validators that are active on this control. Calling this
  188. * overwrites any existing async validators.
  189. */
  190. setAsyncValidators(newValidator: AsyncValidatorFn | AsyncValidatorFn[] | null): void;
  191. /**
  192. * Empties out the sync validator list.
  193. */
  194. clearValidators(): void;
  195. /**
  196. * Empties out the async validator list.
  197. */
  198. clearAsyncValidators(): void;
  199. /**
  200. * Marks the control as `touched`. A control is touched by focus and
  201. * blur events that do not change the value.
  202. *
  203. * @see `markAsUntouched()`
  204. * @see `markAsDirty()`
  205. * @see `markAsPristine()`
  206. *
  207. * @param opts Configuration options that determine how the control propagates changes
  208. * and emits events events after marking is applied.
  209. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  210. * marks all direct ancestors. Default is false.
  211. */
  212. markAsTouched(opts?: {
  213. onlySelf?: boolean;
  214. }): void;
  215. /**
  216. * Marks the control and all its descendant controls as `touched`.
  217. * @see `markAsTouched()`
  218. */
  219. markAllAsTouched(): void;
  220. /**
  221. * Marks the control as `untouched`.
  222. *
  223. * If the control has any children, also marks all children as `untouched`
  224. * and recalculates the `touched` status of all parent controls.
  225. *
  226. * @see `markAsTouched()`
  227. * @see `markAsDirty()`
  228. * @see `markAsPristine()`
  229. *
  230. * @param opts Configuration options that determine how the control propagates changes
  231. * and emits events after the marking is applied.
  232. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  233. * marks all direct ancestors. Default is false.
  234. */
  235. markAsUntouched(opts?: {
  236. onlySelf?: boolean;
  237. }): void;
  238. /**
  239. * Marks the control as `dirty`. A control becomes dirty when
  240. * the control's value is changed through the UI; compare `markAsTouched`.
  241. *
  242. * @see `markAsTouched()`
  243. * @see `markAsUntouched()`
  244. * @see `markAsPristine()`
  245. *
  246. * @param opts Configuration options that determine how the control propagates changes
  247. * and emits events after marking is applied.
  248. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  249. * marks all direct ancestors. Default is false.
  250. */
  251. markAsDirty(opts?: {
  252. onlySelf?: boolean;
  253. }): void;
  254. /**
  255. * Marks the control as `pristine`.
  256. *
  257. * If the control has any children, marks all children as `pristine`,
  258. * and recalculates the `pristine` status of all parent
  259. * controls.
  260. *
  261. * @see `markAsTouched()`
  262. * @see `markAsUntouched()`
  263. * @see `markAsDirty()`
  264. *
  265. * @param opts Configuration options that determine how the control emits events after
  266. * marking is applied.
  267. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  268. * marks all direct ancestors. Default is false..
  269. */
  270. markAsPristine(opts?: {
  271. onlySelf?: boolean;
  272. }): void;
  273. /**
  274. * Marks the control as `pending`.
  275. *
  276. * A control is pending while the control performs async validation.
  277. *
  278. * @see {@link AbstractControl.status}
  279. *
  280. * @param opts Configuration options that determine how the control propagates changes and
  281. * emits events after marking is applied.
  282. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  283. * marks all direct ancestors. Default is false..
  284. * * `emitEvent`: When true or not supplied (the default), the `statusChanges`
  285. * observable emits an event with the latest status the control is marked pending.
  286. * When false, no events are emitted.
  287. *
  288. */
  289. markAsPending(opts?: {
  290. onlySelf?: boolean;
  291. emitEvent?: boolean;
  292. }): void;
  293. /**
  294. * Disables the control. This means the control is exempt from validation checks and
  295. * excluded from the aggregate value of any parent. Its status is `DISABLED`.
  296. *
  297. * If the control has children, all children are also disabled.
  298. *
  299. * @see {@link AbstractControl.status}
  300. *
  301. * @param opts Configuration options that determine how the control propagates
  302. * changes and emits events after the control is disabled.
  303. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  304. * marks all direct ancestors. Default is false..
  305. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  306. * `valueChanges`
  307. * observables emit events with the latest status and value when the control is disabled.
  308. * When false, no events are emitted.
  309. */
  310. disable(opts?: {
  311. onlySelf?: boolean;
  312. emitEvent?: boolean;
  313. }): void;
  314. /**
  315. * Enables the control. This means the control is included in validation checks and
  316. * the aggregate value of its parent. Its status recalculates based on its value and
  317. * its validators.
  318. *
  319. * By default, if the control has children, all children are enabled.
  320. *
  321. * @see {@link AbstractControl.status}
  322. *
  323. * @param opts Configure options that control how the control propagates changes and
  324. * emits events when marked as untouched
  325. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  326. * marks all direct ancestors. Default is false..
  327. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  328. * `valueChanges`
  329. * observables emit events with the latest status and value when the control is enabled.
  330. * When false, no events are emitted.
  331. */
  332. enable(opts?: {
  333. onlySelf?: boolean;
  334. emitEvent?: boolean;
  335. }): void;
  336. private _updateAncestors;
  337. /**
  338. * @param parent Sets the parent of the control
  339. */
  340. setParent(parent: FormGroup | FormArray): void;
  341. /**
  342. * Sets the value of the control. Abstract method (implemented in sub-classes).
  343. */
  344. abstract setValue(value: any, options?: Object): void;
  345. /**
  346. * Patches the value of the control. Abstract method (implemented in sub-classes).
  347. */
  348. abstract patchValue(value: any, options?: Object): void;
  349. /**
  350. * Resets the control. Abstract method (implemented in sub-classes).
  351. */
  352. abstract reset(value?: any, options?: Object): void;
  353. /**
  354. * Recalculates the value and validation status of the control.
  355. *
  356. * By default, it also updates the value and validity of its ancestors.
  357. *
  358. * @param opts Configuration options determine how the control propagates changes and emits events
  359. * after updates and validity checks are applied.
  360. * * `onlySelf`: When true, only update this control. When false or not supplied,
  361. * update all direct ancestors. Default is false..
  362. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  363. * `valueChanges`
  364. * observables emit events with the latest status and value when the control is updated.
  365. * When false, no events are emitted.
  366. */
  367. updateValueAndValidity(opts?: {
  368. onlySelf?: boolean;
  369. emitEvent?: boolean;
  370. }): void;
  371. private _setInitialStatus;
  372. private _runValidator;
  373. private _runAsyncValidator;
  374. private _cancelExistingSubscription;
  375. /**
  376. * Sets errors on a form control when running validations manually, rather than automatically.
  377. *
  378. * Calling `setErrors` also updates the validity of the parent control.
  379. *
  380. * @usageNotes
  381. * ### Manually set the errors for a control
  382. *
  383. * ```
  384. * const login = new FormControl('someLogin');
  385. * login.setErrors({
  386. * notUnique: true
  387. * });
  388. *
  389. * expect(login.valid).toEqual(false);
  390. * expect(login.errors).toEqual({ notUnique: true });
  391. *
  392. * login.setValue('someOtherLogin');
  393. *
  394. * expect(login.valid).toEqual(true);
  395. * ```
  396. */
  397. setErrors(errors: ValidationErrors | null, opts?: {
  398. emitEvent?: boolean;
  399. }): void;
  400. /**
  401. * Retrieves a child control given the control's name or path.
  402. *
  403. * @param path A dot-delimited string or array of string/number values that define the path to the
  404. * control.
  405. *
  406. * @usageNotes
  407. * ### Retrieve a nested control
  408. *
  409. * For example, to get a `name` control nested within a `person` sub-group:
  410. *
  411. * * `this.form.get('person.name');`
  412. *
  413. * -OR-
  414. *
  415. * * `this.form.get(['person', 'name']);`
  416. */
  417. get(path: Array<string | number> | string): AbstractControl | null;
  418. /**
  419. * @description
  420. * Reports error data for the control with the given path.
  421. *
  422. * @param errorCode The code of the error to check
  423. * @param path A list of control names that designates how to move from the current control
  424. * to the control that should be queried for errors.
  425. *
  426. * @usageNotes
  427. * For example, for the following `FormGroup`:
  428. *
  429. * ```
  430. * form = new FormGroup({
  431. * address: new FormGroup({ street: new FormControl() })
  432. * });
  433. * ```
  434. *
  435. * The path to the 'street' control from the root form would be 'address' -> 'street'.
  436. *
  437. * It can be provided to this method in one of two formats:
  438. *
  439. * 1. An array of string control names, e.g. `['address', 'street']`
  440. * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
  441. *
  442. * @returns error data for that particular error. If the control or error is not present,
  443. * null is returned.
  444. */
  445. getError(errorCode: string, path?: Array<string | number> | string): any;
  446. /**
  447. * @description
  448. * Reports whether the control with the given path has the error specified.
  449. *
  450. * @param errorCode The code of the error to check
  451. * @param path A list of control names that designates how to move from the current control
  452. * to the control that should be queried for errors.
  453. *
  454. * @usageNotes
  455. * For example, for the following `FormGroup`:
  456. *
  457. * ```
  458. * form = new FormGroup({
  459. * address: new FormGroup({ street: new FormControl() })
  460. * });
  461. * ```
  462. *
  463. * The path to the 'street' control from the root form would be 'address' -> 'street'.
  464. *
  465. * It can be provided to this method in one of two formats:
  466. *
  467. * 1. An array of string control names, e.g. `['address', 'street']`
  468. * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
  469. *
  470. * If no path is given, this method checks for the error on the current control.
  471. *
  472. * @returns whether the given error is present in the control at the given path.
  473. *
  474. * If the control is not present, false is returned.
  475. */
  476. hasError(errorCode: string, path?: Array<string | number> | string): boolean;
  477. /**
  478. * Retrieves the top-level ancestor of this control.
  479. */
  480. readonly root: AbstractControl;
  481. private _calculateStatus;
  482. }
  483. /**
  484. * @description
  485. * Base class for control directives.
  486. *
  487. * This class is only used internally in the `ReactiveFormsModule` and the `FormsModule`.
  488. *
  489. * @publicApi
  490. */
  491. export declare abstract class AbstractControlDirective {
  492. /**
  493. * @description
  494. * A reference to the underlying control.
  495. *
  496. * @returns the control that backs this directive. Most properties fall through to that instance.
  497. */
  498. abstract readonly control: AbstractControl | null;
  499. /**
  500. * @description
  501. * Reports the value of the control if it is present, otherwise null.
  502. */
  503. readonly value: any;
  504. /**
  505. * @description
  506. * Reports whether the control is valid. A control is considered valid if no
  507. * validation errors exist with the current value.
  508. * If the control is not present, null is returned.
  509. */
  510. readonly valid: boolean | null;
  511. /**
  512. * @description
  513. * Reports whether the control is invalid, meaning that an error exists in the input value.
  514. * If the control is not present, null is returned.
  515. */
  516. readonly invalid: boolean | null;
  517. /**
  518. * @description
  519. * Reports whether a control is pending, meaning that that async validation is occurring and
  520. * errors are not yet available for the input value. If the control is not present, null is
  521. * returned.
  522. */
  523. readonly pending: boolean | null;
  524. /**
  525. * @description
  526. * Reports whether the control is disabled, meaning that the control is disabled
  527. * in the UI and is exempt from validation checks and excluded from aggregate
  528. * values of ancestor controls. If the control is not present, null is returned.
  529. */
  530. readonly disabled: boolean | null;
  531. /**
  532. * @description
  533. * Reports whether the control is enabled, meaning that the control is included in ancestor
  534. * calculations of validity or value. If the control is not present, null is returned.
  535. */
  536. readonly enabled: boolean | null;
  537. /**
  538. * @description
  539. * Reports the control's validation errors. If the control is not present, null is returned.
  540. */
  541. readonly errors: ValidationErrors | null;
  542. /**
  543. * @description
  544. * Reports whether the control is pristine, meaning that the user has not yet changed
  545. * the value in the UI. If the control is not present, null is returned.
  546. */
  547. readonly pristine: boolean | null;
  548. /**
  549. * @description
  550. * Reports whether the control is dirty, meaning that the user has changed
  551. * the value in the UI. If the control is not present, null is returned.
  552. */
  553. readonly dirty: boolean | null;
  554. /**
  555. * @description
  556. * Reports whether the control is touched, meaning that the user has triggered
  557. * a `blur` event on it. If the control is not present, null is returned.
  558. */
  559. readonly touched: boolean | null;
  560. /**
  561. * @description
  562. * Reports the validation status of the control. Possible values include:
  563. * 'VALID', 'INVALID', 'DISABLED', and 'PENDING'.
  564. * If the control is not present, null is returned.
  565. */
  566. readonly status: string | null;
  567. /**
  568. * @description
  569. * Reports whether the control is untouched, meaning that the user has not yet triggered
  570. * a `blur` event on it. If the control is not present, null is returned.
  571. */
  572. readonly untouched: boolean | null;
  573. /**
  574. * @description
  575. * Returns a multicasting observable that emits a validation status whenever it is
  576. * calculated for the control. If the control is not present, null is returned.
  577. */
  578. readonly statusChanges: Observable<any> | null;
  579. /**
  580. * @description
  581. * Returns a multicasting observable of value changes for the control that emits every time the
  582. * value of the control changes in the UI or programmatically.
  583. * If the control is not present, null is returned.
  584. */
  585. readonly valueChanges: Observable<any> | null;
  586. /**
  587. * @description
  588. * Returns an array that represents the path from the top-level form to this control.
  589. * Each index is the string name of the control on that level.
  590. */
  591. readonly path: string[] | null;
  592. /**
  593. * @description
  594. * Resets the control with the provided value if the control is present.
  595. */
  596. reset(value?: any): void;
  597. /**
  598. * @description
  599. * Reports whether the control with the given path has the error specified.
  600. *
  601. * @param errorCode The code of the error to check
  602. * @param path A list of control names that designates how to move from the current control
  603. * to the control that should be queried for errors.
  604. *
  605. * @usageNotes
  606. * For example, for the following `FormGroup`:
  607. *
  608. * ```
  609. * form = new FormGroup({
  610. * address: new FormGroup({ street: new FormControl() })
  611. * });
  612. * ```
  613. *
  614. * The path to the 'street' control from the root form would be 'address' -> 'street'.
  615. *
  616. * It can be provided to this method in one of two formats:
  617. *
  618. * 1. An array of string control names, e.g. `['address', 'street']`
  619. * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
  620. *
  621. * If no path is given, this method checks for the error on the current control.
  622. *
  623. * @returns whether the given error is present in the control at the given path.
  624. *
  625. * If the control is not present, false is returned.
  626. */
  627. hasError(errorCode: string, path?: Array<string | number> | string): boolean;
  628. /**
  629. * @description
  630. * Reports error data for the control with the given path.
  631. *
  632. * @param errorCode The code of the error to check
  633. * @param path A list of control names that designates how to move from the current control
  634. * to the control that should be queried for errors.
  635. *
  636. * @usageNotes
  637. * For example, for the following `FormGroup`:
  638. *
  639. * ```
  640. * form = new FormGroup({
  641. * address: new FormGroup({ street: new FormControl() })
  642. * });
  643. * ```
  644. *
  645. * The path to the 'street' control from the root form would be 'address' -> 'street'.
  646. *
  647. * It can be provided to this method in one of two formats:
  648. *
  649. * 1. An array of string control names, e.g. `['address', 'street']`
  650. * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
  651. *
  652. * @returns error data for that particular error. If the control or error is not present,
  653. * null is returned.
  654. */
  655. getError(errorCode: string, path?: Array<string | number> | string): any;
  656. }
  657. /**
  658. * Interface for options provided to an `AbstractControl`.
  659. *
  660. * @publicApi
  661. */
  662. export declare interface AbstractControlOptions {
  663. /**
  664. * @description
  665. * The list of validators applied to a control.
  666. */
  667. validators?: ValidatorFn | ValidatorFn[] | null;
  668. /**
  669. * @description
  670. * The list of async validators applied to control.
  671. */
  672. asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[] | null;
  673. /**
  674. * @description
  675. * The event name for control to update upon.
  676. */
  677. updateOn?: 'change' | 'blur' | 'submit';
  678. }
  679. /**
  680. * @description
  681. * A base class for code shared between the `NgModelGroup` and `FormGroupName` directives.
  682. *
  683. * @publicApi
  684. */
  685. export declare class AbstractFormGroupDirective extends ControlContainer implements OnInit, OnDestroy {
  686. /**
  687. * @description
  688. * An internal callback method triggered on the instance after the inputs are set.
  689. * Registers the group with its parent group.
  690. */
  691. ngOnInit(): void;
  692. /**
  693. * @description
  694. * An internal callback method triggered before the instance is destroyed.
  695. * Removes the group from its parent group.
  696. */
  697. ngOnDestroy(): void;
  698. /**
  699. * @description
  700. * The `FormGroup` bound to this directive.
  701. */
  702. readonly control: FormGroup;
  703. /**
  704. * @description
  705. * The path to this group from the top-level directive.
  706. */
  707. readonly path: string[];
  708. /**
  709. * @description
  710. * The top-level directive for this group if present, otherwise null.
  711. */
  712. readonly formDirective: Form | null;
  713. /**
  714. * @description
  715. * The synchronous validators registered with this group.
  716. */
  717. readonly validator: ValidatorFn | null;
  718. /**
  719. * @description
  720. * The async validators registered with this group.
  721. */
  722. readonly asyncValidator: AsyncValidatorFn | null;
  723. }
  724. /**
  725. * @description
  726. * An interface implemented by classes that perform asynchronous validation.
  727. *
  728. * @usageNotes
  729. *
  730. * ### Provide a custom async validator directive
  731. *
  732. * The following example implements the `AsyncValidator` interface to create an
  733. * async validator directive with a custom error key.
  734. *
  735. * ```typescript
  736. * import { of as observableOf } from 'rxjs';
  737. *
  738. * @Directive({
  739. * selector: '[customAsyncValidator]',
  740. * providers: [{provide: NG_ASYNC_VALIDATORS, useExisting: CustomAsyncValidatorDirective, multi:
  741. * true}]
  742. * })
  743. * class CustomAsyncValidatorDirective implements AsyncValidator {
  744. * validate(control: AbstractControl): Observable<ValidationErrors|null> {
  745. * return observableOf({'custom': true});
  746. * }
  747. * }
  748. * ```
  749. *
  750. * @publicApi
  751. */
  752. export declare interface AsyncValidator extends Validator {
  753. /**
  754. * @description
  755. * Method that performs async validation against the provided control.
  756. *
  757. * @param control The control to validate against.
  758. *
  759. * @returns A promise or observable that resolves a map of validation errors
  760. * if validation fails, otherwise null.
  761. */
  762. validate(control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
  763. }
  764. /**
  765. * @description
  766. * A function that receives a control and returns a Promise or observable
  767. * that emits validation errors if present, otherwise null.
  768. *
  769. * @publicApi
  770. */
  771. export declare interface AsyncValidatorFn {
  772. (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
  773. }
  774. /**
  775. * @description
  776. * A `ControlValueAccessor` for writing a value and listening to changes on a checkbox input
  777. * element.
  778. *
  779. * @usageNotes
  780. *
  781. * ### Using a checkbox with a reactive form.
  782. *
  783. * The following example shows how to use a checkbox with a reactive form.
  784. *
  785. * ```ts
  786. * const rememberLoginControl = new FormControl();
  787. * ```
  788. *
  789. * ```
  790. * <input type="checkbox" [formControl]="rememberLoginControl">
  791. * ```
  792. *
  793. * @ngModule ReactiveFormsModule
  794. * @ngModule FormsModule
  795. * @publicApi
  796. */
  797. export declare class CheckboxControlValueAccessor implements ControlValueAccessor {
  798. private _renderer;
  799. private _elementRef;
  800. /**
  801. * @description
  802. * The registered callback function called when a change event occurs on the input element.
  803. */
  804. onChange: (_: any) => void;
  805. /**
  806. * @description
  807. * The registered callback function called when a blur event occurs on the input element.
  808. */
  809. onTouched: () => void;
  810. constructor(_renderer: Renderer2, _elementRef: ElementRef);
  811. /**
  812. * Sets the "checked" property on the input element.
  813. *
  814. * @param value The checked value
  815. */
  816. writeValue(value: any): void;
  817. /**
  818. * @description
  819. * Registers a function called when the control value changes.
  820. *
  821. * @param fn The callback function
  822. */
  823. registerOnChange(fn: (_: any) => {}): void;
  824. /**
  825. * @description
  826. * Registers a function called when the control is touched.
  827. *
  828. * @param fn The callback function
  829. */
  830. registerOnTouched(fn: () => {}): void;
  831. /**
  832. * Sets the "disabled" property on the input element.
  833. *
  834. * @param isDisabled The disabled value
  835. */
  836. setDisabledState(isDisabled: boolean): void;
  837. }
  838. /**
  839. * A Directive that adds the `required` validator to checkbox controls marked with the
  840. * `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
  841. *
  842. * @see [Form Validation](guide/form-validation)
  843. *
  844. * @usageNotes
  845. *
  846. * ### Adding a required checkbox validator using template-driven forms
  847. *
  848. * The following example shows how to add a checkbox required validator to an input attached to an ngModel binding.
  849. *
  850. * ```
  851. * <input type="checkbox" name="active" ngModel required>
  852. * ```
  853. *
  854. * @publicApi
  855. * @ngModule FormsModule
  856. * @ngModule ReactiveFormsModule
  857. */
  858. export declare class CheckboxRequiredValidator extends RequiredValidator {
  859. /**
  860. * @description
  861. * Method that validates whether or not the checkbox has been checked.
  862. * Returns the validation result if enabled, otherwise null.
  863. */
  864. validate(control: AbstractControl): ValidationErrors | null;
  865. }
  866. /**
  867. * @description
  868. * Provide this token to control if form directives buffer IME input until
  869. * the "compositionend" event occurs.
  870. * @publicApi
  871. */
  872. export declare const COMPOSITION_BUFFER_MODE: InjectionToken<boolean>;
  873. /**
  874. * @description
  875. * A base class for directives that contain multiple registered instances of `NgControl`.
  876. * Only used by the forms module.
  877. *
  878. * @publicApi
  879. */
  880. export declare abstract class ControlContainer extends AbstractControlDirective {
  881. /**
  882. * @description
  883. * The name for the control
  884. */
  885. name: string;
  886. /**
  887. * @description
  888. * The top-level form directive for the control.
  889. */
  890. readonly formDirective: Form | null;
  891. /**
  892. * @description
  893. * The path to this group.
  894. */
  895. readonly path: string[] | null;
  896. }
  897. /**
  898. * @description
  899. * Defines an interface that acts as a bridge between the Angular forms API and a
  900. * native element in the DOM.
  901. *
  902. * Implement this interface to create a custom form control directive
  903. * that integrates with Angular forms.
  904. *
  905. * @see DefaultValueAccessor
  906. *
  907. * @publicApi
  908. */
  909. export declare interface ControlValueAccessor {
  910. /**
  911. * @description
  912. * Writes a new value to the element.
  913. *
  914. * This method is called by the forms API to write to the view when programmatic
  915. * changes from model to view are requested.
  916. *
  917. * @usageNotes
  918. * ### Write a value to the element
  919. *
  920. * The following example writes a value to the native DOM element.
  921. *
  922. * ```ts
  923. * writeValue(value: any): void {
  924. * this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
  925. * }
  926. * ```
  927. *
  928. * @param obj The new value for the element
  929. */
  930. writeValue(obj: any): void;
  931. /**
  932. * @description
  933. * Registers a callback function that is called when the control's value
  934. * changes in the UI.
  935. *
  936. * This method is called by the forms API on initialization to update the form
  937. * model when values propagate from the view to the model.
  938. *
  939. * When implementing the `registerOnChange` method in your own value accessor,
  940. * save the given function so your class calls it at the appropriate time.
  941. *
  942. * @usageNotes
  943. * ### Store the change function
  944. *
  945. * The following example stores the provided function as an internal method.
  946. *
  947. * ```ts
  948. * registerOnChange(fn: (_: any) => void): void {
  949. * this._onChange = fn;
  950. * }
  951. * ```
  952. *
  953. * When the value changes in the UI, call the registered
  954. * function to allow the forms API to update itself:
  955. *
  956. * ```ts
  957. * host: {
  958. * '(change)': '_onChange($event.target.value)'
  959. * }
  960. * ```
  961. *
  962. * @param fn The callback function to register
  963. */
  964. registerOnChange(fn: any): void;
  965. /**
  966. * @description
  967. * Registers a callback function is called by the forms API on initialization
  968. * to update the form model on blur.
  969. *
  970. * When implementing `registerOnTouched` in your own value accessor, save the given
  971. * function so your class calls it when the control should be considered
  972. * blurred or "touched".
  973. *
  974. * @usageNotes
  975. * ### Store the callback function
  976. *
  977. * The following example stores the provided function as an internal method.
  978. *
  979. * ```ts
  980. * registerOnTouched(fn: any): void {
  981. * this._onTouched = fn;
  982. * }
  983. * ```
  984. *
  985. * On blur (or equivalent), your class should call the registered function to allow
  986. * the forms API to update itself:
  987. *
  988. * ```ts
  989. * host: {
  990. * '(blur)': '_onTouched()'
  991. * }
  992. * ```
  993. *
  994. * @param fn The callback function to register
  995. */
  996. registerOnTouched(fn: any): void;
  997. /**
  998. * @description
  999. * Function that is called by the forms API when the control status changes to
  1000. * or from 'DISABLED'. Depending on the status, it enables or disables the
  1001. * appropriate DOM element.
  1002. *
  1003. * @usageNotes
  1004. * The following is an example of writing the disabled property to a native DOM element:
  1005. *
  1006. * ```ts
  1007. * setDisabledState(isDisabled: boolean): void {
  1008. * this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  1009. * }
  1010. * ```
  1011. *
  1012. * @param isDisabled The disabled status to set on the element
  1013. */
  1014. setDisabledState?(isDisabled: boolean): void;
  1015. }
  1016. /**
  1017. * @description
  1018. * The default `ControlValueAccessor` for writing a value and listening to changes on input
  1019. * elements. The accessor is used by the `FormControlDirective`, `FormControlName`, and
  1020. * `NgModel` directives.
  1021. *
  1022. * @usageNotes
  1023. *
  1024. * ### Using the default value accessor
  1025. *
  1026. * The following example shows how to use an input element that activates the default value accessor
  1027. * (in this case, a text field).
  1028. *
  1029. * ```ts
  1030. * const firstNameControl = new FormControl();
  1031. * ```
  1032. *
  1033. * ```
  1034. * <input type="text" [formControl]="firstNameControl">
  1035. * ```
  1036. *
  1037. * @ngModule ReactiveFormsModule
  1038. * @ngModule FormsModule
  1039. * @publicApi
  1040. */
  1041. export declare class DefaultValueAccessor implements ControlValueAccessor {
  1042. private _renderer;
  1043. private _elementRef;
  1044. private _compositionMode;
  1045. /**
  1046. * @description
  1047. * The registered callback function called when an input event occurs on the input element.
  1048. */
  1049. onChange: (_: any) => void;
  1050. /**
  1051. * @description
  1052. * The registered callback function called when a blur event occurs on the input element.
  1053. */
  1054. onTouched: () => void;
  1055. /** Whether the user is creating a composition string (IME events). */
  1056. private _composing;
  1057. constructor(_renderer: Renderer2, _elementRef: ElementRef, _compositionMode: boolean);
  1058. /**
  1059. * Sets the "value" property on the input element.
  1060. *
  1061. * @param value The checked value
  1062. */
  1063. writeValue(value: any): void;
  1064. /**
  1065. * @description
  1066. * Registers a function called when the control value changes.
  1067. *
  1068. * @param fn The callback function
  1069. */
  1070. registerOnChange(fn: (_: any) => void): void;
  1071. /**
  1072. * @description
  1073. * Registers a function called when the control is touched.
  1074. *
  1075. * @param fn The callback function
  1076. */
  1077. registerOnTouched(fn: () => void): void;
  1078. /**
  1079. * Sets the "disabled" property on the input element.
  1080. *
  1081. * @param isDisabled The disabled value
  1082. */
  1083. setDisabledState(isDisabled: boolean): void;
  1084. }
  1085. /**
  1086. * A directive that adds the `email` validator to controls marked with the
  1087. * `email` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
  1088. *
  1089. * @see [Form Validation](guide/form-validation)
  1090. *
  1091. * @usageNotes
  1092. *
  1093. * ### Adding an email validator
  1094. *
  1095. * The following example shows how to add an email validator to an input attached to an ngModel binding.
  1096. *
  1097. * ```
  1098. * <input type="email" name="email" ngModel email>
  1099. * <input type="email" name="email" ngModel email="true">
  1100. * <input type="email" name="email" ngModel [email]="true">
  1101. * ```
  1102. *
  1103. * @publicApi
  1104. * @ngModule FormsModule
  1105. * @ngModule ReactiveFormsModule
  1106. */
  1107. export declare class EmailValidator implements Validator {
  1108. private _enabled;
  1109. private _onChange;
  1110. /**
  1111. * @description
  1112. * Tracks changes to the email attribute bound to this directive.
  1113. */
  1114. email: boolean | string;
  1115. /**
  1116. * @description
  1117. * Method that validates whether an email address is valid.
  1118. * Returns the validation result if enabled, otherwise null.
  1119. */
  1120. validate(control: AbstractControl): ValidationErrors | null;
  1121. /**
  1122. * @description
  1123. * Registers a callback function to call when the validator inputs change.
  1124. *
  1125. * @param fn The callback function
  1126. */
  1127. registerOnValidatorChange(fn: () => void): void;
  1128. }
  1129. /**
  1130. * @description
  1131. * An interface implemented by `FormGroupDirective` and `NgForm` directives.
  1132. *
  1133. * Only used by the `ReactiveFormsModule` and `FormsModule`.
  1134. *
  1135. * @publicApi
  1136. */
  1137. export declare interface Form {
  1138. /**
  1139. * @description
  1140. * Add a control to this form.
  1141. *
  1142. * @param dir The control directive to add to the form.
  1143. */
  1144. addControl(dir: NgControl): void;
  1145. /**
  1146. * @description
  1147. * Remove a control from this form.
  1148. *
  1149. * @param dir: The control directive to remove from the form.
  1150. */
  1151. removeControl(dir: NgControl): void;
  1152. /**
  1153. * @description
  1154. * The control directive from which to get the `FormControl`.
  1155. *
  1156. * @param dir: The control directive.
  1157. */
  1158. getControl(dir: NgControl): FormControl;
  1159. /**
  1160. * @description
  1161. * Add a group of controls to this form.
  1162. *
  1163. * @param dir: The control group directive to add.
  1164. */
  1165. addFormGroup(dir: AbstractFormGroupDirective): void;
  1166. /**
  1167. * @description
  1168. * Remove a group of controls to this form.
  1169. *
  1170. * @param dir: The control group directive to remove.
  1171. */
  1172. removeFormGroup(dir: AbstractFormGroupDirective): void;
  1173. /**
  1174. * @description
  1175. * The `FormGroup` associated with a particular `AbstractFormGroupDirective`.
  1176. *
  1177. * @param dir: The form group directive from which to get the `FormGroup`.
  1178. */
  1179. getFormGroup(dir: AbstractFormGroupDirective): FormGroup;
  1180. /**
  1181. * @description
  1182. * Update the model for a particular control with a new value.
  1183. *
  1184. * @param dir: The control directive to update.
  1185. * @param value: The new value for the control.
  1186. */
  1187. updateModel(dir: NgControl, value: any): void;
  1188. }
  1189. /**
  1190. * Tracks the value and validity state of an array of `FormControl`,
  1191. * `FormGroup` or `FormArray` instances.
  1192. *
  1193. * A `FormArray` aggregates the values of each child `FormControl` into an array.
  1194. * It calculates its status by reducing the status values of its children. For example, if one of
  1195. * the controls in a `FormArray` is invalid, the entire array becomes invalid.
  1196. *
  1197. * `FormArray` is one of the three fundamental building blocks used to define forms in Angular,
  1198. * along with `FormControl` and `FormGroup`.
  1199. *
  1200. * @usageNotes
  1201. *
  1202. * ### Create an array of form controls
  1203. *
  1204. * ```
  1205. * const arr = new FormArray([
  1206. * new FormControl('Nancy', Validators.minLength(2)),
  1207. * new FormControl('Drew'),
  1208. * ]);
  1209. *
  1210. * console.log(arr.value); // ['Nancy', 'Drew']
  1211. * console.log(arr.status); // 'VALID'
  1212. * ```
  1213. *
  1214. * ### Create a form array with array-level validators
  1215. *
  1216. * You include array-level validators and async validators. These come in handy
  1217. * when you want to perform validation that considers the value of more than one child
  1218. * control.
  1219. *
  1220. * The two types of validators are passed in separately as the second and third arg
  1221. * respectively, or together as part of an options object.
  1222. *
  1223. * ```
  1224. * const arr = new FormArray([
  1225. * new FormControl('Nancy'),
  1226. * new FormControl('Drew')
  1227. * ], {validators: myValidator, asyncValidators: myAsyncValidator});
  1228. * ```
  1229. *
  1230. * ### Set the updateOn property for all controls in a form array
  1231. *
  1232. * The options object is used to set a default value for each child
  1233. * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
  1234. * array level, all child controls default to 'blur', unless the child
  1235. * has explicitly specified a different `updateOn` value.
  1236. *
  1237. * ```ts
  1238. * const arr = new FormArray([
  1239. * new FormControl()
  1240. * ], {updateOn: 'blur'});
  1241. * ```
  1242. *
  1243. * ### Adding or removing controls from a form array
  1244. *
  1245. * To change the controls in the array, use the `push`, `insert`, `removeAt` or `clear` methods
  1246. * in `FormArray` itself. These methods ensure the controls are properly tracked in the
  1247. * form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
  1248. * the `FormArray` directly, as that result in strange and unexpected behavior such
  1249. * as broken change detection.
  1250. *
  1251. * @publicApi
  1252. */
  1253. export declare class FormArray extends AbstractControl {
  1254. controls: AbstractControl[];
  1255. /**
  1256. * Creates a new `FormArray` instance.
  1257. *
  1258. * @param controls An array of child controls. Each child control is given an index
  1259. * where it is registered.
  1260. *
  1261. * @param validatorOrOpts A synchronous validator function, or an array of
  1262. * such functions, or an `AbstractControlOptions` object that contains validation functions
  1263. * and a validation trigger.
  1264. *
  1265. * @param asyncValidator A single async validator or array of async validator functions
  1266. *
  1267. */
  1268. constructor(controls: AbstractControl[], validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
  1269. /**
  1270. * Get the `AbstractControl` at the given `index` in the array.
  1271. *
  1272. * @param index Index in the array to retrieve the control
  1273. */
  1274. at(index: number): AbstractControl;
  1275. /**
  1276. * Insert a new `AbstractControl` at the end of the array.
  1277. *
  1278. * @param control Form control to be inserted
  1279. */
  1280. push(control: AbstractControl): void;
  1281. /**
  1282. * Insert a new `AbstractControl` at the given `index` in the array.
  1283. *
  1284. * @param index Index in the array to insert the control
  1285. * @param control Form control to be inserted
  1286. */
  1287. insert(index: number, control: AbstractControl): void;
  1288. /**
  1289. * Remove the control at the given `index` in the array.
  1290. *
  1291. * @param index Index in the array to remove the control
  1292. */
  1293. removeAt(index: number): void;
  1294. /**
  1295. * Replace an existing control.
  1296. *
  1297. * @param index Index in the array to replace the control
  1298. * @param control The `AbstractControl` control to replace the existing control
  1299. */
  1300. setControl(index: number, control: AbstractControl): void;
  1301. /**
  1302. * Length of the control array.
  1303. */
  1304. readonly length: number;
  1305. /**
  1306. * Sets the value of the `FormArray`. It accepts an array that matches
  1307. * the structure of the control.
  1308. *
  1309. * This method performs strict checks, and throws an error if you try
  1310. * to set the value of a control that doesn't exist or if you exclude the
  1311. * value of a control.
  1312. *
  1313. * @usageNotes
  1314. * ### Set the values for the controls in the form array
  1315. *
  1316. * ```
  1317. * const arr = new FormArray([
  1318. * new FormControl(),
  1319. * new FormControl()
  1320. * ]);
  1321. * console.log(arr.value); // [null, null]
  1322. *
  1323. * arr.setValue(['Nancy', 'Drew']);
  1324. * console.log(arr.value); // ['Nancy', 'Drew']
  1325. * ```
  1326. *
  1327. * @param value Array of values for the controls
  1328. * @param options Configure options that determine how the control propagates changes and
  1329. * emits events after the value changes
  1330. *
  1331. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
  1332. * is false.
  1333. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  1334. * `valueChanges`
  1335. * observables emit events with the latest status and value when the control value is updated.
  1336. * When false, no events are emitted.
  1337. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  1338. * updateValueAndValidity} method.
  1339. */
  1340. setValue(value: any[], options?: {
  1341. onlySelf?: boolean;
  1342. emitEvent?: boolean;
  1343. }): void;
  1344. /**
  1345. * Patches the value of the `FormArray`. It accepts an array that matches the
  1346. * structure of the control, and does its best to match the values to the correct
  1347. * controls in the group.
  1348. *
  1349. * It accepts both super-sets and sub-sets of the array without throwing an error.
  1350. *
  1351. * @usageNotes
  1352. * ### Patch the values for controls in a form array
  1353. *
  1354. * ```
  1355. * const arr = new FormArray([
  1356. * new FormControl(),
  1357. * new FormControl()
  1358. * ]);
  1359. * console.log(arr.value); // [null, null]
  1360. *
  1361. * arr.patchValue(['Nancy']);
  1362. * console.log(arr.value); // ['Nancy', null]
  1363. * ```
  1364. *
  1365. * @param value Array of latest values for the controls
  1366. * @param options Configure options that determine how the control propagates changes and
  1367. * emits events after the value changes
  1368. *
  1369. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
  1370. * is false.
  1371. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  1372. * `valueChanges`
  1373. * observables emit events with the latest status and value when the control value is updated.
  1374. * When false, no events are emitted.
  1375. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  1376. * updateValueAndValidity} method.
  1377. */
  1378. patchValue(value: any[], options?: {
  1379. onlySelf?: boolean;
  1380. emitEvent?: boolean;
  1381. }): void;
  1382. /**
  1383. * Resets the `FormArray` and all descendants are marked `pristine` and `untouched`, and the
  1384. * value of all descendants to null or null maps.
  1385. *
  1386. * You reset to a specific form state by passing in an array of states
  1387. * that matches the structure of the control. The state is a standalone value
  1388. * or a form state object with both a value and a disabled status.
  1389. *
  1390. * @usageNotes
  1391. * ### Reset the values in a form array
  1392. *
  1393. * ```ts
  1394. * const arr = new FormArray([
  1395. * new FormControl(),
  1396. * new FormControl()
  1397. * ]);
  1398. * arr.reset(['name', 'last name']);
  1399. *
  1400. * console.log(this.arr.value); // ['name', 'last name']
  1401. * ```
  1402. *
  1403. * ### Reset the values in a form array and the disabled status for the first control
  1404. *
  1405. * ```
  1406. * this.arr.reset([
  1407. * {value: 'name', disabled: true},
  1408. * 'last'
  1409. * ]);
  1410. *
  1411. * console.log(this.arr.value); // ['name', 'last name']
  1412. * console.log(this.arr.get(0).status); // 'DISABLED'
  1413. * ```
  1414. *
  1415. * @param value Array of values for the controls
  1416. * @param options Configure options that determine how the control propagates changes and
  1417. * emits events after the value changes
  1418. *
  1419. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
  1420. * is false.
  1421. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  1422. * `valueChanges`
  1423. * observables emit events with the latest status and value when the control is reset.
  1424. * When false, no events are emitted.
  1425. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  1426. * updateValueAndValidity} method.
  1427. */
  1428. reset(value?: any, options?: {
  1429. onlySelf?: boolean;
  1430. emitEvent?: boolean;
  1431. }): void;
  1432. /**
  1433. * The aggregate value of the array, including any disabled controls.
  1434. *
  1435. * Reports all values regardless of disabled status.
  1436. * For enabled controls only, the `value` property is the best way to get the value of the array.
  1437. */
  1438. getRawValue(): any[];
  1439. /**
  1440. * Remove all controls in the `FormArray`.
  1441. *
  1442. * @usageNotes
  1443. * ### Remove all elements from a FormArray
  1444. *
  1445. * ```ts
  1446. * const arr = new FormArray([
  1447. * new FormControl(),
  1448. * new FormControl()
  1449. * ]);
  1450. * console.log(arr.length); // 2
  1451. *
  1452. * arr.clear();
  1453. * console.log(arr.length); // 0
  1454. * ```
  1455. *
  1456. * It's a simpler and more efficient alternative to removing all elements one by one:
  1457. *
  1458. * ```ts
  1459. * const arr = new FormArray([
  1460. * new FormControl(),
  1461. * new FormControl()
  1462. * ]);
  1463. *
  1464. * while (arr.length) {
  1465. * arr.removeAt(0);
  1466. * }
  1467. * ```
  1468. */
  1469. clear(): void;
  1470. private _registerControl;
  1471. }
  1472. /**
  1473. * @description
  1474. *
  1475. * Syncs a nested `FormArray` to a DOM element.
  1476. *
  1477. * This directive is designed to be used with a parent `FormGroupDirective` (selector:
  1478. * `[formGroup]`).
  1479. *
  1480. * It accepts the string name of the nested `FormArray` you want to link, and
  1481. * will look for a `FormArray` registered with that name in the parent
  1482. * `FormGroup` instance you passed into `FormGroupDirective`.
  1483. *
  1484. * @see [Reactive Forms Guide](guide/reactive-forms)
  1485. * @see `AbstractControl`
  1486. *
  1487. * @usageNotes
  1488. *
  1489. * ### Example
  1490. *
  1491. * {@example forms/ts/nestedFormArray/nested_form_array_example.ts region='Component'}
  1492. *
  1493. * @ngModule ReactiveFormsModule
  1494. * @publicApi
  1495. */
  1496. export declare class FormArrayName extends ControlContainer implements OnInit, OnDestroy {
  1497. /**
  1498. * @description
  1499. * Tracks the name of the `FormArray` bound to the directive. The name corresponds
  1500. * to a key in the parent `FormGroup` or `FormArray`.
  1501. */
  1502. name: string;
  1503. constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
  1504. /**
  1505. * @description
  1506. * A lifecycle method called when the directive's inputs are initialized. For internal use only.
  1507. *
  1508. * @throws If the directive does not have a valid parent.
  1509. */
  1510. ngOnInit(): void;
  1511. /**
  1512. * @description
  1513. * A lifecycle method called before the directive's instance is destroyed. For internal use only.
  1514. */
  1515. ngOnDestroy(): void;
  1516. /**
  1517. * @description
  1518. * The `FormArray` bound to this directive.
  1519. */
  1520. readonly control: FormArray;
  1521. /**
  1522. * @description
  1523. * The top-level directive for this group if present, otherwise null.
  1524. */
  1525. readonly formDirective: FormGroupDirective | null;
  1526. /**
  1527. * @description
  1528. * Returns an array that represents the path from the top-level form to this control.
  1529. * Each index is the string name of the control on that level.
  1530. */
  1531. readonly path: string[];
  1532. /**
  1533. * @description
  1534. * Synchronous validator function composed of all the synchronous validators registered with this
  1535. * directive.
  1536. */
  1537. readonly validator: ValidatorFn | null;
  1538. /**
  1539. * @description
  1540. * Async validator function composed of all the async validators registered with this directive.
  1541. */
  1542. readonly asyncValidator: AsyncValidatorFn | null;
  1543. private _checkParentType;
  1544. }
  1545. /**
  1546. * @description
  1547. * Creates an `AbstractControl` from a user-specified configuration.
  1548. *
  1549. * The `FormBuilder` provides syntactic sugar that shortens creating instances of a `FormControl`,
  1550. * `FormGroup`, or `FormArray`. It reduces the amount of boilerplate needed to build complex
  1551. * forms.
  1552. *
  1553. * @see [Reactive Forms Guide](/guide/reactive-forms)
  1554. *
  1555. * @publicApi
  1556. */
  1557. export declare class FormBuilder {
  1558. /**
  1559. * @description
  1560. * Construct a new `FormGroup` instance.
  1561. *
  1562. * @param controlsConfig A collection of child controls. The key for each child is the name
  1563. * under which it is registered.
  1564. *
  1565. * @param options Configuration options object for the `FormGroup`. The object can
  1566. * have two shapes:
  1567. *
  1568. * 1) `AbstractControlOptions` object (preferred), which consists of:
  1569. * * `validators`: A synchronous validator function, or an array of validator functions
  1570. * * `asyncValidators`: A single async validator or array of async validator functions
  1571. * * `updateOn`: The event upon which the control should be updated (options: 'change' | 'blur' |
  1572. * submit')
  1573. *
  1574. * 2) Legacy configuration object, which consists of:
  1575. * * `validator`: A synchronous validator function, or an array of validator functions
  1576. * * `asyncValidator`: A single async validator or array of async validator functions
  1577. *
  1578. */
  1579. group(controlsConfig: {
  1580. [key: string]: any;
  1581. }, options?: AbstractControlOptions | {
  1582. [key: string]: any;
  1583. } | null): FormGroup;
  1584. /**
  1585. * @description
  1586. * Construct a new `FormControl` with the given state, validators and options.
  1587. *
  1588. * @param formState Initializes the control with an initial state value, or
  1589. * with an object that contains both a value and a disabled status.
  1590. *
  1591. * @param validatorOrOpts A synchronous validator function, or an array of
  1592. * such functions, or an `AbstractControlOptions` object that contains
  1593. * validation functions and a validation trigger.
  1594. *
  1595. * @param asyncValidator A single async validator or array of async validator
  1596. * functions.
  1597. *
  1598. * @usageNotes
  1599. *
  1600. * ### Initialize a control as disabled
  1601. *
  1602. * The following example returns a control with an initial value in a disabled state.
  1603. *
  1604. * <code-example path="forms/ts/formBuilder/form_builder_example.ts"
  1605. * linenums="false" region="disabled-control">
  1606. * </code-example>
  1607. */
  1608. control(formState: any, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormControl;
  1609. /**
  1610. * Constructs a new `FormArray` from the given array of configurations,
  1611. * validators and options.
  1612. *
  1613. * @param controlsConfig An array of child controls or control configs. Each
  1614. * child control is given an index when it is registered.
  1615. *
  1616. * @param validatorOrOpts A synchronous validator function, or an array of
  1617. * such functions, or an `AbstractControlOptions` object that contains
  1618. * validation functions and a validation trigger.
  1619. *
  1620. * @param asyncValidator A single async validator or array of async validator
  1621. * functions.
  1622. */
  1623. array(controlsConfig: any[], validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormArray;
  1624. }
  1625. /**
  1626. * Tracks the value and validation status of an individual form control.
  1627. *
  1628. * This is one of the three fundamental building blocks of Angular forms, along with
  1629. * `FormGroup` and `FormArray`. It extends the `AbstractControl` class that
  1630. * implements most of the base functionality for accessing the value, validation status,
  1631. * user interactions and events.
  1632. *
  1633. * @see `AbstractControl`
  1634. * @see [Reactive Forms Guide](guide/reactive-forms)
  1635. * @see [Usage Notes](#usage-notes)
  1636. *
  1637. * @usageNotes
  1638. *
  1639. * ### Initializing Form Controls
  1640. *
  1641. * Instantiate a `FormControl`, with an initial value.
  1642. *
  1643. * ```ts
  1644. * const control = new FormControl('some value');
  1645. * console.log(control.value); // 'some value'
  1646. *```
  1647. *
  1648. * The following example initializes the control with a form state object. The `value`
  1649. * and `disabled` keys are required in this case.
  1650. *
  1651. * ```ts
  1652. * const control = new FormControl({ value: 'n/a', disabled: true });
  1653. * console.log(control.value); // 'n/a'
  1654. * console.log(control.status); // 'DISABLED'
  1655. * ```
  1656. *
  1657. * The following example initializes the control with a sync validator.
  1658. *
  1659. * ```ts
  1660. * const control = new FormControl('', Validators.required);
  1661. * console.log(control.value); // ''
  1662. * console.log(control.status); // 'INVALID'
  1663. * ```
  1664. *
  1665. * The following example initializes the control using an options object.
  1666. *
  1667. * ```ts
  1668. * const control = new FormControl('', {
  1669. * validators: Validators.required,
  1670. * asyncValidators: myAsyncValidator
  1671. * });
  1672. * ```
  1673. *
  1674. * ### Configure the control to update on a blur event
  1675. *
  1676. * Set the `updateOn` option to `'blur'` to update on the blur `event`.
  1677. *
  1678. * ```ts
  1679. * const control = new FormControl('', { updateOn: 'blur' });
  1680. * ```
  1681. *
  1682. * ### Configure the control to update on a submit event
  1683. *
  1684. * Set the `updateOn` option to `'submit'` to update on a submit `event`.
  1685. *
  1686. * ```ts
  1687. * const control = new FormControl('', { updateOn: 'submit' });
  1688. * ```
  1689. *
  1690. * ### Reset the control back to an initial value
  1691. *
  1692. * You reset to a specific form state by passing through a standalone
  1693. * value or a form state object that contains both a value and a disabled state
  1694. * (these are the only two properties that cannot be calculated).
  1695. *
  1696. * ```ts
  1697. * const control = new FormControl('Nancy');
  1698. *
  1699. * console.log(control.value); // 'Nancy'
  1700. *
  1701. * control.reset('Drew');
  1702. *
  1703. * console.log(control.value); // 'Drew'
  1704. * ```
  1705. *
  1706. * ### Reset the control back to an initial value and disabled
  1707. *
  1708. * ```
  1709. * const control = new FormControl('Nancy');
  1710. *
  1711. * console.log(control.value); // 'Nancy'
  1712. * console.log(control.status); // 'VALID'
  1713. *
  1714. * control.reset({ value: 'Drew', disabled: true });
  1715. *
  1716. * console.log(control.value); // 'Drew'
  1717. * console.log(control.status); // 'DISABLED'
  1718. * ```
  1719. *
  1720. * @publicApi
  1721. */
  1722. export declare class FormControl extends AbstractControl {
  1723. /**
  1724. * Creates a new `FormControl` instance.
  1725. *
  1726. * @param formState Initializes the control with an initial value,
  1727. * or an object that defines the initial value and disabled state.
  1728. *
  1729. * @param validatorOrOpts A synchronous validator function, or an array of
  1730. * such functions, or an `AbstractControlOptions` object that contains validation functions
  1731. * and a validation trigger.
  1732. *
  1733. * @param asyncValidator A single async validator or array of async validator functions
  1734. *
  1735. */
  1736. constructor(formState?: any, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
  1737. /**
  1738. * Sets a new value for the form control.
  1739. *
  1740. * @param value The new value for the control.
  1741. * @param options Configuration options that determine how the control propagates changes
  1742. * and emits events when the value changes.
  1743. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  1744. * updateValueAndValidity} method.
  1745. *
  1746. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
  1747. * false.
  1748. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  1749. * `valueChanges`
  1750. * observables emit events with the latest status and value when the control value is updated.
  1751. * When false, no events are emitted.
  1752. * * `emitModelToViewChange`: When true or not supplied (the default), each change triggers an
  1753. * `onChange` event to
  1754. * update the view.
  1755. * * `emitViewToModelChange`: When true or not supplied (the default), each change triggers an
  1756. * `ngModelChange`
  1757. * event to update the model.
  1758. *
  1759. */
  1760. setValue(value: any, options?: {
  1761. onlySelf?: boolean;
  1762. emitEvent?: boolean;
  1763. emitModelToViewChange?: boolean;
  1764. emitViewToModelChange?: boolean;
  1765. }): void;
  1766. /**
  1767. * Patches the value of a control.
  1768. *
  1769. * This function is functionally the same as {@link FormControl#setValue setValue} at this level.
  1770. * It exists for symmetry with {@link FormGroup#patchValue patchValue} on `FormGroups` and
  1771. * `FormArrays`, where it does behave differently.
  1772. *
  1773. * @see `setValue` for options
  1774. */
  1775. patchValue(value: any, options?: {
  1776. onlySelf?: boolean;
  1777. emitEvent?: boolean;
  1778. emitModelToViewChange?: boolean;
  1779. emitViewToModelChange?: boolean;
  1780. }): void;
  1781. /**
  1782. * Resets the form control, marking it `pristine` and `untouched`, and setting
  1783. * the value to null.
  1784. *
  1785. * @param formState Resets the control with an initial value,
  1786. * or an object that defines the initial value and disabled state.
  1787. *
  1788. * @param options Configuration options that determine how the control propagates changes
  1789. * and emits events after the value changes.
  1790. *
  1791. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
  1792. * false.
  1793. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  1794. * `valueChanges`
  1795. * observables emit events with the latest status and value when the control is reset.
  1796. * When false, no events are emitted.
  1797. *
  1798. */
  1799. reset(formState?: any, options?: {
  1800. onlySelf?: boolean;
  1801. emitEvent?: boolean;
  1802. }): void;
  1803. /**
  1804. * Register a listener for change events.
  1805. *
  1806. * @param fn The method that is called when the value changes
  1807. */
  1808. registerOnChange(fn: Function): void;
  1809. /**
  1810. * Register a listener for disabled events.
  1811. *
  1812. * @param fn The method that is called when the disabled status changes.
  1813. */
  1814. registerOnDisabledChange(fn: (isDisabled: boolean) => void): void;
  1815. private _applyFormState;
  1816. }
  1817. /**
  1818. * @description
  1819. * * Syncs a standalone `FormControl` instance to a form control element.
  1820. *
  1821. * @see [Reactive Forms Guide](guide/reactive-forms)
  1822. * @see `FormControl`
  1823. * @see `AbstractControl`
  1824. *
  1825. * @usageNotes
  1826. *
  1827. * ### Registering a single form control
  1828. *
  1829. * The following examples shows how to register a standalone control and set its value.
  1830. *
  1831. * {@example forms/ts/simpleFormControl/simple_form_control_example.ts region='Component'}
  1832. *
  1833. * ### Use with ngModel
  1834. *
  1835. * Support for using the `ngModel` input property and `ngModelChange` event with reactive
  1836. * form directives has been deprecated in Angular v6 and will be removed in Angular v7.
  1837. *
  1838. * Now deprecated:
  1839. *
  1840. * ```html
  1841. * <input [formControl]="control" [(ngModel)]="value">
  1842. * ```
  1843. *
  1844. * ```ts
  1845. * this.value = 'some value';
  1846. * ```
  1847. *
  1848. * This has been deprecated for a few reasons. First, developers have found this pattern
  1849. * confusing. It seems like the actual `ngModel` directive is being used, but in fact it's
  1850. * an input/output property named `ngModel` on the reactive form directive that simply
  1851. * approximates (some of) its behavior. Specifically, it allows getting/setting the value
  1852. * and intercepting value events. However, some of `ngModel`'s other features - like
  1853. * delaying updates with`ngModelOptions` or exporting the directive - simply don't work,
  1854. * which has understandably caused some confusion.
  1855. *
  1856. * In addition, this pattern mixes template-driven and reactive forms strategies, which
  1857. * we generally don't recommend because it doesn't take advantage of the full benefits of
  1858. * either strategy. Setting the value in the template violates the template-agnostic
  1859. * principles behind reactive forms, whereas adding a `FormControl`/`FormGroup` layer in
  1860. * the class removes the convenience of defining forms in the template.
  1861. *
  1862. * To update your code before v7, you'll want to decide whether to stick with reactive form
  1863. * directives (and get/set values using reactive forms patterns) or switch over to
  1864. * template-driven directives.
  1865. *
  1866. * After (choice 1 - use reactive forms):
  1867. *
  1868. * ```html
  1869. * <input [formControl]="control">
  1870. * ```
  1871. *
  1872. * ```ts
  1873. * this.control.setValue('some value');
  1874. * ```
  1875. *
  1876. * After (choice 2 - use template-driven forms):
  1877. *
  1878. * ```html
  1879. * <input [(ngModel)]="value">
  1880. * ```
  1881. *
  1882. * ```ts
  1883. * this.value = 'some value';
  1884. * ```
  1885. *
  1886. * By default, when you use this pattern, you will see a deprecation warning once in dev
  1887. * mode. You can choose to silence this warning by providing a config for
  1888. * `ReactiveFormsModule` at import time:
  1889. *
  1890. * ```ts
  1891. * imports: [
  1892. * ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
  1893. * ]
  1894. * ```
  1895. *
  1896. * Alternatively, you can choose to surface a separate warning for each instance of this
  1897. * pattern with a config value of `"always"`. This may help to track down where in the code
  1898. * the pattern is being used as the code is being updated.
  1899. *
  1900. * @ngModule ReactiveFormsModule
  1901. * @publicApi
  1902. */
  1903. export declare class FormControlDirective extends NgControl implements OnChanges {
  1904. private _ngModelWarningConfig;
  1905. /**
  1906. * @description
  1907. * Internal reference to the view model value.
  1908. */
  1909. viewModel: any;
  1910. /**
  1911. * @description
  1912. * Tracks the `FormControl` instance bound to the directive.
  1913. */
  1914. form: FormControl;
  1915. /**
  1916. * @description
  1917. * Triggers a warning that this input should not be used with reactive forms.
  1918. */
  1919. isDisabled: boolean;
  1920. /** @deprecated as of v6 */
  1921. model: any;
  1922. /** @deprecated as of v6 */
  1923. update: EventEmitter<{}>;
  1924. constructor(validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
  1925. /**
  1926. * @description
  1927. * A lifecycle method called when the directive's inputs change. For internal use
  1928. * only.
  1929. *
  1930. * @param changes A object of key/value pairs for the set of changed inputs.
  1931. */
  1932. ngOnChanges(changes: SimpleChanges): void;
  1933. /**
  1934. * @description
  1935. * Returns an array that represents the path from the top-level form to this control.
  1936. * Each index is the string name of the control on that level.
  1937. */
  1938. readonly path: string[];
  1939. /**
  1940. * @description
  1941. * Synchronous validator function composed of all the synchronous validators
  1942. * registered with this directive.
  1943. */
  1944. readonly validator: ValidatorFn | null;
  1945. /**
  1946. * @description
  1947. * Async validator function composed of all the async validators registered with this
  1948. * directive.
  1949. */
  1950. readonly asyncValidator: AsyncValidatorFn | null;
  1951. /**
  1952. * @description
  1953. * The `FormControl` bound to this directive.
  1954. */
  1955. readonly control: FormControl;
  1956. /**
  1957. * @description
  1958. * Sets the new value for the view model and emits an `ngModelChange` event.
  1959. *
  1960. * @param newValue The new value for the view model.
  1961. */
  1962. viewToModelUpdate(newValue: any): void;
  1963. private _isControlChanged;
  1964. }
  1965. /**
  1966. * @description
  1967. * Syncs a `FormControl` in an existing `FormGroup` to a form control
  1968. * element by name.
  1969. *
  1970. * @see [Reactive Forms Guide](guide/reactive-forms)
  1971. * @see `FormControl`
  1972. * @see `AbstractControl`
  1973. *
  1974. * @usageNotes
  1975. *
  1976. * ### Register `FormControl` within a group
  1977. *
  1978. * The following example shows how to register multiple form controls within a form group
  1979. * and set their value.
  1980. *
  1981. * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
  1982. *
  1983. * To see `formControlName` examples with different form control types, see:
  1984. *
  1985. * * Radio buttons: `RadioControlValueAccessor`
  1986. * * Selects: `SelectControlValueAccessor`
  1987. *
  1988. * ### Use with ngModel
  1989. *
  1990. * Support for using the `ngModel` input property and `ngModelChange` event with reactive
  1991. * form directives has been deprecated in Angular v6 and will be removed in Angular v7.
  1992. *
  1993. * Now deprecated:
  1994. *
  1995. * ```html
  1996. * <form [formGroup]="form">
  1997. * <input formControlName="first" [(ngModel)]="value">
  1998. * </form>
  1999. * ```
  2000. *
  2001. * ```ts
  2002. * this.value = 'some value';
  2003. * ```
  2004. *
  2005. * This has been deprecated for a few reasons. First, developers have found this pattern
  2006. * confusing. It seems like the actual `ngModel` directive is being used, but in fact it's
  2007. * an input/output property named `ngModel` on the reactive form directive that simply
  2008. * approximates (some of) its behavior. Specifically, it allows getting/setting the value
  2009. * and intercepting value events. However, some of `ngModel`'s other features - like
  2010. * delaying updates with`ngModelOptions` or exporting the directive - simply don't work,
  2011. * which has understandably caused some confusion.
  2012. *
  2013. * In addition, this pattern mixes template-driven and reactive forms strategies, which
  2014. * we generally don't recommend because it doesn't take advantage of the full benefits of
  2015. * either strategy. Setting the value in the template violates the template-agnostic
  2016. * principles behind reactive forms, whereas adding a `FormControl`/`FormGroup` layer in
  2017. * the class removes the convenience of defining forms in the template.
  2018. *
  2019. * To update your code before v7, you'll want to decide whether to stick with reactive form
  2020. * directives (and get/set values using reactive forms patterns) or switch over to
  2021. * template-driven directives.
  2022. *
  2023. * After (choice 1 - use reactive forms):
  2024. *
  2025. * ```html
  2026. * <form [formGroup]="form">
  2027. * <input formControlName="first">
  2028. * </form>
  2029. * ```
  2030. *
  2031. * ```ts
  2032. * this.form.get('first').setValue('some value');
  2033. * ```
  2034. *
  2035. * After (choice 2 - use template-driven forms):
  2036. *
  2037. * ```html
  2038. * <input [(ngModel)]="value">
  2039. * ```
  2040. *
  2041. * ```ts
  2042. * this.value = 'some value';
  2043. * ```
  2044. *
  2045. * By default, when you use this pattern, you will see a deprecation warning once in dev
  2046. * mode. You can choose to silence this warning by providing a config for
  2047. * `ReactiveFormsModule` at import time:
  2048. *
  2049. * ```ts
  2050. * imports: [
  2051. * ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'})
  2052. * ]
  2053. * ```
  2054. *
  2055. * Alternatively, you can choose to surface a separate warning for each instance of this
  2056. * pattern with a config value of `"always"`. This may help to track down where in the code
  2057. * the pattern is being used as the code is being updated.
  2058. *
  2059. * @ngModule ReactiveFormsModule
  2060. * @publicApi
  2061. */
  2062. export declare class FormControlName extends NgControl implements OnChanges, OnDestroy {
  2063. private _ngModelWarningConfig;
  2064. private _added;
  2065. /**
  2066. * @description
  2067. * Tracks the `FormControl` instance bound to the directive.
  2068. */
  2069. readonly control: FormControl;
  2070. /**
  2071. * @description
  2072. * Tracks the name of the `FormControl` bound to the directive. The name corresponds
  2073. * to a key in the parent `FormGroup` or `FormArray`.
  2074. */
  2075. name: string;
  2076. /**
  2077. * @description
  2078. * Triggers a warning that this input should not be used with reactive forms.
  2079. */
  2080. isDisabled: boolean;
  2081. /** @deprecated as of v6 */
  2082. model: any;
  2083. /** @deprecated as of v6 */
  2084. update: EventEmitter<{}>;
  2085. constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[], _ngModelWarningConfig: string | null);
  2086. /**
  2087. * @description
  2088. * A lifecycle method called when the directive's inputs change. For internal use only.
  2089. *
  2090. * @param changes A object of key/value pairs for the set of changed inputs.
  2091. */
  2092. ngOnChanges(changes: SimpleChanges): void;
  2093. /**
  2094. * @description
  2095. * Lifecycle method called before the directive's instance is destroyed. For internal use only.
  2096. */
  2097. ngOnDestroy(): void;
  2098. /**
  2099. * @description
  2100. * Sets the new value for the view model and emits an `ngModelChange` event.
  2101. *
  2102. * @param newValue The new value for the view model.
  2103. */
  2104. viewToModelUpdate(newValue: any): void;
  2105. /**
  2106. * @description
  2107. * Returns an array that represents the path from the top-level form to this control.
  2108. * Each index is the string name of the control on that level.
  2109. */
  2110. readonly path: string[];
  2111. /**
  2112. * @description
  2113. * The top-level directive for this group if present, otherwise null.
  2114. */
  2115. readonly formDirective: any;
  2116. /**
  2117. * @description
  2118. * Synchronous validator function composed of all the synchronous validators
  2119. * registered with this directive.
  2120. */
  2121. readonly validator: ValidatorFn | null;
  2122. /**
  2123. * @description
  2124. * Async validator function composed of all the async validators registered with this
  2125. * directive.
  2126. */
  2127. readonly asyncValidator: AsyncValidatorFn;
  2128. private _checkParentType;
  2129. private _setUpControl;
  2130. }
  2131. /**
  2132. * Tracks the value and validity state of a group of `FormControl` instances.
  2133. *
  2134. * A `FormGroup` aggregates the values of each child `FormControl` into one object,
  2135. * with each control name as the key. It calculates its status by reducing the status values
  2136. * of its children. For example, if one of the controls in a group is invalid, the entire
  2137. * group becomes invalid.
  2138. *
  2139. * `FormGroup` is one of the three fundamental building blocks used to define forms in Angular,
  2140. * along with `FormControl` and `FormArray`.
  2141. *
  2142. * When instantiating a `FormGroup`, pass in a collection of child controls as the first
  2143. * argument. The key for each child registers the name for the control.
  2144. *
  2145. * @usageNotes
  2146. *
  2147. * ### Create a form group with 2 controls
  2148. *
  2149. * ```
  2150. * const form = new FormGroup({
  2151. * first: new FormControl('Nancy', Validators.minLength(2)),
  2152. * last: new FormControl('Drew'),
  2153. * });
  2154. *
  2155. * console.log(form.value); // {first: 'Nancy', last; 'Drew'}
  2156. * console.log(form.status); // 'VALID'
  2157. * ```
  2158. *
  2159. * ### Create a form group with a group-level validator
  2160. *
  2161. * You include group-level validators as the second arg, or group-level async
  2162. * validators as the third arg. These come in handy when you want to perform validation
  2163. * that considers the value of more than one child control.
  2164. *
  2165. * ```
  2166. * const form = new FormGroup({
  2167. * password: new FormControl('', Validators.minLength(2)),
  2168. * passwordConfirm: new FormControl('', Validators.minLength(2)),
  2169. * }, passwordMatchValidator);
  2170. *
  2171. *
  2172. * function passwordMatchValidator(g: FormGroup) {
  2173. * return g.get('password').value === g.get('passwordConfirm').value
  2174. * ? null : {'mismatch': true};
  2175. * }
  2176. * ```
  2177. *
  2178. * Like `FormControl` instances, you choose to pass in
  2179. * validators and async validators as part of an options object.
  2180. *
  2181. * ```
  2182. * const form = new FormGroup({
  2183. * password: new FormControl('')
  2184. * passwordConfirm: new FormControl('')
  2185. * }, { validators: passwordMatchValidator, asyncValidators: otherValidator });
  2186. * ```
  2187. *
  2188. * ### Set the updateOn property for all controls in a form group
  2189. *
  2190. * The options object is used to set a default value for each child
  2191. * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
  2192. * group level, all child controls default to 'blur', unless the child
  2193. * has explicitly specified a different `updateOn` value.
  2194. *
  2195. * ```ts
  2196. * const c = new FormGroup({
  2197. * one: new FormControl()
  2198. * }, { updateOn: 'blur' });
  2199. * ```
  2200. *
  2201. * @publicApi
  2202. */
  2203. export declare class FormGroup extends AbstractControl {
  2204. controls: {
  2205. [key: string]: AbstractControl;
  2206. };
  2207. /**
  2208. * Creates a new `FormGroup` instance.
  2209. *
  2210. * @param controls A collection of child controls. The key for each child is the name
  2211. * under which it is registered.
  2212. *
  2213. * @param validatorOrOpts A synchronous validator function, or an array of
  2214. * such functions, or an `AbstractControlOptions` object that contains validation functions
  2215. * and a validation trigger.
  2216. *
  2217. * @param asyncValidator A single async validator or array of async validator functions
  2218. *
  2219. */
  2220. constructor(controls: {
  2221. [key: string]: AbstractControl;
  2222. }, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
  2223. /**
  2224. * Registers a control with the group's list of controls.
  2225. *
  2226. * This method does not update the value or validity of the control.
  2227. * Use {@link FormGroup#addControl addControl} instead.
  2228. *
  2229. * @param name The control name to register in the collection
  2230. * @param control Provides the control for the given name
  2231. */
  2232. registerControl(name: string, control: AbstractControl): AbstractControl;
  2233. /**
  2234. * Add a control to this group.
  2235. *
  2236. * This method also updates the value and validity of the control.
  2237. *
  2238. * @param name The control name to add to the collection
  2239. * @param control Provides the control for the given name
  2240. */
  2241. addControl(name: string, control: AbstractControl): void;
  2242. /**
  2243. * Remove a control from this group.
  2244. *
  2245. * @param name The control name to remove from the collection
  2246. */
  2247. removeControl(name: string): void;
  2248. /**
  2249. * Replace an existing control.
  2250. *
  2251. * @param name The control name to replace in the collection
  2252. * @param control Provides the control for the given name
  2253. */
  2254. setControl(name: string, control: AbstractControl): void;
  2255. /**
  2256. * Check whether there is an enabled control with the given name in the group.
  2257. *
  2258. * Reports false for disabled controls. If you'd like to check for existence in the group
  2259. * only, use {@link AbstractControl#get get} instead.
  2260. *
  2261. * @param name The control name to check for existence in the collection
  2262. *
  2263. * @returns false for disabled controls, true otherwise.
  2264. */
  2265. contains(controlName: string): boolean;
  2266. /**
  2267. * Sets the value of the `FormGroup`. It accepts an object that matches
  2268. * the structure of the group, with control names as keys.
  2269. *
  2270. * @usageNotes
  2271. * ### Set the complete value for the form group
  2272. *
  2273. * ```
  2274. * const form = new FormGroup({
  2275. * first: new FormControl(),
  2276. * last: new FormControl()
  2277. * });
  2278. *
  2279. * console.log(form.value); // {first: null, last: null}
  2280. *
  2281. * form.setValue({first: 'Nancy', last: 'Drew'});
  2282. * console.log(form.value); // {first: 'Nancy', last: 'Drew'}
  2283. * ```
  2284. *
  2285. * @throws When strict checks fail, such as setting the value of a control
  2286. * that doesn't exist or if you excluding the value of a control.
  2287. *
  2288. * @param value The new value for the control that matches the structure of the group.
  2289. * @param options Configuration options that determine how the control propagates changes
  2290. * and emits events after the value changes.
  2291. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  2292. * updateValueAndValidity} method.
  2293. *
  2294. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
  2295. * false.
  2296. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  2297. * `valueChanges`
  2298. * observables emit events with the latest status and value when the control value is updated.
  2299. * When false, no events are emitted.
  2300. */
  2301. setValue(value: {
  2302. [key: string]: any;
  2303. }, options?: {
  2304. onlySelf?: boolean;
  2305. emitEvent?: boolean;
  2306. }): void;
  2307. /**
  2308. * Patches the value of the `FormGroup`. It accepts an object with control
  2309. * names as keys, and does its best to match the values to the correct controls
  2310. * in the group.
  2311. *
  2312. * It accepts both super-sets and sub-sets of the group without throwing an error.
  2313. *
  2314. * @usageNotes
  2315. * ### Patch the value for a form group
  2316. *
  2317. * ```
  2318. * const form = new FormGroup({
  2319. * first: new FormControl(),
  2320. * last: new FormControl()
  2321. * });
  2322. * console.log(form.value); // {first: null, last: null}
  2323. *
  2324. * form.patchValue({first: 'Nancy'});
  2325. * console.log(form.value); // {first: 'Nancy', last: null}
  2326. * ```
  2327. *
  2328. * @param value The object that matches the structure of the group.
  2329. * @param options Configuration options that determine how the control propagates changes and
  2330. * emits events after the value is patched.
  2331. * * `onlySelf`: When true, each change only affects this control and not its parent. Default is
  2332. * true.
  2333. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  2334. * `valueChanges`
  2335. * observables emit events with the latest status and value when the control value is updated.
  2336. * When false, no events are emitted.
  2337. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  2338. * updateValueAndValidity} method.
  2339. */
  2340. patchValue(value: {
  2341. [key: string]: any;
  2342. }, options?: {
  2343. onlySelf?: boolean;
  2344. emitEvent?: boolean;
  2345. }): void;
  2346. /**
  2347. * Resets the `FormGroup`, marks all descendants are marked `pristine` and `untouched`, and
  2348. * the value of all descendants to null.
  2349. *
  2350. * You reset to a specific form state by passing in a map of states
  2351. * that matches the structure of your form, with control names as keys. The state
  2352. * is a standalone value or a form state object with both a value and a disabled
  2353. * status.
  2354. *
  2355. * @param formState Resets the control with an initial value,
  2356. * or an object that defines the initial value and disabled state.
  2357. *
  2358. * @param options Configuration options that determine how the control propagates changes
  2359. * and emits events when the group is reset.
  2360. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
  2361. * false.
  2362. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  2363. * `valueChanges`
  2364. * observables emit events with the latest status and value when the control is reset.
  2365. * When false, no events are emitted.
  2366. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  2367. * updateValueAndValidity} method.
  2368. *
  2369. * @usageNotes
  2370. *
  2371. * ### Reset the form group values
  2372. *
  2373. * ```ts
  2374. * const form = new FormGroup({
  2375. * first: new FormControl('first name'),
  2376. * last: new FormControl('last name')
  2377. * });
  2378. *
  2379. * console.log(form.value); // {first: 'first name', last: 'last name'}
  2380. *
  2381. * form.reset({ first: 'name', last: 'last name' });
  2382. *
  2383. * console.log(form.value); // {first: 'name', last: 'last name'}
  2384. * ```
  2385. *
  2386. * ### Reset the form group values and disabled status
  2387. *
  2388. * ```
  2389. * const form = new FormGroup({
  2390. * first: new FormControl('first name'),
  2391. * last: new FormControl('last name')
  2392. * });
  2393. *
  2394. * form.reset({
  2395. * first: {value: 'name', disabled: true},
  2396. * last: 'last'
  2397. * });
  2398. *
  2399. * console.log(this.form.value); // {first: 'name', last: 'last name'}
  2400. * console.log(this.form.get('first').status); // 'DISABLED'
  2401. * ```
  2402. */
  2403. reset(value?: any, options?: {
  2404. onlySelf?: boolean;
  2405. emitEvent?: boolean;
  2406. }): void;
  2407. /**
  2408. * The aggregate value of the `FormGroup`, including any disabled controls.
  2409. *
  2410. * Retrieves all values regardless of disabled status.
  2411. * The `value` property is the best way to get the value of the group, because
  2412. * it excludes disabled controls in the `FormGroup`.
  2413. */
  2414. getRawValue(): any;
  2415. }
  2416. /**
  2417. * @description
  2418. *
  2419. * Binds an existing `FormGroup` to a DOM element.
  2420. *
  2421. * This directive accepts an existing `FormGroup` instance. It will then use this
  2422. * `FormGroup` instance to match any child `FormControl`, `FormGroup`,
  2423. * and `FormArray` instances to child `FormControlName`, `FormGroupName`,
  2424. * and `FormArrayName` directives.
  2425. *
  2426. * @see [Reactive Forms Guide](guide/reactive-forms)
  2427. * @see `AbstractControl`
  2428. *
  2429. * ### Register Form Group
  2430. *
  2431. * The following example registers a `FormGroup` with first name and last name controls,
  2432. * and listens for the *ngSubmit* event when the button is clicked.
  2433. *
  2434. * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
  2435. *
  2436. * @ngModule ReactiveFormsModule
  2437. * @publicApi
  2438. */
  2439. export declare class FormGroupDirective extends ControlContainer implements Form, OnChanges {
  2440. private _validators;
  2441. private _asyncValidators;
  2442. /**
  2443. * @description
  2444. * Reports whether the form submission has been triggered.
  2445. */
  2446. readonly submitted: boolean;
  2447. private _oldForm;
  2448. /**
  2449. * @description
  2450. * Tracks the list of added `FormControlName` instances
  2451. */
  2452. directives: FormControlName[];
  2453. /**
  2454. * @description
  2455. * Tracks the `FormGroup` bound to this directive.
  2456. */
  2457. form: FormGroup;
  2458. /**
  2459. * @description
  2460. * Emits an event when the form submission has been triggered.
  2461. */
  2462. ngSubmit: EventEmitter<{}>;
  2463. constructor(_validators: any[], _asyncValidators: any[]);
  2464. /**
  2465. * @description
  2466. * A lifecycle method called when the directive's inputs change. For internal use only.
  2467. *
  2468. * @param changes A object of key/value pairs for the set of changed inputs.
  2469. */
  2470. ngOnChanges(changes: SimpleChanges): void;
  2471. /**
  2472. * @description
  2473. * Returns this directive's instance.
  2474. */
  2475. readonly formDirective: Form;
  2476. /**
  2477. * @description
  2478. * Returns the `FormGroup` bound to this directive.
  2479. */
  2480. readonly control: FormGroup;
  2481. /**
  2482. * @description
  2483. * Returns an array representing the path to this group. Because this directive
  2484. * always lives at the top level of a form, it always an empty array.
  2485. */
  2486. readonly path: string[];
  2487. /**
  2488. * @description
  2489. * Method that sets up the control directive in this group, re-calculates its value
  2490. * and validity, and adds the instance to the internal list of directives.
  2491. *
  2492. * @param dir The `FormControlName` directive instance.
  2493. */
  2494. addControl(dir: FormControlName): FormControl;
  2495. /**
  2496. * @description
  2497. * Retrieves the `FormControl` instance from the provided `FormControlName` directive
  2498. *
  2499. * @param dir The `FormControlName` directive instance.
  2500. */
  2501. getControl(dir: FormControlName): FormControl;
  2502. /**
  2503. * @description
  2504. * Removes the `FormControlName` instance from the internal list of directives
  2505. *
  2506. * @param dir The `FormControlName` directive instance.
  2507. */
  2508. removeControl(dir: FormControlName): void;
  2509. /**
  2510. * Adds a new `FormGroupName` directive instance to the form.
  2511. *
  2512. * @param dir The `FormGroupName` directive instance.
  2513. */
  2514. addFormGroup(dir: FormGroupName): void;
  2515. /**
  2516. * No-op method to remove the form group.
  2517. *
  2518. * @param dir The `FormGroupName` directive instance.
  2519. */
  2520. removeFormGroup(dir: FormGroupName): void;
  2521. /**
  2522. * @description
  2523. * Retrieves the `FormGroup` for a provided `FormGroupName` directive instance
  2524. *
  2525. * @param dir The `FormGroupName` directive instance.
  2526. */
  2527. getFormGroup(dir: FormGroupName): FormGroup;
  2528. /**
  2529. * Adds a new `FormArrayName` directive instance to the form.
  2530. *
  2531. * @param dir The `FormArrayName` directive instance.
  2532. */
  2533. addFormArray(dir: FormArrayName): void;
  2534. /**
  2535. * No-op method to remove the form array.
  2536. *
  2537. * @param dir The `FormArrayName` directive instance.
  2538. */
  2539. removeFormArray(dir: FormArrayName): void;
  2540. /**
  2541. * @description
  2542. * Retrieves the `FormArray` for a provided `FormArrayName` directive instance.
  2543. *
  2544. * @param dir The `FormArrayName` directive instance.
  2545. */
  2546. getFormArray(dir: FormArrayName): FormArray;
  2547. /**
  2548. * Sets the new value for the provided `FormControlName` directive.
  2549. *
  2550. * @param dir The `FormControlName` directive instance.
  2551. * @param value The new value for the directive's control.
  2552. */
  2553. updateModel(dir: FormControlName, value: any): void;
  2554. /**
  2555. * @description
  2556. * Method called with the "submit" event is triggered on the form.
  2557. * Triggers the `ngSubmit` emitter to emit the "submit" event as its payload.
  2558. *
  2559. * @param $event The "submit" event object
  2560. */
  2561. onSubmit($event: Event): boolean;
  2562. /**
  2563. * @description
  2564. * Method called when the "reset" event is triggered on the form.
  2565. */
  2566. onReset(): void;
  2567. /**
  2568. * @description
  2569. * Resets the form to an initial value and resets its submitted status.
  2570. *
  2571. * @param value The new value for the form.
  2572. */
  2573. resetForm(value?: any): void;
  2574. private _updateRegistrations;
  2575. private _updateValidators;
  2576. private _checkFormPresent;
  2577. }
  2578. /**
  2579. * @description
  2580. *
  2581. * Syncs a nested `FormGroup` to a DOM element.
  2582. *
  2583. * This directive can only be used with a parent `FormGroupDirective`.
  2584. *
  2585. * It accepts the string name of the nested `FormGroup` to link, and
  2586. * looks for a `FormGroup` registered with that name in the parent
  2587. * `FormGroup` instance you passed into `FormGroupDirective`.
  2588. *
  2589. * Use nested form groups to validate a sub-group of a
  2590. * form separately from the rest or to group the values of certain
  2591. * controls into their own nested object.
  2592. *
  2593. * @see [Reactive Forms Guide](guide/reactive-forms)
  2594. *
  2595. * @usageNotes
  2596. *
  2597. * ### Access the group by name
  2598. *
  2599. * The following example uses the {@link AbstractControl#get get} method to access the
  2600. * associated `FormGroup`
  2601. *
  2602. * ```ts
  2603. * this.form.get('name');
  2604. * ```
  2605. *
  2606. * ### Access individual controls in the group
  2607. *
  2608. * The following example uses the {@link AbstractControl#get get} method to access
  2609. * individual controls within the group using dot syntax.
  2610. *
  2611. * ```ts
  2612. * this.form.get('name.first');
  2613. * ```
  2614. *
  2615. * ### Register a nested `FormGroup`.
  2616. *
  2617. * The following example registers a nested *name* `FormGroup` within an existing `FormGroup`,
  2618. * and provides methods to retrieve the nested `FormGroup` and individual controls.
  2619. *
  2620. * {@example forms/ts/nestedFormGroup/nested_form_group_example.ts region='Component'}
  2621. *
  2622. * @ngModule ReactiveFormsModule
  2623. * @publicApi
  2624. */
  2625. export declare class FormGroupName extends AbstractFormGroupDirective implements OnInit, OnDestroy {
  2626. /**
  2627. * @description
  2628. * Tracks the name of the `FormGroup` bound to the directive. The name corresponds
  2629. * to a key in the parent `FormGroup` or `FormArray`.
  2630. */
  2631. name: string;
  2632. constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
  2633. }
  2634. declare type FormHooks = 'change' | 'blur' | 'submit';
  2635. /**
  2636. * Exports the required providers and directives for template-driven forms,
  2637. * making them available for import by NgModules that import this module.
  2638. *
  2639. * @see [Forms Guide](/guide/forms)
  2640. *
  2641. * @publicApi
  2642. */
  2643. export declare class FormsModule {
  2644. /**
  2645. * @description
  2646. * Provides options for configuring the template-driven forms module.
  2647. *
  2648. * @param opts An object of configuration options
  2649. * * `warnOnDeprecatedNgFormSelector` Configures when to emit a warning when the deprecated
  2650. * `ngForm` selector is used.
  2651. */
  2652. static withConfig(opts: {
  2653. /** @deprecated as of v6 */ warnOnDeprecatedNgFormSelector?: 'never' | 'once' | 'always';
  2654. }): ModuleWithProviders<FormsModule>;
  2655. }
  2656. /**
  2657. * A directive that adds max length validation to controls marked with the
  2658. * `maxlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
  2659. *
  2660. * @see [Form Validation](guide/form-validation)
  2661. *
  2662. * @usageNotes
  2663. *
  2664. * ### Adding a maximum length validator
  2665. *
  2666. * The following example shows how to add a maximum length validator to an input attached to an
  2667. * ngModel binding.
  2668. *
  2669. * ```html
  2670. * <input name="firstName" ngModel maxlength="25">
  2671. * ```
  2672. *
  2673. * @ngModule ReactiveFormsModule
  2674. * @ngModule FormsModule
  2675. * @publicApi
  2676. */
  2677. export declare class MaxLengthValidator implements Validator, OnChanges {
  2678. private _validator;
  2679. private _onChange;
  2680. /**
  2681. * @description
  2682. * Tracks changes to the the maximum length bound to this directive.
  2683. */
  2684. maxlength: string;
  2685. /**
  2686. * @description
  2687. * A lifecycle method called when the directive's inputs change. For internal use
  2688. * only.
  2689. *
  2690. * @param changes A object of key/value pairs for the set of changed inputs.
  2691. */
  2692. ngOnChanges(changes: SimpleChanges): void;
  2693. /**
  2694. * @description
  2695. * Method that validates whether the value exceeds
  2696. * the maximum length requirement.
  2697. */
  2698. validate(control: AbstractControl): ValidationErrors | null;
  2699. /**
  2700. * @description
  2701. * Registers a callback function to call when the validator inputs change.
  2702. *
  2703. * @param fn The callback function
  2704. */
  2705. registerOnValidatorChange(fn: () => void): void;
  2706. private _createValidator;
  2707. }
  2708. /**
  2709. * A directive that adds minimum length validation to controls marked with the
  2710. * `minlength` attribute. The directive is provided with the `NG_VALIDATORS` mult-provider list.
  2711. *
  2712. * @see [Form Validation](guide/form-validation)
  2713. *
  2714. * @usageNotes
  2715. *
  2716. * ### Adding a minimum length validator
  2717. *
  2718. * The following example shows how to add a minimum length validator to an input attached to an
  2719. * ngModel binding.
  2720. *
  2721. * ```html
  2722. * <input name="firstName" ngModel minlength="4">
  2723. * ```
  2724. *
  2725. * @ngModule ReactiveFormsModule
  2726. * @ngModule FormsModule
  2727. * @publicApi
  2728. */
  2729. export declare class MinLengthValidator implements Validator, OnChanges {
  2730. private _validator;
  2731. private _onChange;
  2732. /**
  2733. * @description
  2734. * Tracks changes to the the minimum length bound to this directive.
  2735. */
  2736. minlength: string;
  2737. /**
  2738. * @description
  2739. * A lifecycle method called when the directive's inputs change. For internal use
  2740. * only.
  2741. *
  2742. * @param changes A object of key/value pairs for the set of changed inputs.
  2743. */
  2744. ngOnChanges(changes: SimpleChanges): void;
  2745. /**
  2746. * @description
  2747. * Method that validates whether the value meets a minimum length
  2748. * requirement. Returns the validation result if enabled, otherwise null.
  2749. */
  2750. validate(control: AbstractControl): ValidationErrors | null;
  2751. /**
  2752. * @description
  2753. * Registers a callback function to call when the validator inputs change.
  2754. *
  2755. * @param fn The callback function
  2756. */
  2757. registerOnValidatorChange(fn: () => void): void;
  2758. private _createValidator;
  2759. }
  2760. /**
  2761. * @description
  2762. * An `InjectionToken` for registering additional asynchronous validators used with `AbstractControl`s.
  2763. *
  2764. * @see `NG_VALIDATORS`
  2765. *
  2766. * @publicApi
  2767. */
  2768. export declare const NG_ASYNC_VALIDATORS: InjectionToken<(Function | Validator)[]>;
  2769. /**
  2770. * @description
  2771. * An `InjectionToken` for registering additional synchronous validators used with `AbstractControl`s.
  2772. *
  2773. * @see `NG_ASYNC_VALIDATORS`
  2774. *
  2775. * @usageNotes
  2776. *
  2777. * ### Providing a custom validator
  2778. *
  2779. * The following example registers a custom validator directive. Adding the validator to the
  2780. * existing collection of validators requires the `multi: true` option.
  2781. *
  2782. * ```typescript
  2783. * @Directive({
  2784. * selector: '[customValidator]',
  2785. * providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
  2786. * })
  2787. * class CustomValidatorDirective implements Validator {
  2788. * validate(control: AbstractControl): ValidationErrors | null {
  2789. * return { 'custom': true };
  2790. * }
  2791. * }
  2792. * ```
  2793. *
  2794. * @publicApi
  2795. */
  2796. export declare const NG_VALIDATORS: InjectionToken<(Function | Validator)[]>;
  2797. /**
  2798. * Used to provide a `ControlValueAccessor` for form controls.
  2799. *
  2800. * See `DefaultValueAccessor` for how to implement one.
  2801. *
  2802. * @publicApi
  2803. */
  2804. export declare const NG_VALUE_ACCESSOR: InjectionToken<ControlValueAccessor>;
  2805. /**
  2806. * @description
  2807. * A base class that all control `FormControl`-based directives extend. It binds a `FormControl`
  2808. * object to a DOM element.
  2809. *
  2810. * @publicApi
  2811. */
  2812. export declare abstract class NgControl extends AbstractControlDirective {
  2813. /**
  2814. * @description
  2815. * The name for the control
  2816. */
  2817. name: string | null;
  2818. /**
  2819. * @description
  2820. * The value accessor for the control
  2821. */
  2822. valueAccessor: ControlValueAccessor | null;
  2823. /**
  2824. * @description
  2825. * The registered synchronous validator function for the control
  2826. *
  2827. * @throws An exception that this method is not implemented
  2828. */
  2829. readonly validator: ValidatorFn | null;
  2830. /**
  2831. * @description
  2832. * The registered async validator function for the control
  2833. *
  2834. * @throws An exception that this method is not implemented
  2835. */
  2836. readonly asyncValidator: AsyncValidatorFn | null;
  2837. /**
  2838. * @description
  2839. * The callback method to update the model from the view when requested
  2840. *
  2841. * @param newValue The new value for the view
  2842. */
  2843. abstract viewToModelUpdate(newValue: any): void;
  2844. }
  2845. /**
  2846. * @description
  2847. * Directive automatically applied to Angular form controls that sets CSS classes
  2848. * based on control status.
  2849. *
  2850. * @usageNotes
  2851. *
  2852. * ### CSS classes applied
  2853. *
  2854. * The following classes are applied as the properties become true:
  2855. *
  2856. * * ng-valid
  2857. * * ng-invalid
  2858. * * ng-pending
  2859. * * ng-pristine
  2860. * * ng-dirty
  2861. * * ng-untouched
  2862. * * ng-touched
  2863. *
  2864. * @ngModule ReactiveFormsModule
  2865. * @ngModule FormsModule
  2866. * @publicApi
  2867. */
  2868. export declare class NgControlStatus extends ɵangular_packages_forms_forms_g {
  2869. constructor(cd: NgControl);
  2870. }
  2871. /**
  2872. * @description
  2873. * Directive automatically applied to Angular form groups that sets CSS classes
  2874. * based on control status (valid/invalid/dirty/etc).
  2875. *
  2876. * @see `NgControlStatus`
  2877. *
  2878. * @ngModule ReactiveFormsModule
  2879. * @ngModule FormsModule
  2880. * @publicApi
  2881. */
  2882. export declare class NgControlStatusGroup extends ɵangular_packages_forms_forms_g {
  2883. constructor(cd: ControlContainer);
  2884. }
  2885. /**
  2886. * @description
  2887. * Creates a top-level `FormGroup` instance and binds it to a form
  2888. * to track aggregate form value and validation status.
  2889. *
  2890. * As soon as you import the `FormsModule`, this directive becomes active by default on
  2891. * all `<form>` tags. You don't need to add a special selector.
  2892. *
  2893. * You optionally export the directive into a local template variable using `ngForm` as the key
  2894. * (ex: `#myForm="ngForm"`). This is optional, but useful. Many properties from the underlying
  2895. * `FormGroup` instance are duplicated on the directive itself, so a reference to it
  2896. * gives you access to the aggregate value and validity status of the form, as well as
  2897. * user interaction properties like `dirty` and `touched`.
  2898. *
  2899. * To register child controls with the form, use `NgModel` with a `name`
  2900. * attribute. You may use `NgModelGroup` to create sub-groups within the form.
  2901. *
  2902. * If necessary, listen to the directive's `ngSubmit` event to be notified when the user has
  2903. * triggered a form submission. The `ngSubmit` event emits the original form
  2904. * submission event.
  2905. *
  2906. * In template driven forms, all `<form>` tags are automatically tagged as `NgForm`.
  2907. * To import the `FormsModule` but skip its usage in some forms,
  2908. * for example, to use native HTML5 validation, add the `ngNoForm` and the `<form>`
  2909. * tags won't create an `NgForm` directive. In reactive forms, using `ngNoForm` is
  2910. * unnecessary because the `<form>` tags are inert. In that case, you would
  2911. * refrain from using the `formGroup` directive.
  2912. *
  2913. * @usageNotes
  2914. *
  2915. * ### Migrating from deprecated ngForm selector
  2916. *
  2917. * Support for using `ngForm` element selector has been deprecated in Angular v6 and will be removed
  2918. * in Angular v9.
  2919. *
  2920. * This has been deprecated to keep selectors consistent with other core Angular selectors,
  2921. * as element selectors are typically written in kebab-case.
  2922. *
  2923. * Now deprecated:
  2924. * ```html
  2925. * <ngForm #myForm="ngForm">
  2926. * ```
  2927. *
  2928. * After:
  2929. * ```html
  2930. * <ng-form #myForm="ngForm">
  2931. * ```
  2932. *
  2933. * ### Listening for form submission
  2934. *
  2935. * The following example shows how to capture the form values from the "ngSubmit" event.
  2936. *
  2937. * {@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
  2938. *
  2939. * ### Setting the update options
  2940. *
  2941. * The following example shows you how to change the "updateOn" option from its default using
  2942. * ngFormOptions.
  2943. *
  2944. * ```html
  2945. * <form [ngFormOptions]="{updateOn: 'blur'}">
  2946. * <input name="one" ngModel> <!-- this ngModel will update on blur -->
  2947. * </form>
  2948. * ```
  2949. *
  2950. * @ngModule FormsModule
  2951. * @publicApi
  2952. */
  2953. export declare class NgForm extends ControlContainer implements Form, AfterViewInit {
  2954. /**
  2955. * @description
  2956. * Returns whether the form submission has been triggered.
  2957. */
  2958. readonly submitted: boolean;
  2959. private _directives;
  2960. /**
  2961. * @description
  2962. * The `FormGroup` instance created for this form.
  2963. */
  2964. form: FormGroup;
  2965. /**
  2966. * @description
  2967. * Event emitter for the "ngSubmit" event
  2968. */
  2969. ngSubmit: EventEmitter<{}>;
  2970. /**
  2971. * @description
  2972. * Tracks options for the `NgForm` instance.
  2973. *
  2974. * **updateOn**: Sets the default `updateOn` value for all child `NgModels` below it
  2975. * unless explicitly set by a child `NgModel` using `ngModelOptions`). Defaults to 'change'.
  2976. * Possible values: `'change'` | `'blur'` | `'submit'`.
  2977. *
  2978. */
  2979. options: {
  2980. updateOn?: FormHooks;
  2981. };
  2982. constructor(validators: any[], asyncValidators: any[]);
  2983. /**
  2984. * @description
  2985. * Lifecycle method called after the view is initialized. For internal use only.
  2986. */
  2987. ngAfterViewInit(): void;
  2988. /**
  2989. * @description
  2990. * The directive instance.
  2991. */
  2992. readonly formDirective: Form;
  2993. /**
  2994. * @description
  2995. * The internal `FormGroup` instance.
  2996. */
  2997. readonly control: FormGroup;
  2998. /**
  2999. * @description
  3000. * Returns an array representing the path to this group. Because this directive
  3001. * always lives at the top level of a form, it is always an empty array.
  3002. */
  3003. readonly path: string[];
  3004. /**
  3005. * @description
  3006. * Returns a map of the controls in this group.
  3007. */
  3008. readonly controls: {
  3009. [key: string]: AbstractControl;
  3010. };
  3011. /**
  3012. * @description
  3013. * Method that sets up the control directive in this group, re-calculates its value
  3014. * and validity, and adds the instance to the internal list of directives.
  3015. *
  3016. * @param dir The `NgModel` directive instance.
  3017. */
  3018. addControl(dir: NgModel): void;
  3019. /**
  3020. * @description
  3021. * Retrieves the `FormControl` instance from the provided `NgModel` directive.
  3022. *
  3023. * @param dir The `NgModel` directive instance.
  3024. */
  3025. getControl(dir: NgModel): FormControl;
  3026. /**
  3027. * @description
  3028. * Removes the `NgModel` instance from the internal list of directives
  3029. *
  3030. * @param dir The `NgModel` directive instance.
  3031. */
  3032. removeControl(dir: NgModel): void;
  3033. /**
  3034. * @description
  3035. * Adds a new `NgModelGroup` directive instance to the form.
  3036. *
  3037. * @param dir The `NgModelGroup` directive instance.
  3038. */
  3039. addFormGroup(dir: NgModelGroup): void;
  3040. /**
  3041. * @description
  3042. * Removes the `NgModelGroup` directive instance from the form.
  3043. *
  3044. * @param dir The `NgModelGroup` directive instance.
  3045. */
  3046. removeFormGroup(dir: NgModelGroup): void;
  3047. /**
  3048. * @description
  3049. * Retrieves the `FormGroup` for a provided `NgModelGroup` directive instance
  3050. *
  3051. * @param dir The `NgModelGroup` directive instance.
  3052. */
  3053. getFormGroup(dir: NgModelGroup): FormGroup;
  3054. /**
  3055. * Sets the new value for the provided `NgControl` directive.
  3056. *
  3057. * @param dir The `NgControl` directive instance.
  3058. * @param value The new value for the directive's control.
  3059. */
  3060. updateModel(dir: NgControl, value: any): void;
  3061. /**
  3062. * @description
  3063. * Sets the value for this `FormGroup`.
  3064. *
  3065. * @param value The new value
  3066. */
  3067. setValue(value: {
  3068. [key: string]: any;
  3069. }): void;
  3070. /**
  3071. * @description
  3072. * Method called when the "submit" event is triggered on the form.
  3073. * Triggers the `ngSubmit` emitter to emit the "submit" event as its payload.
  3074. *
  3075. * @param $event The "submit" event object
  3076. */
  3077. onSubmit($event: Event): boolean;
  3078. /**
  3079. * @description
  3080. * Method called when the "reset" event is triggered on the form.
  3081. */
  3082. onReset(): void;
  3083. /**
  3084. * @description
  3085. * Resets the form to an initial value and resets its submitted status.
  3086. *
  3087. * @param value The new value for the form.
  3088. */
  3089. resetForm(value?: any): void;
  3090. private _setUpdateStrategy;
  3091. }
  3092. /**
  3093. * This directive is solely used to display warnings when the deprecated `ngForm` selector is used.
  3094. *
  3095. * @deprecated in Angular v6 and will be removed in Angular v9.
  3096. * @ngModule FormsModule
  3097. * @publicApi
  3098. */
  3099. export declare class NgFormSelectorWarning {
  3100. constructor(ngFormWarning: string | null);
  3101. }
  3102. /**
  3103. * @description
  3104. * Creates a `FormControl` instance from a domain model and binds it
  3105. * to a form control element.
  3106. *
  3107. * The `FormControl` instance tracks the value, user interaction, and
  3108. * validation status of the control and keeps the view synced with the model. If used
  3109. * within a parent form, the directive also registers itself with the form as a child
  3110. * control.
  3111. *
  3112. * This directive is used by itself or as part of a larger form. Use the
  3113. * `ngModel` selector to activate it.
  3114. *
  3115. * It accepts a domain model as an optional `Input`. If you have a one-way binding
  3116. * to `ngModel` with `[]` syntax, changing the value of the domain model in the component
  3117. * class sets the value in the view. If you have a two-way binding with `[()]` syntax
  3118. * (also known as 'banana-box syntax'), the value in the UI always syncs back to
  3119. * the domain model in your class.
  3120. *
  3121. * To inspect the properties of the associated `FormControl` (like validity state),
  3122. * export the directive into a local template variable using `ngModel` as the key (ex: `#myVar="ngModel"`).
  3123. * You then access the control using the directive's `control` property,
  3124. * but most properties used (like `valid` and `dirty`) fall through to the control anyway for direct access.
  3125. * See a full list of properties directly available in `AbstractControlDirective`.
  3126. *
  3127. * @see `RadioControlValueAccessor`
  3128. * @see `SelectControlValueAccessor`
  3129. *
  3130. * @usageNotes
  3131. *
  3132. * ### Using ngModel on a standalone control
  3133. *
  3134. * The following examples show a simple standalone control using `ngModel`:
  3135. *
  3136. * {@example forms/ts/simpleNgModel/simple_ng_model_example.ts region='Component'}
  3137. *
  3138. * When using the `ngModel` within `<form>` tags, you'll also need to supply a `name` attribute
  3139. * so that the control can be registered with the parent form under that name.
  3140. *
  3141. * In the context of a parent form, it's often unnecessary to include one-way or two-way binding,
  3142. * as the parent form syncs the value for you. You access its properties by exporting it into a
  3143. * local template variable using `ngForm` such as (`#f="ngForm"`). Use the variable where
  3144. * needed on form submission.
  3145. *
  3146. * If you do need to populate initial values into your form, using a one-way binding for
  3147. * `ngModel` tends to be sufficient as long as you use the exported form's value rather
  3148. * than the domain model's value on submit.
  3149. *
  3150. * ### Using ngModel within a form
  3151. *
  3152. * The following example shows controls using `ngModel` within a form:
  3153. *
  3154. * {@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
  3155. *
  3156. * ### Using a standalone ngModel within a group
  3157. *
  3158. * The following example shows you how to use a standalone ngModel control
  3159. * within a form. This controls the display of the form, but doesn't contain form data.
  3160. *
  3161. * ```html
  3162. * <form>
  3163. * <input name="login" ngModel placeholder="Login">
  3164. * <input type="checkbox" ngModel [ngModelOptions]="{standalone: true}"> Show more options?
  3165. * </form>
  3166. * <!-- form value: {login: ''} -->
  3167. * ```
  3168. *
  3169. * ### Setting the ngModel name attribute through options
  3170. *
  3171. * The following example shows you an alternate way to set the name attribute. The name attribute is used
  3172. * within a custom form component, and the name `@Input` property serves a different purpose.
  3173. *
  3174. * ```html
  3175. * <form>
  3176. * <my-person-control name="Nancy" ngModel [ngModelOptions]="{name: 'user'}">
  3177. * </my-person-control>
  3178. * </form>
  3179. * <!-- form value: {user: ''} -->
  3180. * ```
  3181. *
  3182. * @ngModule FormsModule
  3183. * @publicApi
  3184. */
  3185. export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
  3186. readonly control: FormControl;
  3187. /**
  3188. * @description
  3189. * Internal reference to the view model value.
  3190. */
  3191. viewModel: any;
  3192. /**
  3193. * @description
  3194. * Tracks the name bound to the directive. The parent form
  3195. * uses this name as a key to retrieve this control's value.
  3196. */
  3197. name: string;
  3198. /**
  3199. * @description
  3200. * Tracks whether the control is disabled.
  3201. */
  3202. isDisabled: boolean;
  3203. /**
  3204. * @description
  3205. * Tracks the value bound to this directive.
  3206. */
  3207. model: any;
  3208. /**
  3209. * @description
  3210. * Tracks the configuration options for this `ngModel` instance.
  3211. *
  3212. * **name**: An alternative to setting the name attribute on the form control element. See
  3213. * the [example](api/forms/NgModel#using-ngmodel-on-a-standalone-control) for using `NgModel`
  3214. * as a standalone control.
  3215. *
  3216. * **standalone**: When set to true, the `ngModel` will not register itself with its parent form,
  3217. * and acts as if it's not in the form. Defaults to false.
  3218. *
  3219. * **updateOn**: Defines the event upon which the form control value and validity update.
  3220. * Defaults to 'change'. Possible values: `'change'` | `'blur'` | `'submit'`.
  3221. *
  3222. */
  3223. options: {
  3224. name?: string;
  3225. standalone?: boolean;
  3226. updateOn?: FormHooks;
  3227. };
  3228. /**
  3229. * @description
  3230. * Event emitter for producing the `ngModelChange` event after
  3231. * the view model updates.
  3232. */
  3233. update: EventEmitter<{}>;
  3234. constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<AsyncValidator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[]);
  3235. /**
  3236. * @description
  3237. * A lifecycle method called when the directive's inputs change. For internal use
  3238. * only.
  3239. *
  3240. * @param changes A object of key/value pairs for the set of changed inputs.
  3241. */
  3242. ngOnChanges(changes: SimpleChanges): void;
  3243. /**
  3244. * @description
  3245. * Lifecycle method called before the directive's instance is destroyed. For internal
  3246. * use only.
  3247. */
  3248. ngOnDestroy(): void;
  3249. /**
  3250. * @description
  3251. * Returns an array that represents the path from the top-level form to this control.
  3252. * Each index is the string name of the control on that level.
  3253. */
  3254. readonly path: string[];
  3255. /**
  3256. * @description
  3257. * The top-level directive for this control if present, otherwise null.
  3258. */
  3259. readonly formDirective: any;
  3260. /**
  3261. * @description
  3262. * Synchronous validator function composed of all the synchronous validators
  3263. * registered with this directive.
  3264. */
  3265. readonly validator: ValidatorFn | null;
  3266. /**
  3267. * @description
  3268. * Async validator function composed of all the async validators registered with this
  3269. * directive.
  3270. */
  3271. readonly asyncValidator: AsyncValidatorFn | null;
  3272. /**
  3273. * @description
  3274. * Sets the new value for the view model and emits an `ngModelChange` event.
  3275. *
  3276. * @param newValue The new value emitted by `ngModelChange`.
  3277. */
  3278. viewToModelUpdate(newValue: any): void;
  3279. private _setUpControl;
  3280. private _setUpdateStrategy;
  3281. private _isStandalone;
  3282. private _setUpStandalone;
  3283. private _checkForErrors;
  3284. private _checkParentType;
  3285. private _checkName;
  3286. private _updateValue;
  3287. private _updateDisabled;
  3288. }
  3289. /**
  3290. * @description
  3291. * Creates and binds a `FormGroup` instance to a DOM element.
  3292. *
  3293. * This directive can only be used as a child of `NgForm` (within `<form>` tags).
  3294. *
  3295. * Use this directive to validate a sub-group of your form separately from the
  3296. * rest of your form, or if some values in your domain model make more sense
  3297. * to consume together in a nested object.
  3298. *
  3299. * Provide a name for the sub-group and it will become the key
  3300. * for the sub-group in the form's full value. If you need direct access, export the directive into
  3301. * a local template variable using `ngModelGroup` (ex: `#myGroup="ngModelGroup"`).
  3302. *
  3303. * @usageNotes
  3304. *
  3305. * ### Consuming controls in a grouping
  3306. *
  3307. * The following example shows you how to combine controls together in a sub-group
  3308. * of the form.
  3309. *
  3310. * {@example forms/ts/ngModelGroup/ng_model_group_example.ts region='Component'}
  3311. *
  3312. * @ngModule FormsModule
  3313. * @publicApi
  3314. */
  3315. export declare class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy {
  3316. /**
  3317. * @description
  3318. * Tracks the name of the `NgModelGroup` bound to the directive. The name corresponds
  3319. * to a key in the parent `NgForm`.
  3320. */
  3321. name: string;
  3322. constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
  3323. }
  3324. /**
  3325. * @description
  3326. * Marks `<option>` as dynamic, so Angular can be notified when options change.
  3327. *
  3328. * @see `SelectControlValueAccessor`
  3329. *
  3330. * @ngModule ReactiveFormsModule
  3331. * @ngModule FormsModule
  3332. * @publicApi
  3333. */
  3334. export declare class NgSelectOption implements OnDestroy {
  3335. private _element;
  3336. private _renderer;
  3337. private _select;
  3338. /**
  3339. * @description
  3340. * ID of the option element
  3341. */
  3342. id: string;
  3343. constructor(_element: ElementRef, _renderer: Renderer2, _select: SelectControlValueAccessor);
  3344. /**
  3345. * @description
  3346. * Tracks the value bound to the option element. Unlike the value binding,
  3347. * ngValue supports binding to objects.
  3348. */
  3349. ngValue: any;
  3350. /**
  3351. * @description
  3352. * Tracks simple string values bound to the option element.
  3353. * For objects, use the `ngValue` input binding.
  3354. */
  3355. value: any;
  3356. /**
  3357. * @description
  3358. * Lifecycle method called before the directive's instance is destroyed. For internal use only.
  3359. */
  3360. ngOnDestroy(): void;
  3361. }
  3362. /**
  3363. * @description
  3364. * The `ControlValueAccessor` for writing a number value and listening to number input changes.
  3365. * The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
  3366. * directives.
  3367. *
  3368. * @usageNotes
  3369. *
  3370. * ### Using a number input with a reactive form.
  3371. *
  3372. * The following example shows how to use a number input with a reactive form.
  3373. *
  3374. * ```ts
  3375. * const totalCountControl = new FormControl();
  3376. * ```
  3377. *
  3378. * ```
  3379. * <input type="number" [formControl]="totalCountControl">
  3380. * ```
  3381. *
  3382. * @ngModule ReactiveFormsModule
  3383. * @ngModule FormsModule
  3384. * @publicApi
  3385. */
  3386. export declare class NumberValueAccessor implements ControlValueAccessor {
  3387. private _renderer;
  3388. private _elementRef;
  3389. /**
  3390. * @description
  3391. * The registered callback function called when a change or input event occurs on the input
  3392. * element.
  3393. */
  3394. onChange: (_: any) => void;
  3395. /**
  3396. * @description
  3397. * The registered callback function called when a blur event occurs on the input element.
  3398. */
  3399. onTouched: () => void;
  3400. constructor(_renderer: Renderer2, _elementRef: ElementRef);
  3401. /**
  3402. * Sets the "value" property on the input element.
  3403. *
  3404. * @param value The checked value
  3405. */
  3406. writeValue(value: number): void;
  3407. /**
  3408. * @description
  3409. * Registers a function called when the control value changes.
  3410. *
  3411. * @param fn The callback function
  3412. */
  3413. registerOnChange(fn: (_: number | null) => void): void;
  3414. /**
  3415. * @description
  3416. * Registers a function called when the control is touched.
  3417. *
  3418. * @param fn The callback function
  3419. */
  3420. registerOnTouched(fn: () => void): void;
  3421. /**
  3422. * Sets the "disabled" property on the input element.
  3423. *
  3424. * @param isDisabled The disabled value
  3425. */
  3426. setDisabledState(isDisabled: boolean): void;
  3427. }
  3428. /**
  3429. * @description
  3430. * A directive that adds regex pattern validation to controls marked with the
  3431. * `pattern` attribute. The regex must match the entire control value.
  3432. * The directive is provided with the `NG_VALIDATORS` multi-provider list.
  3433. *
  3434. * @see [Form Validation](guide/form-validation)
  3435. *
  3436. * @usageNotes
  3437. *
  3438. * ### Adding a pattern validator
  3439. *
  3440. * The following example shows how to add a pattern validator to an input attached to an
  3441. * ngModel binding.
  3442. *
  3443. * ```html
  3444. * <input name="firstName" ngModel pattern="[a-zA-Z ]*">
  3445. * ```
  3446. *
  3447. * @ngModule ReactiveFormsModule
  3448. * @ngModule FormsModule
  3449. * @publicApi
  3450. */
  3451. export declare class PatternValidator implements Validator, OnChanges {
  3452. private _validator;
  3453. private _onChange;
  3454. /**
  3455. * @description
  3456. * Tracks changes to the pattern bound to this directive.
  3457. */
  3458. pattern: string | RegExp;
  3459. /**
  3460. * @description
  3461. * A lifecycle method called when the directive's inputs change. For internal use
  3462. * only.
  3463. *
  3464. * @param changes A object of key/value pairs for the set of changed inputs.
  3465. */
  3466. ngOnChanges(changes: SimpleChanges): void;
  3467. /**
  3468. * @description
  3469. * Method that validates whether the value matches the
  3470. * the pattern requirement.
  3471. */
  3472. validate(control: AbstractControl): ValidationErrors | null;
  3473. /**
  3474. * @description
  3475. * Registers a callback function to call when the validator inputs change.
  3476. *
  3477. * @param fn The callback function
  3478. */
  3479. registerOnValidatorChange(fn: () => void): void;
  3480. private _createValidator;
  3481. }
  3482. /**
  3483. * @description
  3484. * The `ControlValueAccessor` for writing radio control values and listening to radio control
  3485. * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
  3486. * `NgModel` directives.
  3487. *
  3488. * @usageNotes
  3489. *
  3490. * ### Using radio buttons with reactive form directives
  3491. *
  3492. * The follow example shows how to use radio buttons in a reactive form. When using radio buttons in
  3493. * a reactive form, radio buttons in the same group should have the same `formControlName`.
  3494. * Providing a `name` attribute is optional.
  3495. *
  3496. * {@example forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts region='Reactive'}
  3497. *
  3498. * @ngModule ReactiveFormsModule
  3499. * @ngModule FormsModule
  3500. * @publicApi
  3501. */
  3502. export declare class RadioControlValueAccessor implements ControlValueAccessor, OnDestroy, OnInit {
  3503. private _renderer;
  3504. private _elementRef;
  3505. private _registry;
  3506. private _injector;
  3507. /**
  3508. * @description
  3509. * The registered callback function called when a change event occurs on the input element.
  3510. */
  3511. onChange: () => void;
  3512. /**
  3513. * @description
  3514. * The registered callback function called when a blur event occurs on the input element.
  3515. */
  3516. onTouched: () => void;
  3517. /**
  3518. * @description
  3519. * Tracks the name of the radio input element.
  3520. */
  3521. name: string;
  3522. /**
  3523. * @description
  3524. * Tracks the name of the `FormControl` bound to the directive. The name corresponds
  3525. * to a key in the parent `FormGroup` or `FormArray`.
  3526. */
  3527. formControlName: string;
  3528. /**
  3529. * @description
  3530. * Tracks the value of the radio input element
  3531. */
  3532. value: any;
  3533. constructor(_renderer: Renderer2, _elementRef: ElementRef, _registry: ɵangular_packages_forms_forms_o, _injector: Injector);
  3534. /**
  3535. * @description
  3536. * A lifecycle method called when the directive is initialized. For internal use only.
  3537. *
  3538. * @param changes A object of key/value pairs for the set of changed inputs.
  3539. */
  3540. ngOnInit(): void;
  3541. /**
  3542. * @description
  3543. * Lifecycle method called before the directive's instance is destroyed. For internal use only.
  3544. *
  3545. * @param changes A object of key/value pairs for the set of changed inputs.
  3546. */
  3547. ngOnDestroy(): void;
  3548. /**
  3549. * @description
  3550. * Sets the "checked" property value on the radio input element.
  3551. *
  3552. * @param value The checked value
  3553. */
  3554. writeValue(value: any): void;
  3555. /**
  3556. * @description
  3557. * Registers a function called when the control value changes.
  3558. *
  3559. * @param fn The callback function
  3560. */
  3561. registerOnChange(fn: (_: any) => {}): void;
  3562. /**
  3563. * Sets the "value" on the radio input element and unchecks it.
  3564. *
  3565. * @param value
  3566. */
  3567. fireUncheck(value: any): void;
  3568. /**
  3569. * @description
  3570. * Registers a function called when the control is touched.
  3571. *
  3572. * @param fn The callback function
  3573. */
  3574. registerOnTouched(fn: () => {}): void;
  3575. /**
  3576. * Sets the "disabled" property on the input element.
  3577. *
  3578. * @param isDisabled The disabled value
  3579. */
  3580. setDisabledState(isDisabled: boolean): void;
  3581. private _checkName;
  3582. private _throwNameError;
  3583. }
  3584. /**
  3585. * @description
  3586. * The `ControlValueAccessor` for writing a range value and listening to range input changes.
  3587. * The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
  3588. * directives.
  3589. *
  3590. * @usageNotes
  3591. *
  3592. * ### Using a range input with a reactive form
  3593. *
  3594. * The following example shows how to use a range input with a reactive form.
  3595. *
  3596. * ```ts
  3597. * const ageControl = new FormControl();
  3598. * ```
  3599. *
  3600. * ```
  3601. * <input type="range" [formControl]="ageControl">
  3602. * ```
  3603. *
  3604. * @ngModule ReactiveFormsModule
  3605. * @ngModule FormsModule
  3606. * @publicApi
  3607. */
  3608. export declare class RangeValueAccessor implements ControlValueAccessor {
  3609. private _renderer;
  3610. private _elementRef;
  3611. /**
  3612. * @description
  3613. * The registered callback function called when a change or input event occurs on the input
  3614. * element.
  3615. */
  3616. onChange: (_: any) => void;
  3617. /**
  3618. * @description
  3619. * The registered callback function called when a blur event occurs on the input element.
  3620. */
  3621. onTouched: () => void;
  3622. constructor(_renderer: Renderer2, _elementRef: ElementRef);
  3623. /**
  3624. * Sets the "value" property on the input element.
  3625. *
  3626. * @param value The checked value
  3627. */
  3628. writeValue(value: any): void;
  3629. /**
  3630. * @description
  3631. * Registers a function called when the control value changes.
  3632. *
  3633. * @param fn The callback function
  3634. */
  3635. registerOnChange(fn: (_: number | null) => void): void;
  3636. /**
  3637. * @description
  3638. * Registers a function called when the control is touched.
  3639. *
  3640. * @param fn The callback function
  3641. */
  3642. registerOnTouched(fn: () => void): void;
  3643. /**
  3644. * Sets the "disabled" property on the range input element.
  3645. *
  3646. * @param isDisabled The disabled value
  3647. */
  3648. setDisabledState(isDisabled: boolean): void;
  3649. }
  3650. /**
  3651. * Exports the required infrastructure and directives for reactive forms,
  3652. * making them available for import by NgModules that import this module.
  3653. * @see [Forms](guide/reactive-forms)
  3654. *
  3655. * @see [Reactive Forms Guide](/guide/reactive-forms)
  3656. *
  3657. * @publicApi
  3658. */
  3659. export declare class ReactiveFormsModule {
  3660. /**
  3661. * @description
  3662. * Provides options for configuring the reactive forms module.
  3663. *
  3664. * @param opts An object of configuration options
  3665. * * `warnOnNgModelWithFormControl` Configures when to emit a warning when an `ngModel`
  3666. * binding is used with reactive form directives.
  3667. */
  3668. static withConfig(opts: {
  3669. /** @deprecated as of v6 */ warnOnNgModelWithFormControl: 'never' | 'once' | 'always';
  3670. }): ModuleWithProviders<ReactiveFormsModule>;
  3671. }
  3672. /**
  3673. * @description
  3674. * A directive that adds the `required` validator to any controls marked with the
  3675. * `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
  3676. *
  3677. * @see [Form Validation](guide/form-validation)
  3678. *
  3679. * @usageNotes
  3680. *
  3681. * ### Adding a required validator using template-driven forms
  3682. *
  3683. * ```
  3684. * <input name="fullName" ngModel required>
  3685. * ```
  3686. *
  3687. * @ngModule FormsModule
  3688. * @ngModule ReactiveFormsModule
  3689. * @publicApi
  3690. */
  3691. export declare class RequiredValidator implements Validator {
  3692. private _required;
  3693. private _onChange;
  3694. /**
  3695. * @description
  3696. * Tracks changes to the required attribute bound to this directive.
  3697. */
  3698. required: boolean | string;
  3699. /**
  3700. * @description
  3701. * Method that validates whether the control is empty.
  3702. * Returns the validation result if enabled, otherwise null.
  3703. */
  3704. validate(control: AbstractControl): ValidationErrors | null;
  3705. /**
  3706. * @description
  3707. * Registers a callback function to call when the validator inputs change.
  3708. *
  3709. * @param fn The callback function
  3710. */
  3711. registerOnValidatorChange(fn: () => void): void;
  3712. }
  3713. /**
  3714. * @description
  3715. * The `ControlValueAccessor` for writing select control values and listening to select control
  3716. * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
  3717. * `NgModel` directives.
  3718. *
  3719. * @usageNotes
  3720. *
  3721. * ### Using select controls in a reactive form
  3722. *
  3723. * The following examples show how to use a select control in a reactive form.
  3724. *
  3725. * {@example forms/ts/reactiveSelectControl/reactive_select_control_example.ts region='Component'}
  3726. *
  3727. * ### Using select controls in a template-driven form
  3728. *
  3729. * To use a select in a template-driven form, simply add an `ngModel` and a `name`
  3730. * attribute to the main `<select>` tag.
  3731. *
  3732. * {@example forms/ts/selectControl/select_control_example.ts region='Component'}
  3733. *
  3734. * ### Customizing option selection
  3735. *
  3736. * Angular uses object identity to select option. It's possible for the identities of items
  3737. * to change while the data does not. This can happen, for example, if the items are produced
  3738. * from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the
  3739. * second response will produce objects with different identities.
  3740. *
  3741. * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
  3742. * `compareWith` takes a **function** which has two arguments: `option1` and `option2`.
  3743. * If `compareWith` is given, Angular selects option by the return value of the function.
  3744. *
  3745. * ```ts
  3746. * const selectedCountriesControl = new FormControl();
  3747. * ```
  3748. *
  3749. * ```
  3750. * <select [compareWith]="compareFn" [formControl]="selectedCountriesControl">
  3751. * <option *ngFor="let country of countries" [ngValue]="country">
  3752. * {{country.name}}
  3753. * </option>
  3754. * </select>
  3755. *
  3756. * compareFn(c1: Country, c2: Country): boolean {
  3757. * return c1 && c2 ? c1.id === c2.id : c1 === c2;
  3758. * }
  3759. * ```
  3760. *
  3761. * **Note:** We listen to the 'change' event because 'input' events aren't fired
  3762. * for selects in Firefox and IE:
  3763. * https://bugzilla.mozilla.org/show_bug.cgi?id=1024350
  3764. * https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/
  3765. *
  3766. * @ngModule ReactiveFormsModule
  3767. * @ngModule FormsModule
  3768. * @publicApi
  3769. */
  3770. export declare class SelectControlValueAccessor implements ControlValueAccessor {
  3771. private _renderer;
  3772. private _elementRef;
  3773. value: any;
  3774. /**
  3775. * @description
  3776. * The registered callback function called when a change event occurs on the input element.
  3777. */
  3778. onChange: (_: any) => void;
  3779. /**
  3780. * @description
  3781. * The registered callback function called when a blur event occurs on the input element.
  3782. */
  3783. onTouched: () => void;
  3784. /**
  3785. * @description
  3786. * Tracks the option comparison algorithm for tracking identities when
  3787. * checking for changes.
  3788. */
  3789. compareWith: (o1: any, o2: any) => boolean;
  3790. private _compareWith;
  3791. constructor(_renderer: Renderer2, _elementRef: ElementRef);
  3792. /**
  3793. * Sets the "value" property on the input element. The "selectedIndex"
  3794. * property is also set if an ID is provided on the option element.
  3795. *
  3796. * @param value The checked value
  3797. */
  3798. writeValue(value: any): void;
  3799. /**
  3800. * @description
  3801. * Registers a function called when the control value changes.
  3802. *
  3803. * @param fn The callback function
  3804. */
  3805. registerOnChange(fn: (value: any) => any): void;
  3806. /**
  3807. * @description
  3808. * Registers a function called when the control is touched.
  3809. *
  3810. * @param fn The callback function
  3811. */
  3812. registerOnTouched(fn: () => any): void;
  3813. /**
  3814. * Sets the "disabled" property on the select input element.
  3815. *
  3816. * @param isDisabled The disabled value
  3817. */
  3818. setDisabledState(isDisabled: boolean): void;
  3819. }
  3820. /**
  3821. * @description
  3822. * The `ControlValueAccessor` for writing multi-select control values and listening to multi-select control
  3823. * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
  3824. * directives.
  3825. *
  3826. * @see `SelectControlValueAccessor`
  3827. *
  3828. * @usageNotes
  3829. *
  3830. * ### Using a multi-select control
  3831. *
  3832. * The follow example shows you how to use a multi-select control with a reactive form.
  3833. *
  3834. * ```ts
  3835. * const countryControl = new FormControl();
  3836. * ```
  3837. *
  3838. * ```
  3839. * <select multiple name="countries" [formControl]="countryControl">
  3840. * <option *ngFor="let country of countries" [ngValue]="country">
  3841. * {{ country.name }}
  3842. * </option>
  3843. * </select>
  3844. * ```
  3845. *
  3846. * ### Customizing option selection
  3847. *
  3848. * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
  3849. * See the `SelectControlValueAccessor` for usage.
  3850. *
  3851. * @ngModule ReactiveFormsModule
  3852. * @ngModule FormsModule
  3853. * @publicApi
  3854. */
  3855. export declare class SelectMultipleControlValueAccessor implements ControlValueAccessor {
  3856. private _renderer;
  3857. private _elementRef;
  3858. /**
  3859. * @description
  3860. * The current value
  3861. */
  3862. value: any;
  3863. /**
  3864. * @description
  3865. * The registered callback function called when a change event occurs on the input element.
  3866. */
  3867. onChange: (_: any) => void;
  3868. /**
  3869. * @description
  3870. * The registered callback function called when a blur event occurs on the input element.
  3871. */
  3872. onTouched: () => void;
  3873. /**
  3874. * @description
  3875. * Tracks the option comparison algorithm for tracking identities when
  3876. * checking for changes.
  3877. */
  3878. compareWith: (o1: any, o2: any) => boolean;
  3879. private _compareWith;
  3880. constructor(_renderer: Renderer2, _elementRef: ElementRef);
  3881. /**
  3882. * @description
  3883. * Sets the "value" property on one or of more
  3884. * of the select's options.
  3885. *
  3886. * @param value The value
  3887. */
  3888. writeValue(value: any): void;
  3889. /**
  3890. * @description
  3891. * Registers a function called when the control value changes
  3892. * and writes an array of the selected options.
  3893. *
  3894. * @param fn The callback function
  3895. */
  3896. registerOnChange(fn: (value: any) => any): void;
  3897. /**
  3898. * @description
  3899. * Registers a function called when the control is touched.
  3900. *
  3901. * @param fn The callback function
  3902. */
  3903. registerOnTouched(fn: () => any): void;
  3904. /**
  3905. * Sets the "disabled" property on the select input element.
  3906. *
  3907. * @param isDisabled The disabled value
  3908. */
  3909. setDisabledState(isDisabled: boolean): void;
  3910. }
  3911. /**
  3912. * @description
  3913. * Defines the map of errors returned from failed validation checks.
  3914. *
  3915. * @publicApi
  3916. */
  3917. export declare type ValidationErrors = {
  3918. [key: string]: any;
  3919. };
  3920. /**
  3921. * @description
  3922. * An interface implemented by classes that perform synchronous validation.
  3923. *
  3924. * @usageNotes
  3925. *
  3926. * ### Provide a custom validator
  3927. *
  3928. * The following example implements the `Validator` interface to create a
  3929. * validator directive with a custom error key.
  3930. *
  3931. * ```typescript
  3932. * @Directive({
  3933. * selector: '[customValidator]',
  3934. * providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
  3935. * })
  3936. * class CustomValidatorDirective implements Validator {
  3937. * validate(control: AbstractControl): ValidationErrors|null {
  3938. * return {'custom': true};
  3939. * }
  3940. * }
  3941. * ```
  3942. *
  3943. * @publicApi
  3944. */
  3945. export declare interface Validator {
  3946. /**
  3947. * @description
  3948. * Method that performs synchronous validation against the provided control.
  3949. *
  3950. * @param control The control to validate against.
  3951. *
  3952. * @returns A map of validation errors if validation fails,
  3953. * otherwise null.
  3954. */
  3955. validate(control: AbstractControl): ValidationErrors | null;
  3956. /**
  3957. * @description
  3958. * Registers a callback function to call when the validator inputs change.
  3959. *
  3960. * @param fn The callback function
  3961. */
  3962. registerOnValidatorChange?(fn: () => void): void;
  3963. }
  3964. /**
  3965. * @description
  3966. * A function that receives a control and synchronously returns a map of
  3967. * validation errors if present, otherwise null.
  3968. *
  3969. * @publicApi
  3970. */
  3971. export declare interface ValidatorFn {
  3972. (control: AbstractControl): ValidationErrors | null;
  3973. }
  3974. /**
  3975. * @description
  3976. * Provides a set of built-in validators that can be used by form controls.
  3977. *
  3978. * A validator is a function that processes a `FormControl` or collection of
  3979. * controls and returns an error map or null. A null map means that validation has passed.
  3980. *
  3981. * @see [Form Validation](/guide/form-validation)
  3982. *
  3983. * @publicApi
  3984. */
  3985. export declare class Validators {
  3986. /**
  3987. * @description
  3988. * Validator that requires the control's value to be greater than or equal to the provided number.
  3989. * The validator exists only as a function and not as a directive.
  3990. *
  3991. * @usageNotes
  3992. *
  3993. * ### Validate against a minimum of 3
  3994. *
  3995. * ```typescript
  3996. * const control = new FormControl(2, Validators.min(3));
  3997. *
  3998. * console.log(control.errors); // {min: {min: 3, actual: 2}}
  3999. * ```
  4000. *
  4001. * @returns A validator function that returns an error map with the
  4002. * `min` property if the validation check fails, otherwise `null`.
  4003. *
  4004. */
  4005. static min(min: number): ValidatorFn;
  4006. /**
  4007. * @description
  4008. * Validator that requires the control's value to be less than or equal to the provided number.
  4009. * The validator exists only as a function and not as a directive.
  4010. *
  4011. * @usageNotes
  4012. *
  4013. * ### Validate against a maximum of 15
  4014. *
  4015. * ```typescript
  4016. * const control = new FormControl(16, Validators.max(15));
  4017. *
  4018. * console.log(control.errors); // {max: {max: 15, actual: 16}}
  4019. * ```
  4020. *
  4021. * @returns A validator function that returns an error map with the
  4022. * `max` property if the validation check fails, otherwise `null`.
  4023. *
  4024. */
  4025. static max(max: number): ValidatorFn;
  4026. /**
  4027. * @description
  4028. * Validator that requires the control have a non-empty value.
  4029. *
  4030. * @usageNotes
  4031. *
  4032. * ### Validate that the field is non-empty
  4033. *
  4034. * ```typescript
  4035. * const control = new FormControl('', Validators.required);
  4036. *
  4037. * console.log(control.errors); // {required: true}
  4038. * ```
  4039. *
  4040. * @returns An error map with the `required` property
  4041. * if the validation check fails, otherwise `null`.
  4042. *
  4043. */
  4044. static required(control: AbstractControl): ValidationErrors | null;
  4045. /**
  4046. * @description
  4047. * Validator that requires the control's value be true. This validator is commonly
  4048. * used for required checkboxes.
  4049. *
  4050. * @usageNotes
  4051. *
  4052. * ### Validate that the field value is true
  4053. *
  4054. * ```typescript
  4055. * const control = new FormControl('', Validators.requiredTrue);
  4056. *
  4057. * console.log(control.errors); // {required: true}
  4058. * ```
  4059. *
  4060. * @returns An error map that contains the `required` property
  4061. * set to `true` if the validation check fails, otherwise `null`.
  4062. */
  4063. static requiredTrue(control: AbstractControl): ValidationErrors | null;
  4064. /**
  4065. * @description
  4066. * Validator that requires the control's value pass an email validation test.
  4067. *
  4068. * @usageNotes
  4069. *
  4070. * ### Validate that the field matches a valid email pattern
  4071. *
  4072. * ```typescript
  4073. * const control = new FormControl('bad@', Validators.email);
  4074. *
  4075. * console.log(control.errors); // {email: true}
  4076. * ```
  4077. *
  4078. * @returns An error map with the `email` property
  4079. * if the validation check fails, otherwise `null`.
  4080. *
  4081. */
  4082. static email(control: AbstractControl): ValidationErrors | null;
  4083. /**
  4084. * @description
  4085. * Validator that requires the length of the control's value to be greater than or equal
  4086. * to the provided minimum length. This validator is also provided by default if you use the
  4087. * the HTML5 `minlength` attribute.
  4088. *
  4089. * @usageNotes
  4090. *
  4091. * ### Validate that the field has a minimum of 3 characters
  4092. *
  4093. * ```typescript
  4094. * const control = new FormControl('ng', Validators.minLength(3));
  4095. *
  4096. * console.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}}
  4097. * ```
  4098. *
  4099. * ```html
  4100. * <input minlength="5">
  4101. * ```
  4102. *
  4103. * @returns A validator function that returns an error map with the
  4104. * `minlength` if the validation check fails, otherwise `null`.
  4105. */
  4106. static minLength(minLength: number): ValidatorFn;
  4107. /**
  4108. * @description
  4109. * Validator that requires the length of the control's value to be less than or equal
  4110. * to the provided maximum length. This validator is also provided by default if you use the
  4111. * the HTML5 `maxlength` attribute.
  4112. *
  4113. * @usageNotes
  4114. *
  4115. * ### Validate that the field has maximum of 5 characters
  4116. *
  4117. * ```typescript
  4118. * const control = new FormControl('Angular', Validators.maxLength(5));
  4119. *
  4120. * console.log(control.errors); // {maxlength: {requiredLength: 5, actualLength: 7}}
  4121. * ```
  4122. *
  4123. * ```html
  4124. * <input maxlength="5">
  4125. * ```
  4126. *
  4127. * @returns A validator function that returns an error map with the
  4128. * `maxlength` property if the validation check fails, otherwise `null`.
  4129. */
  4130. static maxLength(maxLength: number): ValidatorFn;
  4131. /**
  4132. * @description
  4133. * Validator that requires the control's value to match a regex pattern. This validator is also
  4134. * provided by default if you use the HTML5 `pattern` attribute.
  4135. *
  4136. * Note that if a Regexp is provided, the Regexp is used as is to test the values. On the other
  4137. * hand, if a string is passed, the `^` character is prepended and the `$` character is
  4138. * appended to the provided string (if not already present), and the resulting regular
  4139. * expression is used to test the values.
  4140. *
  4141. * @usageNotes
  4142. *
  4143. * ### Validate that the field only contains letters or spaces
  4144. *
  4145. * ```typescript
  4146. * const control = new FormControl('1', Validators.pattern('[a-zA-Z ]*'));
  4147. *
  4148. * console.log(control.errors); // {pattern: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'}}
  4149. * ```
  4150. *
  4151. * ```html
  4152. * <input pattern="[a-zA-Z ]*">
  4153. * ```
  4154. *
  4155. * @returns A validator function that returns an error map with the
  4156. * `pattern` property if the validation check fails, otherwise `null`.
  4157. */
  4158. static pattern(pattern: string | RegExp): ValidatorFn;
  4159. /**
  4160. * @description
  4161. * Validator that performs no operation.
  4162. */
  4163. static nullValidator(control: AbstractControl): ValidationErrors | null;
  4164. /**
  4165. * @description
  4166. * Compose multiple validators into a single function that returns the union
  4167. * of the individual error maps for the provided control.
  4168. *
  4169. * @returns A validator function that returns an error map with the
  4170. * merged error maps of the validators if the validation check fails, otherwise `null`.
  4171. */
  4172. static compose(validators: null): null;
  4173. static compose(validators: (ValidatorFn | null | undefined)[]): ValidatorFn | null;
  4174. /**
  4175. * @description
  4176. * Compose multiple async validators into a single function that returns the union
  4177. * of the individual error objects for the provided control.
  4178. *
  4179. * @returns A validator function that returns an error map with the
  4180. * merged error objects of the async validators if the validation check fails, otherwise `null`.
  4181. */
  4182. static composeAsync(validators: (AsyncValidatorFn | null)[]): AsyncValidatorFn | null;
  4183. }
  4184. /**
  4185. * @publicApi
  4186. */
  4187. export declare const VERSION: Version;
  4188. export declare const ɵangular_packages_forms_forms_a: Type<any>[];
  4189. export declare const ɵangular_packages_forms_forms_b: Type<any>[];
  4190. /**
  4191. * @description
  4192. * Provider which adds `RequiredValidator` to the `NG_VALIDATORS` multi-provider list.
  4193. */
  4194. export declare const ɵangular_packages_forms_forms_ba: StaticProvider;
  4195. /**
  4196. * @description
  4197. * Provider which adds `CheckboxRequiredValidator` to the `NG_VALIDATORS` multi-provider list.
  4198. */
  4199. export declare const ɵangular_packages_forms_forms_bb: StaticProvider;
  4200. /**
  4201. * @description
  4202. * Provider which adds `EmailValidator` to the `NG_VALIDATORS` multi-provider list.
  4203. */
  4204. export declare const ɵangular_packages_forms_forms_bc: any;
  4205. /**
  4206. * @description
  4207. * Provider which adds `MinLengthValidator` to the `NG_VALIDATORS` multi-provider list.
  4208. */
  4209. export declare const ɵangular_packages_forms_forms_bd: any;
  4210. /**
  4211. * @description
  4212. * Provider which adds `MaxLengthValidator` to the `NG_VALIDATORS` multi-provider list.
  4213. */
  4214. export declare const ɵangular_packages_forms_forms_be: any;
  4215. /**
  4216. * @description
  4217. * Provider which adds `PatternValidator` to the `NG_VALIDATORS` multi-provider list.
  4218. */
  4219. export declare const ɵangular_packages_forms_forms_bf: any;
  4220. export declare const ɵangular_packages_forms_forms_c: Type<any>[];
  4221. export declare const ɵangular_packages_forms_forms_e: any;
  4222. export declare const ɵangular_packages_forms_forms_f: any;
  4223. export declare class ɵangular_packages_forms_forms_g {
  4224. private _cd;
  4225. constructor(cd: AbstractControlDirective);
  4226. readonly ngClassUntouched: boolean;
  4227. readonly ngClassTouched: boolean;
  4228. readonly ngClassPristine: boolean;
  4229. readonly ngClassDirty: boolean;
  4230. readonly ngClassValid: boolean;
  4231. readonly ngClassInvalid: boolean;
  4232. readonly ngClassPending: boolean;
  4233. }
  4234. export declare const ɵangular_packages_forms_forms_h: {
  4235. '[class.ng-untouched]': string;
  4236. '[class.ng-touched]': string;
  4237. '[class.ng-pristine]': string;
  4238. '[class.ng-dirty]': string;
  4239. '[class.ng-valid]': string;
  4240. '[class.ng-invalid]': string;
  4241. '[class.ng-pending]': string;
  4242. };
  4243. export declare const ɵangular_packages_forms_forms_i: any;
  4244. /**
  4245. * @description
  4246. * `InjectionToken` to provide to turn off the warning when using 'ngForm' deprecated selector.
  4247. */
  4248. export declare const ɵangular_packages_forms_forms_j: InjectionToken<{}>;
  4249. export declare const ɵangular_packages_forms_forms_k: any;
  4250. export declare const ɵangular_packages_forms_forms_l: any;
  4251. export declare const ɵangular_packages_forms_forms_m: any;
  4252. export declare const ɵangular_packages_forms_forms_n: any;
  4253. /**
  4254. * @description
  4255. * Class used by Angular to track radio buttons. For internal use only.
  4256. */
  4257. export declare class ɵangular_packages_forms_forms_o {
  4258. private _accessors;
  4259. /**
  4260. * @description
  4261. * Adds a control to the internal registry. For internal use only.
  4262. */
  4263. add(control: NgControl, accessor: RadioControlValueAccessor): void;
  4264. /**
  4265. * @description
  4266. * Removes a control from the internal registry. For internal use only.
  4267. */
  4268. remove(accessor: RadioControlValueAccessor): void;
  4269. /**
  4270. * @description
  4271. * Selects a radio button. For internal use only.
  4272. */
  4273. select(accessor: RadioControlValueAccessor): void;
  4274. private _isSameGroup;
  4275. }
  4276. export declare const ɵangular_packages_forms_forms_p: StaticProvider;
  4277. /**
  4278. * Token to provide to turn off the ngModel warning on formControl and formControlName.
  4279. */
  4280. export declare const ɵangular_packages_forms_forms_q: InjectionToken<{}>;
  4281. export declare const ɵangular_packages_forms_forms_r: any;
  4282. export declare const ɵangular_packages_forms_forms_s: any;
  4283. export declare const ɵangular_packages_forms_forms_t: any;
  4284. export declare const ɵangular_packages_forms_forms_u: any;
  4285. export declare const ɵangular_packages_forms_forms_v: any;
  4286. export declare const ɵangular_packages_forms_forms_w: StaticProvider;
  4287. export declare const ɵangular_packages_forms_forms_x: StaticProvider;
  4288. /**
  4289. * Internal module used for sharing directives between FormsModule and ReactiveFormsModule
  4290. */
  4291. declare class ɵInternalFormsSharedModule {
  4292. }
  4293. export { ɵInternalFormsSharedModule }
  4294. export { ɵInternalFormsSharedModule as ɵangular_packages_forms_forms_d }
  4295. /**
  4296. * @description
  4297. *
  4298. * Adds `novalidate` attribute to all forms by default.
  4299. *
  4300. * `novalidate` is used to disable browser's native form validation.
  4301. *
  4302. * If you want to use native validation with Angular forms, just add `ngNativeValidate` attribute:
  4303. *
  4304. * ```
  4305. * <form ngNativeValidate></form>
  4306. * ```
  4307. *
  4308. * @publicApi
  4309. * @ngModule ReactiveFormsModule
  4310. * @ngModule FormsModule
  4311. */
  4312. declare class ɵNgNoValidate {
  4313. }
  4314. export { ɵNgNoValidate }
  4315. export { ɵNgNoValidate as ɵangular_packages_forms_forms_z }
  4316. /**
  4317. * @description
  4318. * Marks `<option>` as dynamic, so Angular can be notified when options change.
  4319. *
  4320. * @see `SelectMultipleControlValueAccessor`
  4321. *
  4322. * @ngModule ReactiveFormsModule
  4323. * @ngModule FormsModule
  4324. * @publicApi
  4325. */
  4326. declare class ɵNgSelectMultipleOption implements OnDestroy {
  4327. private _element;
  4328. private _renderer;
  4329. private _select;
  4330. id: string;
  4331. constructor(_element: ElementRef, _renderer: Renderer2, _select: SelectMultipleControlValueAccessor);
  4332. /**
  4333. * @description
  4334. * Tracks the value bound to the option element. Unlike the value binding,
  4335. * ngValue supports binding to objects.
  4336. */
  4337. ngValue: any;
  4338. /**
  4339. * @description
  4340. * Tracks simple string values bound to the option element.
  4341. * For objects, use the `ngValue` input binding.
  4342. */
  4343. value: any;
  4344. /**
  4345. * @description
  4346. * Lifecycle method called before the directive's instance is destroyed. For internal use only.
  4347. */
  4348. ngOnDestroy(): void;
  4349. }
  4350. export { ɵNgSelectMultipleOption }
  4351. export { ɵNgSelectMultipleOption as ɵangular_packages_forms_forms_y }
  4352. export { }