forms.js 249 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756675767586759676067616762676367646765676667676768676967706771677267736774677567766777677867796780678167826783678467856786
  1. /**
  2. * @license Angular v8.1.0
  3. * (c) 2010-2019 Google LLC. https://angular.io/
  4. * License: MIT
  5. */
  6. import { __decorate, __metadata, __param, __extends, __assign, __values, __spread } from 'tslib';
  7. import { InjectionToken, forwardRef, Directive, Renderer2, ElementRef, Optional, Inject, Self, ɵisPromise, ɵisObservable, Injectable, Input, Injector, Host, ɵlooseIdentical, isDevMode, EventEmitter, SkipSelf, Output, NgModule, Version } from '@angular/core';
  8. import { ɵgetDOM } from '@angular/platform-browser';
  9. import { forkJoin, from } from 'rxjs';
  10. import { map } from 'rxjs/operators';
  11. /**
  12. * @license
  13. * Copyright Google Inc. All Rights Reserved.
  14. *
  15. * Use of this source code is governed by an MIT-style license that can be
  16. * found in the LICENSE file at https://angular.io/license
  17. */
  18. /**
  19. * Used to provide a `ControlValueAccessor` for form controls.
  20. *
  21. * See `DefaultValueAccessor` for how to implement one.
  22. *
  23. * @publicApi
  24. */
  25. var NG_VALUE_ACCESSOR = new InjectionToken('NgValueAccessor');
  26. /**
  27. * @license
  28. * Copyright Google Inc. All Rights Reserved.
  29. *
  30. * Use of this source code is governed by an MIT-style license that can be
  31. * found in the LICENSE file at https://angular.io/license
  32. */
  33. var CHECKBOX_VALUE_ACCESSOR = {
  34. provide: NG_VALUE_ACCESSOR,
  35. useExisting: forwardRef(function () { return CheckboxControlValueAccessor; }),
  36. multi: true,
  37. };
  38. /**
  39. * @description
  40. * A `ControlValueAccessor` for writing a value and listening to changes on a checkbox input
  41. * element.
  42. *
  43. * @usageNotes
  44. *
  45. * ### Using a checkbox with a reactive form.
  46. *
  47. * The following example shows how to use a checkbox with a reactive form.
  48. *
  49. * ```ts
  50. * const rememberLoginControl = new FormControl();
  51. * ```
  52. *
  53. * ```
  54. * <input type="checkbox" [formControl]="rememberLoginControl">
  55. * ```
  56. *
  57. * @ngModule ReactiveFormsModule
  58. * @ngModule FormsModule
  59. * @publicApi
  60. */
  61. var CheckboxControlValueAccessor = /** @class */ (function () {
  62. function CheckboxControlValueAccessor(_renderer, _elementRef) {
  63. this._renderer = _renderer;
  64. this._elementRef = _elementRef;
  65. /**
  66. * @description
  67. * The registered callback function called when a change event occurs on the input element.
  68. */
  69. this.onChange = function (_) { };
  70. /**
  71. * @description
  72. * The registered callback function called when a blur event occurs on the input element.
  73. */
  74. this.onTouched = function () { };
  75. }
  76. /**
  77. * Sets the "checked" property on the input element.
  78. *
  79. * @param value The checked value
  80. */
  81. CheckboxControlValueAccessor.prototype.writeValue = function (value) {
  82. this._renderer.setProperty(this._elementRef.nativeElement, 'checked', value);
  83. };
  84. /**
  85. * @description
  86. * Registers a function called when the control value changes.
  87. *
  88. * @param fn The callback function
  89. */
  90. CheckboxControlValueAccessor.prototype.registerOnChange = function (fn) { this.onChange = fn; };
  91. /**
  92. * @description
  93. * Registers a function called when the control is touched.
  94. *
  95. * @param fn The callback function
  96. */
  97. CheckboxControlValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
  98. /**
  99. * Sets the "disabled" property on the input element.
  100. *
  101. * @param isDisabled The disabled value
  102. */
  103. CheckboxControlValueAccessor.prototype.setDisabledState = function (isDisabled) {
  104. this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  105. };
  106. CheckboxControlValueAccessor = __decorate([
  107. Directive({
  108. selector: 'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]',
  109. host: { '(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()' },
  110. providers: [CHECKBOX_VALUE_ACCESSOR]
  111. }),
  112. __metadata("design:paramtypes", [Renderer2, ElementRef])
  113. ], CheckboxControlValueAccessor);
  114. return CheckboxControlValueAccessor;
  115. }());
  116. /**
  117. * @license
  118. * Copyright Google Inc. All Rights Reserved.
  119. *
  120. * Use of this source code is governed by an MIT-style license that can be
  121. * found in the LICENSE file at https://angular.io/license
  122. */
  123. var DEFAULT_VALUE_ACCESSOR = {
  124. provide: NG_VALUE_ACCESSOR,
  125. useExisting: forwardRef(function () { return DefaultValueAccessor; }),
  126. multi: true
  127. };
  128. /**
  129. * We must check whether the agent is Android because composition events
  130. * behave differently between iOS and Android.
  131. */
  132. function _isAndroid() {
  133. var userAgent = ɵgetDOM() ? ɵgetDOM().getUserAgent() : '';
  134. return /android (\d+)/.test(userAgent.toLowerCase());
  135. }
  136. /**
  137. * @description
  138. * Provide this token to control if form directives buffer IME input until
  139. * the "compositionend" event occurs.
  140. * @publicApi
  141. */
  142. var COMPOSITION_BUFFER_MODE = new InjectionToken('CompositionEventMode');
  143. /**
  144. * @description
  145. * The default `ControlValueAccessor` for writing a value and listening to changes on input
  146. * elements. The accessor is used by the `FormControlDirective`, `FormControlName`, and
  147. * `NgModel` directives.
  148. *
  149. * @usageNotes
  150. *
  151. * ### Using the default value accessor
  152. *
  153. * The following example shows how to use an input element that activates the default value accessor
  154. * (in this case, a text field).
  155. *
  156. * ```ts
  157. * const firstNameControl = new FormControl();
  158. * ```
  159. *
  160. * ```
  161. * <input type="text" [formControl]="firstNameControl">
  162. * ```
  163. *
  164. * @ngModule ReactiveFormsModule
  165. * @ngModule FormsModule
  166. * @publicApi
  167. */
  168. var DefaultValueAccessor = /** @class */ (function () {
  169. function DefaultValueAccessor(_renderer, _elementRef, _compositionMode) {
  170. this._renderer = _renderer;
  171. this._elementRef = _elementRef;
  172. this._compositionMode = _compositionMode;
  173. /**
  174. * @description
  175. * The registered callback function called when an input event occurs on the input element.
  176. */
  177. this.onChange = function (_) { };
  178. /**
  179. * @description
  180. * The registered callback function called when a blur event occurs on the input element.
  181. */
  182. this.onTouched = function () { };
  183. /** Whether the user is creating a composition string (IME events). */
  184. this._composing = false;
  185. if (this._compositionMode == null) {
  186. this._compositionMode = !_isAndroid();
  187. }
  188. }
  189. /**
  190. * Sets the "value" property on the input element.
  191. *
  192. * @param value The checked value
  193. */
  194. DefaultValueAccessor.prototype.writeValue = function (value) {
  195. var normalizedValue = value == null ? '' : value;
  196. this._renderer.setProperty(this._elementRef.nativeElement, 'value', normalizedValue);
  197. };
  198. /**
  199. * @description
  200. * Registers a function called when the control value changes.
  201. *
  202. * @param fn The callback function
  203. */
  204. DefaultValueAccessor.prototype.registerOnChange = function (fn) { this.onChange = fn; };
  205. /**
  206. * @description
  207. * Registers a function called when the control is touched.
  208. *
  209. * @param fn The callback function
  210. */
  211. DefaultValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
  212. /**
  213. * Sets the "disabled" property on the input element.
  214. *
  215. * @param isDisabled The disabled value
  216. */
  217. DefaultValueAccessor.prototype.setDisabledState = function (isDisabled) {
  218. this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  219. };
  220. /** @internal */
  221. DefaultValueAccessor.prototype._handleInput = function (value) {
  222. if (!this._compositionMode || (this._compositionMode && !this._composing)) {
  223. this.onChange(value);
  224. }
  225. };
  226. /** @internal */
  227. DefaultValueAccessor.prototype._compositionStart = function () { this._composing = true; };
  228. /** @internal */
  229. DefaultValueAccessor.prototype._compositionEnd = function (value) {
  230. this._composing = false;
  231. this._compositionMode && this.onChange(value);
  232. };
  233. DefaultValueAccessor = __decorate([
  234. Directive({
  235. selector: 'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
  236. // TODO: vsavkin replace the above selector with the one below it once
  237. // https://github.com/angular/angular/issues/3011 is implemented
  238. // selector: '[ngModel],[formControl],[formControlName]',
  239. host: {
  240. '(input)': '$any(this)._handleInput($event.target.value)',
  241. '(blur)': 'onTouched()',
  242. '(compositionstart)': '$any(this)._compositionStart()',
  243. '(compositionend)': '$any(this)._compositionEnd($event.target.value)'
  244. },
  245. providers: [DEFAULT_VALUE_ACCESSOR]
  246. }),
  247. __param(2, Optional()), __param(2, Inject(COMPOSITION_BUFFER_MODE)),
  248. __metadata("design:paramtypes", [Renderer2, ElementRef, Boolean])
  249. ], DefaultValueAccessor);
  250. return DefaultValueAccessor;
  251. }());
  252. /**
  253. * @license
  254. * Copyright Google Inc. All Rights Reserved.
  255. *
  256. * Use of this source code is governed by an MIT-style license that can be
  257. * found in the LICENSE file at https://angular.io/license
  258. */
  259. /**
  260. * @description
  261. * Base class for control directives.
  262. *
  263. * This class is only used internally in the `ReactiveFormsModule` and the `FormsModule`.
  264. *
  265. * @publicApi
  266. */
  267. var AbstractControlDirective = /** @class */ (function () {
  268. function AbstractControlDirective() {
  269. }
  270. Object.defineProperty(AbstractControlDirective.prototype, "value", {
  271. /**
  272. * @description
  273. * Reports the value of the control if it is present, otherwise null.
  274. */
  275. get: function () { return this.control ? this.control.value : null; },
  276. enumerable: true,
  277. configurable: true
  278. });
  279. Object.defineProperty(AbstractControlDirective.prototype, "valid", {
  280. /**
  281. * @description
  282. * Reports whether the control is valid. A control is considered valid if no
  283. * validation errors exist with the current value.
  284. * If the control is not present, null is returned.
  285. */
  286. get: function () { return this.control ? this.control.valid : null; },
  287. enumerable: true,
  288. configurable: true
  289. });
  290. Object.defineProperty(AbstractControlDirective.prototype, "invalid", {
  291. /**
  292. * @description
  293. * Reports whether the control is invalid, meaning that an error exists in the input value.
  294. * If the control is not present, null is returned.
  295. */
  296. get: function () { return this.control ? this.control.invalid : null; },
  297. enumerable: true,
  298. configurable: true
  299. });
  300. Object.defineProperty(AbstractControlDirective.prototype, "pending", {
  301. /**
  302. * @description
  303. * Reports whether a control is pending, meaning that that async validation is occurring and
  304. * errors are not yet available for the input value. If the control is not present, null is
  305. * returned.
  306. */
  307. get: function () { return this.control ? this.control.pending : null; },
  308. enumerable: true,
  309. configurable: true
  310. });
  311. Object.defineProperty(AbstractControlDirective.prototype, "disabled", {
  312. /**
  313. * @description
  314. * Reports whether the control is disabled, meaning that the control is disabled
  315. * in the UI and is exempt from validation checks and excluded from aggregate
  316. * values of ancestor controls. If the control is not present, null is returned.
  317. */
  318. get: function () { return this.control ? this.control.disabled : null; },
  319. enumerable: true,
  320. configurable: true
  321. });
  322. Object.defineProperty(AbstractControlDirective.prototype, "enabled", {
  323. /**
  324. * @description
  325. * Reports whether the control is enabled, meaning that the control is included in ancestor
  326. * calculations of validity or value. If the control is not present, null is returned.
  327. */
  328. get: function () { return this.control ? this.control.enabled : null; },
  329. enumerable: true,
  330. configurable: true
  331. });
  332. Object.defineProperty(AbstractControlDirective.prototype, "errors", {
  333. /**
  334. * @description
  335. * Reports the control's validation errors. If the control is not present, null is returned.
  336. */
  337. get: function () { return this.control ? this.control.errors : null; },
  338. enumerable: true,
  339. configurable: true
  340. });
  341. Object.defineProperty(AbstractControlDirective.prototype, "pristine", {
  342. /**
  343. * @description
  344. * Reports whether the control is pristine, meaning that the user has not yet changed
  345. * the value in the UI. If the control is not present, null is returned.
  346. */
  347. get: function () { return this.control ? this.control.pristine : null; },
  348. enumerable: true,
  349. configurable: true
  350. });
  351. Object.defineProperty(AbstractControlDirective.prototype, "dirty", {
  352. /**
  353. * @description
  354. * Reports whether the control is dirty, meaning that the user has changed
  355. * the value in the UI. If the control is not present, null is returned.
  356. */
  357. get: function () { return this.control ? this.control.dirty : null; },
  358. enumerable: true,
  359. configurable: true
  360. });
  361. Object.defineProperty(AbstractControlDirective.prototype, "touched", {
  362. /**
  363. * @description
  364. * Reports whether the control is touched, meaning that the user has triggered
  365. * a `blur` event on it. If the control is not present, null is returned.
  366. */
  367. get: function () { return this.control ? this.control.touched : null; },
  368. enumerable: true,
  369. configurable: true
  370. });
  371. Object.defineProperty(AbstractControlDirective.prototype, "status", {
  372. /**
  373. * @description
  374. * Reports the validation status of the control. Possible values include:
  375. * 'VALID', 'INVALID', 'DISABLED', and 'PENDING'.
  376. * If the control is not present, null is returned.
  377. */
  378. get: function () { return this.control ? this.control.status : null; },
  379. enumerable: true,
  380. configurable: true
  381. });
  382. Object.defineProperty(AbstractControlDirective.prototype, "untouched", {
  383. /**
  384. * @description
  385. * Reports whether the control is untouched, meaning that the user has not yet triggered
  386. * a `blur` event on it. If the control is not present, null is returned.
  387. */
  388. get: function () { return this.control ? this.control.untouched : null; },
  389. enumerable: true,
  390. configurable: true
  391. });
  392. Object.defineProperty(AbstractControlDirective.prototype, "statusChanges", {
  393. /**
  394. * @description
  395. * Returns a multicasting observable that emits a validation status whenever it is
  396. * calculated for the control. If the control is not present, null is returned.
  397. */
  398. get: function () {
  399. return this.control ? this.control.statusChanges : null;
  400. },
  401. enumerable: true,
  402. configurable: true
  403. });
  404. Object.defineProperty(AbstractControlDirective.prototype, "valueChanges", {
  405. /**
  406. * @description
  407. * Returns a multicasting observable of value changes for the control that emits every time the
  408. * value of the control changes in the UI or programmatically.
  409. * If the control is not present, null is returned.
  410. */
  411. get: function () {
  412. return this.control ? this.control.valueChanges : null;
  413. },
  414. enumerable: true,
  415. configurable: true
  416. });
  417. Object.defineProperty(AbstractControlDirective.prototype, "path", {
  418. /**
  419. * @description
  420. * Returns an array that represents the path from the top-level form to this control.
  421. * Each index is the string name of the control on that level.
  422. */
  423. get: function () { return null; },
  424. enumerable: true,
  425. configurable: true
  426. });
  427. /**
  428. * @description
  429. * Resets the control with the provided value if the control is present.
  430. */
  431. AbstractControlDirective.prototype.reset = function (value) {
  432. if (value === void 0) { value = undefined; }
  433. if (this.control)
  434. this.control.reset(value);
  435. };
  436. /**
  437. * @description
  438. * Reports whether the control with the given path has the error specified.
  439. *
  440. * @param errorCode The code of the error to check
  441. * @param path A list of control names that designates how to move from the current control
  442. * to the control that should be queried for errors.
  443. *
  444. * @usageNotes
  445. * For example, for the following `FormGroup`:
  446. *
  447. * ```
  448. * form = new FormGroup({
  449. * address: new FormGroup({ street: new FormControl() })
  450. * });
  451. * ```
  452. *
  453. * The path to the 'street' control from the root form would be 'address' -> 'street'.
  454. *
  455. * It can be provided to this method in one of two formats:
  456. *
  457. * 1. An array of string control names, e.g. `['address', 'street']`
  458. * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
  459. *
  460. * If no path is given, this method checks for the error on the current control.
  461. *
  462. * @returns whether the given error is present in the control at the given path.
  463. *
  464. * If the control is not present, false is returned.
  465. */
  466. AbstractControlDirective.prototype.hasError = function (errorCode, path) {
  467. return this.control ? this.control.hasError(errorCode, path) : false;
  468. };
  469. /**
  470. * @description
  471. * Reports error data for the control with the given path.
  472. *
  473. * @param errorCode The code of the error to check
  474. * @param path A list of control names that designates how to move from the current control
  475. * to the control that should be queried for errors.
  476. *
  477. * @usageNotes
  478. * For example, for the following `FormGroup`:
  479. *
  480. * ```
  481. * form = new FormGroup({
  482. * address: new FormGroup({ street: new FormControl() })
  483. * });
  484. * ```
  485. *
  486. * The path to the 'street' control from the root form would be 'address' -> 'street'.
  487. *
  488. * It can be provided to this method in one of two formats:
  489. *
  490. * 1. An array of string control names, e.g. `['address', 'street']`
  491. * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
  492. *
  493. * @returns error data for that particular error. If the control or error is not present,
  494. * null is returned.
  495. */
  496. AbstractControlDirective.prototype.getError = function (errorCode, path) {
  497. return this.control ? this.control.getError(errorCode, path) : null;
  498. };
  499. return AbstractControlDirective;
  500. }());
  501. /**
  502. * @license
  503. * Copyright Google Inc. All Rights Reserved.
  504. *
  505. * Use of this source code is governed by an MIT-style license that can be
  506. * found in the LICENSE file at https://angular.io/license
  507. */
  508. /**
  509. * @description
  510. * A base class for directives that contain multiple registered instances of `NgControl`.
  511. * Only used by the forms module.
  512. *
  513. * @publicApi
  514. */
  515. var ControlContainer = /** @class */ (function (_super) {
  516. __extends(ControlContainer, _super);
  517. function ControlContainer() {
  518. return _super !== null && _super.apply(this, arguments) || this;
  519. }
  520. Object.defineProperty(ControlContainer.prototype, "formDirective", {
  521. /**
  522. * @description
  523. * The top-level form directive for the control.
  524. */
  525. get: function () { return null; },
  526. enumerable: true,
  527. configurable: true
  528. });
  529. Object.defineProperty(ControlContainer.prototype, "path", {
  530. /**
  531. * @description
  532. * The path to this group.
  533. */
  534. get: function () { return null; },
  535. enumerable: true,
  536. configurable: true
  537. });
  538. return ControlContainer;
  539. }(AbstractControlDirective));
  540. /**
  541. * @license
  542. * Copyright Google Inc. All Rights Reserved.
  543. *
  544. * Use of this source code is governed by an MIT-style license that can be
  545. * found in the LICENSE file at https://angular.io/license
  546. */
  547. function unimplemented() {
  548. throw new Error('unimplemented');
  549. }
  550. /**
  551. * @description
  552. * A base class that all control `FormControl`-based directives extend. It binds a `FormControl`
  553. * object to a DOM element.
  554. *
  555. * @publicApi
  556. */
  557. var NgControl = /** @class */ (function (_super) {
  558. __extends(NgControl, _super);
  559. function NgControl() {
  560. var _this = _super !== null && _super.apply(this, arguments) || this;
  561. /**
  562. * @description
  563. * The parent form for the control.
  564. *
  565. * @internal
  566. */
  567. _this._parent = null;
  568. /**
  569. * @description
  570. * The name for the control
  571. */
  572. _this.name = null;
  573. /**
  574. * @description
  575. * The value accessor for the control
  576. */
  577. _this.valueAccessor = null;
  578. /**
  579. * @description
  580. * The uncomposed array of synchronous validators for the control
  581. *
  582. * @internal
  583. */
  584. _this._rawValidators = [];
  585. /**
  586. * @description
  587. * The uncomposed array of async validators for the control
  588. *
  589. * @internal
  590. */
  591. _this._rawAsyncValidators = [];
  592. return _this;
  593. }
  594. Object.defineProperty(NgControl.prototype, "validator", {
  595. /**
  596. * @description
  597. * The registered synchronous validator function for the control
  598. *
  599. * @throws An exception that this method is not implemented
  600. */
  601. get: function () { return unimplemented(); },
  602. enumerable: true,
  603. configurable: true
  604. });
  605. Object.defineProperty(NgControl.prototype, "asyncValidator", {
  606. /**
  607. * @description
  608. * The registered async validator function for the control
  609. *
  610. * @throws An exception that this method is not implemented
  611. */
  612. get: function () { return unimplemented(); },
  613. enumerable: true,
  614. configurable: true
  615. });
  616. return NgControl;
  617. }(AbstractControlDirective));
  618. /**
  619. * @license
  620. * Copyright Google Inc. All Rights Reserved.
  621. *
  622. * Use of this source code is governed by an MIT-style license that can be
  623. * found in the LICENSE file at https://angular.io/license
  624. */
  625. var AbstractControlStatus = /** @class */ (function () {
  626. function AbstractControlStatus(cd) {
  627. this._cd = cd;
  628. }
  629. Object.defineProperty(AbstractControlStatus.prototype, "ngClassUntouched", {
  630. get: function () { return this._cd.control ? this._cd.control.untouched : false; },
  631. enumerable: true,
  632. configurable: true
  633. });
  634. Object.defineProperty(AbstractControlStatus.prototype, "ngClassTouched", {
  635. get: function () { return this._cd.control ? this._cd.control.touched : false; },
  636. enumerable: true,
  637. configurable: true
  638. });
  639. Object.defineProperty(AbstractControlStatus.prototype, "ngClassPristine", {
  640. get: function () { return this._cd.control ? this._cd.control.pristine : false; },
  641. enumerable: true,
  642. configurable: true
  643. });
  644. Object.defineProperty(AbstractControlStatus.prototype, "ngClassDirty", {
  645. get: function () { return this._cd.control ? this._cd.control.dirty : false; },
  646. enumerable: true,
  647. configurable: true
  648. });
  649. Object.defineProperty(AbstractControlStatus.prototype, "ngClassValid", {
  650. get: function () { return this._cd.control ? this._cd.control.valid : false; },
  651. enumerable: true,
  652. configurable: true
  653. });
  654. Object.defineProperty(AbstractControlStatus.prototype, "ngClassInvalid", {
  655. get: function () { return this._cd.control ? this._cd.control.invalid : false; },
  656. enumerable: true,
  657. configurable: true
  658. });
  659. Object.defineProperty(AbstractControlStatus.prototype, "ngClassPending", {
  660. get: function () { return this._cd.control ? this._cd.control.pending : false; },
  661. enumerable: true,
  662. configurable: true
  663. });
  664. return AbstractControlStatus;
  665. }());
  666. var ngControlStatusHost = {
  667. '[class.ng-untouched]': 'ngClassUntouched',
  668. '[class.ng-touched]': 'ngClassTouched',
  669. '[class.ng-pristine]': 'ngClassPristine',
  670. '[class.ng-dirty]': 'ngClassDirty',
  671. '[class.ng-valid]': 'ngClassValid',
  672. '[class.ng-invalid]': 'ngClassInvalid',
  673. '[class.ng-pending]': 'ngClassPending',
  674. };
  675. /**
  676. * @description
  677. * Directive automatically applied to Angular form controls that sets CSS classes
  678. * based on control status.
  679. *
  680. * @usageNotes
  681. *
  682. * ### CSS classes applied
  683. *
  684. * The following classes are applied as the properties become true:
  685. *
  686. * * ng-valid
  687. * * ng-invalid
  688. * * ng-pending
  689. * * ng-pristine
  690. * * ng-dirty
  691. * * ng-untouched
  692. * * ng-touched
  693. *
  694. * @ngModule ReactiveFormsModule
  695. * @ngModule FormsModule
  696. * @publicApi
  697. */
  698. var NgControlStatus = /** @class */ (function (_super) {
  699. __extends(NgControlStatus, _super);
  700. function NgControlStatus(cd) {
  701. return _super.call(this, cd) || this;
  702. }
  703. NgControlStatus = __decorate([
  704. Directive({ selector: '[formControlName],[ngModel],[formControl]', host: ngControlStatusHost }),
  705. __param(0, Self()),
  706. __metadata("design:paramtypes", [NgControl])
  707. ], NgControlStatus);
  708. return NgControlStatus;
  709. }(AbstractControlStatus));
  710. /**
  711. * @description
  712. * Directive automatically applied to Angular form groups that sets CSS classes
  713. * based on control status (valid/invalid/dirty/etc).
  714. *
  715. * @see `NgControlStatus`
  716. *
  717. * @ngModule ReactiveFormsModule
  718. * @ngModule FormsModule
  719. * @publicApi
  720. */
  721. var NgControlStatusGroup = /** @class */ (function (_super) {
  722. __extends(NgControlStatusGroup, _super);
  723. function NgControlStatusGroup(cd) {
  724. return _super.call(this, cd) || this;
  725. }
  726. NgControlStatusGroup = __decorate([
  727. Directive({
  728. selector: '[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]',
  729. host: ngControlStatusHost
  730. }),
  731. __param(0, Self()),
  732. __metadata("design:paramtypes", [ControlContainer])
  733. ], NgControlStatusGroup);
  734. return NgControlStatusGroup;
  735. }(AbstractControlStatus));
  736. /**
  737. * @license
  738. * Copyright Google Inc. All Rights Reserved.
  739. *
  740. * Use of this source code is governed by an MIT-style license that can be
  741. * found in the LICENSE file at https://angular.io/license
  742. */
  743. function isEmptyInputValue(value) {
  744. // we don't check for string here so it also works with arrays
  745. return value == null || value.length === 0;
  746. }
  747. /**
  748. * @description
  749. * An `InjectionToken` for registering additional synchronous validators used with `AbstractControl`s.
  750. *
  751. * @see `NG_ASYNC_VALIDATORS`
  752. *
  753. * @usageNotes
  754. *
  755. * ### Providing a custom validator
  756. *
  757. * The following example registers a custom validator directive. Adding the validator to the
  758. * existing collection of validators requires the `multi: true` option.
  759. *
  760. * ```typescript
  761. * @Directive({
  762. * selector: '[customValidator]',
  763. * providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
  764. * })
  765. * class CustomValidatorDirective implements Validator {
  766. * validate(control: AbstractControl): ValidationErrors | null {
  767. * return { 'custom': true };
  768. * }
  769. * }
  770. * ```
  771. *
  772. * @publicApi
  773. */
  774. var NG_VALIDATORS = new InjectionToken('NgValidators');
  775. /**
  776. * @description
  777. * An `InjectionToken` for registering additional asynchronous validators used with `AbstractControl`s.
  778. *
  779. * @see `NG_VALIDATORS`
  780. *
  781. * @publicApi
  782. */
  783. var NG_ASYNC_VALIDATORS = new InjectionToken('NgAsyncValidators');
  784. var EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;
  785. /**
  786. * @description
  787. * Provides a set of built-in validators that can be used by form controls.
  788. *
  789. * A validator is a function that processes a `FormControl` or collection of
  790. * controls and returns an error map or null. A null map means that validation has passed.
  791. *
  792. * @see [Form Validation](/guide/form-validation)
  793. *
  794. * @publicApi
  795. */
  796. var Validators = /** @class */ (function () {
  797. function Validators() {
  798. }
  799. /**
  800. * @description
  801. * Validator that requires the control's value to be greater than or equal to the provided number.
  802. * The validator exists only as a function and not as a directive.
  803. *
  804. * @usageNotes
  805. *
  806. * ### Validate against a minimum of 3
  807. *
  808. * ```typescript
  809. * const control = new FormControl(2, Validators.min(3));
  810. *
  811. * console.log(control.errors); // {min: {min: 3, actual: 2}}
  812. * ```
  813. *
  814. * @returns A validator function that returns an error map with the
  815. * `min` property if the validation check fails, otherwise `null`.
  816. *
  817. */
  818. Validators.min = function (min) {
  819. return function (control) {
  820. if (isEmptyInputValue(control.value) || isEmptyInputValue(min)) {
  821. return null; // don't validate empty values to allow optional controls
  822. }
  823. var value = parseFloat(control.value);
  824. // Controls with NaN values after parsing should be treated as not having a
  825. // minimum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-min
  826. return !isNaN(value) && value < min ? { 'min': { 'min': min, 'actual': control.value } } : null;
  827. };
  828. };
  829. /**
  830. * @description
  831. * Validator that requires the control's value to be less than or equal to the provided number.
  832. * The validator exists only as a function and not as a directive.
  833. *
  834. * @usageNotes
  835. *
  836. * ### Validate against a maximum of 15
  837. *
  838. * ```typescript
  839. * const control = new FormControl(16, Validators.max(15));
  840. *
  841. * console.log(control.errors); // {max: {max: 15, actual: 16}}
  842. * ```
  843. *
  844. * @returns A validator function that returns an error map with the
  845. * `max` property if the validation check fails, otherwise `null`.
  846. *
  847. */
  848. Validators.max = function (max) {
  849. return function (control) {
  850. if (isEmptyInputValue(control.value) || isEmptyInputValue(max)) {
  851. return null; // don't validate empty values to allow optional controls
  852. }
  853. var value = parseFloat(control.value);
  854. // Controls with NaN values after parsing should be treated as not having a
  855. // maximum, per the HTML forms spec: https://www.w3.org/TR/html5/forms.html#attr-input-max
  856. return !isNaN(value) && value > max ? { 'max': { 'max': max, 'actual': control.value } } : null;
  857. };
  858. };
  859. /**
  860. * @description
  861. * Validator that requires the control have a non-empty value.
  862. *
  863. * @usageNotes
  864. *
  865. * ### Validate that the field is non-empty
  866. *
  867. * ```typescript
  868. * const control = new FormControl('', Validators.required);
  869. *
  870. * console.log(control.errors); // {required: true}
  871. * ```
  872. *
  873. * @returns An error map with the `required` property
  874. * if the validation check fails, otherwise `null`.
  875. *
  876. */
  877. Validators.required = function (control) {
  878. return isEmptyInputValue(control.value) ? { 'required': true } : null;
  879. };
  880. /**
  881. * @description
  882. * Validator that requires the control's value be true. This validator is commonly
  883. * used for required checkboxes.
  884. *
  885. * @usageNotes
  886. *
  887. * ### Validate that the field value is true
  888. *
  889. * ```typescript
  890. * const control = new FormControl('', Validators.requiredTrue);
  891. *
  892. * console.log(control.errors); // {required: true}
  893. * ```
  894. *
  895. * @returns An error map that contains the `required` property
  896. * set to `true` if the validation check fails, otherwise `null`.
  897. */
  898. Validators.requiredTrue = function (control) {
  899. return control.value === true ? null : { 'required': true };
  900. };
  901. /**
  902. * @description
  903. * Validator that requires the control's value pass an email validation test.
  904. *
  905. * @usageNotes
  906. *
  907. * ### Validate that the field matches a valid email pattern
  908. *
  909. * ```typescript
  910. * const control = new FormControl('bad@', Validators.email);
  911. *
  912. * console.log(control.errors); // {email: true}
  913. * ```
  914. *
  915. * @returns An error map with the `email` property
  916. * if the validation check fails, otherwise `null`.
  917. *
  918. */
  919. Validators.email = function (control) {
  920. if (isEmptyInputValue(control.value)) {
  921. return null; // don't validate empty values to allow optional controls
  922. }
  923. return EMAIL_REGEXP.test(control.value) ? null : { 'email': true };
  924. };
  925. /**
  926. * @description
  927. * Validator that requires the length of the control's value to be greater than or equal
  928. * to the provided minimum length. This validator is also provided by default if you use the
  929. * the HTML5 `minlength` attribute.
  930. *
  931. * @usageNotes
  932. *
  933. * ### Validate that the field has a minimum of 3 characters
  934. *
  935. * ```typescript
  936. * const control = new FormControl('ng', Validators.minLength(3));
  937. *
  938. * console.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}}
  939. * ```
  940. *
  941. * ```html
  942. * <input minlength="5">
  943. * ```
  944. *
  945. * @returns A validator function that returns an error map with the
  946. * `minlength` if the validation check fails, otherwise `null`.
  947. */
  948. Validators.minLength = function (minLength) {
  949. return function (control) {
  950. if (isEmptyInputValue(control.value)) {
  951. return null; // don't validate empty values to allow optional controls
  952. }
  953. var length = control.value ? control.value.length : 0;
  954. return length < minLength ?
  955. { 'minlength': { 'requiredLength': minLength, 'actualLength': length } } :
  956. null;
  957. };
  958. };
  959. /**
  960. * @description
  961. * Validator that requires the length of the control's value to be less than or equal
  962. * to the provided maximum length. This validator is also provided by default if you use the
  963. * the HTML5 `maxlength` attribute.
  964. *
  965. * @usageNotes
  966. *
  967. * ### Validate that the field has maximum of 5 characters
  968. *
  969. * ```typescript
  970. * const control = new FormControl('Angular', Validators.maxLength(5));
  971. *
  972. * console.log(control.errors); // {maxlength: {requiredLength: 5, actualLength: 7}}
  973. * ```
  974. *
  975. * ```html
  976. * <input maxlength="5">
  977. * ```
  978. *
  979. * @returns A validator function that returns an error map with the
  980. * `maxlength` property if the validation check fails, otherwise `null`.
  981. */
  982. Validators.maxLength = function (maxLength) {
  983. return function (control) {
  984. var length = control.value ? control.value.length : 0;
  985. return length > maxLength ?
  986. { 'maxlength': { 'requiredLength': maxLength, 'actualLength': length } } :
  987. null;
  988. };
  989. };
  990. /**
  991. * @description
  992. * Validator that requires the control's value to match a regex pattern. This validator is also
  993. * provided by default if you use the HTML5 `pattern` attribute.
  994. *
  995. * Note that if a Regexp is provided, the Regexp is used as is to test the values. On the other
  996. * hand, if a string is passed, the `^` character is prepended and the `$` character is
  997. * appended to the provided string (if not already present), and the resulting regular
  998. * expression is used to test the values.
  999. *
  1000. * @usageNotes
  1001. *
  1002. * ### Validate that the field only contains letters or spaces
  1003. *
  1004. * ```typescript
  1005. * const control = new FormControl('1', Validators.pattern('[a-zA-Z ]*'));
  1006. *
  1007. * console.log(control.errors); // {pattern: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'}}
  1008. * ```
  1009. *
  1010. * ```html
  1011. * <input pattern="[a-zA-Z ]*">
  1012. * ```
  1013. *
  1014. * @returns A validator function that returns an error map with the
  1015. * `pattern` property if the validation check fails, otherwise `null`.
  1016. */
  1017. Validators.pattern = function (pattern) {
  1018. if (!pattern)
  1019. return Validators.nullValidator;
  1020. var regex;
  1021. var regexStr;
  1022. if (typeof pattern === 'string') {
  1023. regexStr = '';
  1024. if (pattern.charAt(0) !== '^')
  1025. regexStr += '^';
  1026. regexStr += pattern;
  1027. if (pattern.charAt(pattern.length - 1) !== '$')
  1028. regexStr += '$';
  1029. regex = new RegExp(regexStr);
  1030. }
  1031. else {
  1032. regexStr = pattern.toString();
  1033. regex = pattern;
  1034. }
  1035. return function (control) {
  1036. if (isEmptyInputValue(control.value)) {
  1037. return null; // don't validate empty values to allow optional controls
  1038. }
  1039. var value = control.value;
  1040. return regex.test(value) ? null :
  1041. { 'pattern': { 'requiredPattern': regexStr, 'actualValue': value } };
  1042. };
  1043. };
  1044. /**
  1045. * @description
  1046. * Validator that performs no operation.
  1047. */
  1048. Validators.nullValidator = function (control) { return null; };
  1049. Validators.compose = function (validators) {
  1050. if (!validators)
  1051. return null;
  1052. var presentValidators = validators.filter(isPresent);
  1053. if (presentValidators.length == 0)
  1054. return null;
  1055. return function (control) {
  1056. return _mergeErrors(_executeValidators(control, presentValidators));
  1057. };
  1058. };
  1059. /**
  1060. * @description
  1061. * Compose multiple async validators into a single function that returns the union
  1062. * of the individual error objects for the provided control.
  1063. *
  1064. * @returns A validator function that returns an error map with the
  1065. * merged error objects of the async validators if the validation check fails, otherwise `null`.
  1066. */
  1067. Validators.composeAsync = function (validators) {
  1068. if (!validators)
  1069. return null;
  1070. var presentValidators = validators.filter(isPresent);
  1071. if (presentValidators.length == 0)
  1072. return null;
  1073. return function (control) {
  1074. var observables = _executeAsyncValidators(control, presentValidators).map(toObservable);
  1075. return forkJoin(observables).pipe(map(_mergeErrors));
  1076. };
  1077. };
  1078. return Validators;
  1079. }());
  1080. function isPresent(o) {
  1081. return o != null;
  1082. }
  1083. function toObservable(r) {
  1084. var obs = ɵisPromise(r) ? from(r) : r;
  1085. if (!(ɵisObservable(obs))) {
  1086. throw new Error("Expected validator to return Promise or Observable.");
  1087. }
  1088. return obs;
  1089. }
  1090. function _executeValidators(control, validators) {
  1091. return validators.map(function (v) { return v(control); });
  1092. }
  1093. function _executeAsyncValidators(control, validators) {
  1094. return validators.map(function (v) { return v(control); });
  1095. }
  1096. function _mergeErrors(arrayOfErrors) {
  1097. var res = arrayOfErrors.reduce(function (res, errors) {
  1098. return errors != null ? __assign({}, res, errors) : res;
  1099. }, {});
  1100. return Object.keys(res).length === 0 ? null : res;
  1101. }
  1102. /**
  1103. * @license
  1104. * Copyright Google Inc. All Rights Reserved.
  1105. *
  1106. * Use of this source code is governed by an MIT-style license that can be
  1107. * found in the LICENSE file at https://angular.io/license
  1108. */
  1109. function normalizeValidator(validator) {
  1110. if (validator.validate) {
  1111. return function (c) { return validator.validate(c); };
  1112. }
  1113. else {
  1114. return validator;
  1115. }
  1116. }
  1117. function normalizeAsyncValidator(validator) {
  1118. if (validator.validate) {
  1119. return function (c) { return validator.validate(c); };
  1120. }
  1121. else {
  1122. return validator;
  1123. }
  1124. }
  1125. /**
  1126. * @license
  1127. * Copyright Google Inc. All Rights Reserved.
  1128. *
  1129. * Use of this source code is governed by an MIT-style license that can be
  1130. * found in the LICENSE file at https://angular.io/license
  1131. */
  1132. var NUMBER_VALUE_ACCESSOR = {
  1133. provide: NG_VALUE_ACCESSOR,
  1134. useExisting: forwardRef(function () { return NumberValueAccessor; }),
  1135. multi: true
  1136. };
  1137. /**
  1138. * @description
  1139. * The `ControlValueAccessor` for writing a number value and listening to number input changes.
  1140. * The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
  1141. * directives.
  1142. *
  1143. * @usageNotes
  1144. *
  1145. * ### Using a number input with a reactive form.
  1146. *
  1147. * The following example shows how to use a number input with a reactive form.
  1148. *
  1149. * ```ts
  1150. * const totalCountControl = new FormControl();
  1151. * ```
  1152. *
  1153. * ```
  1154. * <input type="number" [formControl]="totalCountControl">
  1155. * ```
  1156. *
  1157. * @ngModule ReactiveFormsModule
  1158. * @ngModule FormsModule
  1159. * @publicApi
  1160. */
  1161. var NumberValueAccessor = /** @class */ (function () {
  1162. function NumberValueAccessor(_renderer, _elementRef) {
  1163. this._renderer = _renderer;
  1164. this._elementRef = _elementRef;
  1165. /**
  1166. * @description
  1167. * The registered callback function called when a change or input event occurs on the input
  1168. * element.
  1169. */
  1170. this.onChange = function (_) { };
  1171. /**
  1172. * @description
  1173. * The registered callback function called when a blur event occurs on the input element.
  1174. */
  1175. this.onTouched = function () { };
  1176. }
  1177. /**
  1178. * Sets the "value" property on the input element.
  1179. *
  1180. * @param value The checked value
  1181. */
  1182. NumberValueAccessor.prototype.writeValue = function (value) {
  1183. // The value needs to be normalized for IE9, otherwise it is set to 'null' when null
  1184. var normalizedValue = value == null ? '' : value;
  1185. this._renderer.setProperty(this._elementRef.nativeElement, 'value', normalizedValue);
  1186. };
  1187. /**
  1188. * @description
  1189. * Registers a function called when the control value changes.
  1190. *
  1191. * @param fn The callback function
  1192. */
  1193. NumberValueAccessor.prototype.registerOnChange = function (fn) {
  1194. this.onChange = function (value) { fn(value == '' ? null : parseFloat(value)); };
  1195. };
  1196. /**
  1197. * @description
  1198. * Registers a function called when the control is touched.
  1199. *
  1200. * @param fn The callback function
  1201. */
  1202. NumberValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
  1203. /**
  1204. * Sets the "disabled" property on the input element.
  1205. *
  1206. * @param isDisabled The disabled value
  1207. */
  1208. NumberValueAccessor.prototype.setDisabledState = function (isDisabled) {
  1209. this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  1210. };
  1211. NumberValueAccessor = __decorate([
  1212. Directive({
  1213. selector: 'input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]',
  1214. host: {
  1215. '(change)': 'onChange($event.target.value)',
  1216. '(input)': 'onChange($event.target.value)',
  1217. '(blur)': 'onTouched()'
  1218. },
  1219. providers: [NUMBER_VALUE_ACCESSOR]
  1220. }),
  1221. __metadata("design:paramtypes", [Renderer2, ElementRef])
  1222. ], NumberValueAccessor);
  1223. return NumberValueAccessor;
  1224. }());
  1225. /**
  1226. * @license
  1227. * Copyright Google Inc. All Rights Reserved.
  1228. *
  1229. * Use of this source code is governed by an MIT-style license that can be
  1230. * found in the LICENSE file at https://angular.io/license
  1231. */
  1232. var RADIO_VALUE_ACCESSOR = {
  1233. provide: NG_VALUE_ACCESSOR,
  1234. useExisting: forwardRef(function () { return RadioControlValueAccessor; }),
  1235. multi: true
  1236. };
  1237. /**
  1238. * @description
  1239. * Class used by Angular to track radio buttons. For internal use only.
  1240. */
  1241. var RadioControlRegistry = /** @class */ (function () {
  1242. function RadioControlRegistry() {
  1243. this._accessors = [];
  1244. }
  1245. /**
  1246. * @description
  1247. * Adds a control to the internal registry. For internal use only.
  1248. */
  1249. RadioControlRegistry.prototype.add = function (control, accessor) {
  1250. this._accessors.push([control, accessor]);
  1251. };
  1252. /**
  1253. * @description
  1254. * Removes a control from the internal registry. For internal use only.
  1255. */
  1256. RadioControlRegistry.prototype.remove = function (accessor) {
  1257. for (var i = this._accessors.length - 1; i >= 0; --i) {
  1258. if (this._accessors[i][1] === accessor) {
  1259. this._accessors.splice(i, 1);
  1260. return;
  1261. }
  1262. }
  1263. };
  1264. /**
  1265. * @description
  1266. * Selects a radio button. For internal use only.
  1267. */
  1268. RadioControlRegistry.prototype.select = function (accessor) {
  1269. var _this = this;
  1270. this._accessors.forEach(function (c) {
  1271. if (_this._isSameGroup(c, accessor) && c[1] !== accessor) {
  1272. c[1].fireUncheck(accessor.value);
  1273. }
  1274. });
  1275. };
  1276. RadioControlRegistry.prototype._isSameGroup = function (controlPair, accessor) {
  1277. if (!controlPair[0].control)
  1278. return false;
  1279. return controlPair[0]._parent === accessor._control._parent &&
  1280. controlPair[1].name === accessor.name;
  1281. };
  1282. RadioControlRegistry = __decorate([
  1283. Injectable()
  1284. ], RadioControlRegistry);
  1285. return RadioControlRegistry;
  1286. }());
  1287. /**
  1288. * @description
  1289. * The `ControlValueAccessor` for writing radio control values and listening to radio control
  1290. * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
  1291. * `NgModel` directives.
  1292. *
  1293. * @usageNotes
  1294. *
  1295. * ### Using radio buttons with reactive form directives
  1296. *
  1297. * The follow example shows how to use radio buttons in a reactive form. When using radio buttons in
  1298. * a reactive form, radio buttons in the same group should have the same `formControlName`.
  1299. * Providing a `name` attribute is optional.
  1300. *
  1301. * {@example forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts region='Reactive'}
  1302. *
  1303. * @ngModule ReactiveFormsModule
  1304. * @ngModule FormsModule
  1305. * @publicApi
  1306. */
  1307. var RadioControlValueAccessor = /** @class */ (function () {
  1308. function RadioControlValueAccessor(_renderer, _elementRef, _registry, _injector) {
  1309. this._renderer = _renderer;
  1310. this._elementRef = _elementRef;
  1311. this._registry = _registry;
  1312. this._injector = _injector;
  1313. /**
  1314. * @description
  1315. * The registered callback function called when a change event occurs on the input element.
  1316. */
  1317. this.onChange = function () { };
  1318. /**
  1319. * @description
  1320. * The registered callback function called when a blur event occurs on the input element.
  1321. */
  1322. this.onTouched = function () { };
  1323. }
  1324. /**
  1325. * @description
  1326. * A lifecycle method called when the directive is initialized. For internal use only.
  1327. *
  1328. * @param changes A object of key/value pairs for the set of changed inputs.
  1329. */
  1330. RadioControlValueAccessor.prototype.ngOnInit = function () {
  1331. this._control = this._injector.get(NgControl);
  1332. this._checkName();
  1333. this._registry.add(this._control, this);
  1334. };
  1335. /**
  1336. * @description
  1337. * Lifecycle method called before the directive's instance is destroyed. For internal use only.
  1338. *
  1339. * @param changes A object of key/value pairs for the set of changed inputs.
  1340. */
  1341. RadioControlValueAccessor.prototype.ngOnDestroy = function () { this._registry.remove(this); };
  1342. /**
  1343. * @description
  1344. * Sets the "checked" property value on the radio input element.
  1345. *
  1346. * @param value The checked value
  1347. */
  1348. RadioControlValueAccessor.prototype.writeValue = function (value) {
  1349. this._state = value === this.value;
  1350. this._renderer.setProperty(this._elementRef.nativeElement, 'checked', this._state);
  1351. };
  1352. /**
  1353. * @description
  1354. * Registers a function called when the control value changes.
  1355. *
  1356. * @param fn The callback function
  1357. */
  1358. RadioControlValueAccessor.prototype.registerOnChange = function (fn) {
  1359. var _this = this;
  1360. this._fn = fn;
  1361. this.onChange = function () {
  1362. fn(_this.value);
  1363. _this._registry.select(_this);
  1364. };
  1365. };
  1366. /**
  1367. * Sets the "value" on the radio input element and unchecks it.
  1368. *
  1369. * @param value
  1370. */
  1371. RadioControlValueAccessor.prototype.fireUncheck = function (value) { this.writeValue(value); };
  1372. /**
  1373. * @description
  1374. * Registers a function called when the control is touched.
  1375. *
  1376. * @param fn The callback function
  1377. */
  1378. RadioControlValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
  1379. /**
  1380. * Sets the "disabled" property on the input element.
  1381. *
  1382. * @param isDisabled The disabled value
  1383. */
  1384. RadioControlValueAccessor.prototype.setDisabledState = function (isDisabled) {
  1385. this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  1386. };
  1387. RadioControlValueAccessor.prototype._checkName = function () {
  1388. if (this.name && this.formControlName && this.name !== this.formControlName) {
  1389. this._throwNameError();
  1390. }
  1391. if (!this.name && this.formControlName)
  1392. this.name = this.formControlName;
  1393. };
  1394. RadioControlValueAccessor.prototype._throwNameError = function () {
  1395. throw new Error("\n If you define both a name and a formControlName attribute on your radio button, their values\n must match. Ex: <input type=\"radio\" formControlName=\"food\" name=\"food\">\n ");
  1396. };
  1397. __decorate([
  1398. Input(),
  1399. __metadata("design:type", String)
  1400. ], RadioControlValueAccessor.prototype, "name", void 0);
  1401. __decorate([
  1402. Input(),
  1403. __metadata("design:type", String)
  1404. ], RadioControlValueAccessor.prototype, "formControlName", void 0);
  1405. __decorate([
  1406. Input(),
  1407. __metadata("design:type", Object)
  1408. ], RadioControlValueAccessor.prototype, "value", void 0);
  1409. RadioControlValueAccessor = __decorate([
  1410. Directive({
  1411. selector: 'input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]',
  1412. host: { '(change)': 'onChange()', '(blur)': 'onTouched()' },
  1413. providers: [RADIO_VALUE_ACCESSOR]
  1414. }),
  1415. __metadata("design:paramtypes", [Renderer2, ElementRef,
  1416. RadioControlRegistry, Injector])
  1417. ], RadioControlValueAccessor);
  1418. return RadioControlValueAccessor;
  1419. }());
  1420. /**
  1421. * @license
  1422. * Copyright Google Inc. All Rights Reserved.
  1423. *
  1424. * Use of this source code is governed by an MIT-style license that can be
  1425. * found in the LICENSE file at https://angular.io/license
  1426. */
  1427. var RANGE_VALUE_ACCESSOR = {
  1428. provide: NG_VALUE_ACCESSOR,
  1429. useExisting: forwardRef(function () { return RangeValueAccessor; }),
  1430. multi: true
  1431. };
  1432. /**
  1433. * @description
  1434. * The `ControlValueAccessor` for writing a range value and listening to range input changes.
  1435. * The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
  1436. * directives.
  1437. *
  1438. * @usageNotes
  1439. *
  1440. * ### Using a range input with a reactive form
  1441. *
  1442. * The following example shows how to use a range input with a reactive form.
  1443. *
  1444. * ```ts
  1445. * const ageControl = new FormControl();
  1446. * ```
  1447. *
  1448. * ```
  1449. * <input type="range" [formControl]="ageControl">
  1450. * ```
  1451. *
  1452. * @ngModule ReactiveFormsModule
  1453. * @ngModule FormsModule
  1454. * @publicApi
  1455. */
  1456. var RangeValueAccessor = /** @class */ (function () {
  1457. function RangeValueAccessor(_renderer, _elementRef) {
  1458. this._renderer = _renderer;
  1459. this._elementRef = _elementRef;
  1460. /**
  1461. * @description
  1462. * The registered callback function called when a change or input event occurs on the input
  1463. * element.
  1464. */
  1465. this.onChange = function (_) { };
  1466. /**
  1467. * @description
  1468. * The registered callback function called when a blur event occurs on the input element.
  1469. */
  1470. this.onTouched = function () { };
  1471. }
  1472. /**
  1473. * Sets the "value" property on the input element.
  1474. *
  1475. * @param value The checked value
  1476. */
  1477. RangeValueAccessor.prototype.writeValue = function (value) {
  1478. this._renderer.setProperty(this._elementRef.nativeElement, 'value', parseFloat(value));
  1479. };
  1480. /**
  1481. * @description
  1482. * Registers a function called when the control value changes.
  1483. *
  1484. * @param fn The callback function
  1485. */
  1486. RangeValueAccessor.prototype.registerOnChange = function (fn) {
  1487. this.onChange = function (value) { fn(value == '' ? null : parseFloat(value)); };
  1488. };
  1489. /**
  1490. * @description
  1491. * Registers a function called when the control is touched.
  1492. *
  1493. * @param fn The callback function
  1494. */
  1495. RangeValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
  1496. /**
  1497. * Sets the "disabled" property on the range input element.
  1498. *
  1499. * @param isDisabled The disabled value
  1500. */
  1501. RangeValueAccessor.prototype.setDisabledState = function (isDisabled) {
  1502. this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  1503. };
  1504. RangeValueAccessor = __decorate([
  1505. Directive({
  1506. selector: 'input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]',
  1507. host: {
  1508. '(change)': 'onChange($event.target.value)',
  1509. '(input)': 'onChange($event.target.value)',
  1510. '(blur)': 'onTouched()'
  1511. },
  1512. providers: [RANGE_VALUE_ACCESSOR]
  1513. }),
  1514. __metadata("design:paramtypes", [Renderer2, ElementRef])
  1515. ], RangeValueAccessor);
  1516. return RangeValueAccessor;
  1517. }());
  1518. /**
  1519. * @license
  1520. * Copyright Google Inc. All Rights Reserved.
  1521. *
  1522. * Use of this source code is governed by an MIT-style license that can be
  1523. * found in the LICENSE file at https://angular.io/license
  1524. */
  1525. var FormErrorExamples = {
  1526. formControlName: "\n <div [formGroup]=\"myGroup\">\n <input formControlName=\"firstName\">\n </div>\n\n In your class:\n\n this.myGroup = new FormGroup({\n firstName: new FormControl()\n });",
  1527. formGroupName: "\n <div [formGroup]=\"myGroup\">\n <div formGroupName=\"person\">\n <input formControlName=\"firstName\">\n </div>\n </div>\n\n In your class:\n\n this.myGroup = new FormGroup({\n person: new FormGroup({ firstName: new FormControl() })\n });",
  1528. formArrayName: "\n <div [formGroup]=\"myGroup\">\n <div formArrayName=\"cities\">\n <div *ngFor=\"let city of cityArray.controls; index as i\">\n <input [formControlName]=\"i\">\n </div>\n </div>\n </div>\n\n In your class:\n\n this.cityArray = new FormArray([new FormControl('SF')]);\n this.myGroup = new FormGroup({\n cities: this.cityArray\n });",
  1529. ngModelGroup: "\n <form>\n <div ngModelGroup=\"person\">\n <input [(ngModel)]=\"person.name\" name=\"firstName\">\n </div>\n </form>",
  1530. ngModelWithFormGroup: "\n <div [formGroup]=\"myGroup\">\n <input formControlName=\"firstName\">\n <input [(ngModel)]=\"showMoreControls\" [ngModelOptions]=\"{standalone: true}\">\n </div>\n "
  1531. };
  1532. /**
  1533. * @license
  1534. * Copyright Google Inc. All Rights Reserved.
  1535. *
  1536. * Use of this source code is governed by an MIT-style license that can be
  1537. * found in the LICENSE file at https://angular.io/license
  1538. */
  1539. var ReactiveErrors = /** @class */ (function () {
  1540. function ReactiveErrors() {
  1541. }
  1542. ReactiveErrors.controlParentException = function () {
  1543. throw new Error("formControlName must be used with a parent formGroup directive. You'll want to add a formGroup\n directive and pass it an existing FormGroup instance (you can create one in your class).\n\n Example:\n\n " + FormErrorExamples.formControlName);
  1544. };
  1545. ReactiveErrors.ngModelGroupException = function () {
  1546. throw new Error("formControlName cannot be used with an ngModelGroup parent. It is only compatible with parents\n that also have a \"form\" prefix: formGroupName, formArrayName, or formGroup.\n\n Option 1: Update the parent to be formGroupName (reactive form strategy)\n\n " + FormErrorExamples.formGroupName + "\n\n Option 2: Use ngModel instead of formControlName (template-driven strategy)\n\n " + FormErrorExamples.ngModelGroup);
  1547. };
  1548. ReactiveErrors.missingFormException = function () {
  1549. throw new Error("formGroup expects a FormGroup instance. Please pass one in.\n\n Example:\n\n " + FormErrorExamples.formControlName);
  1550. };
  1551. ReactiveErrors.groupParentException = function () {
  1552. throw new Error("formGroupName must be used with a parent formGroup directive. You'll want to add a formGroup\n directive and pass it an existing FormGroup instance (you can create one in your class).\n\n Example:\n\n " + FormErrorExamples.formGroupName);
  1553. };
  1554. ReactiveErrors.arrayParentException = function () {
  1555. throw new Error("formArrayName must be used with a parent formGroup directive. You'll want to add a formGroup\n directive and pass it an existing FormGroup instance (you can create one in your class).\n\n Example:\n\n " + FormErrorExamples.formArrayName);
  1556. };
  1557. ReactiveErrors.disabledAttrWarning = function () {
  1558. console.warn("\n It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true\n when you set up this control in your component class, the disabled attribute will actually be set in the DOM for\n you. We recommend using this approach to avoid 'changed after checked' errors.\n \n Example: \n form = new FormGroup({\n first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),\n last: new FormControl('Drew', Validators.required)\n });\n ");
  1559. };
  1560. ReactiveErrors.ngModelWarning = function (directiveName) {
  1561. console.warn("\n It looks like you're using ngModel on the same form field as " + directiveName + ". \n Support for using the ngModel input property and ngModelChange event with \n reactive form directives has been deprecated in Angular v6 and will be removed \n in Angular v7.\n \n For more information on this, see our API docs here:\n https://angular.io/api/forms/" + (directiveName === 'formControl' ? 'FormControlDirective'
  1562. : 'FormControlName') + "#use-with-ngmodel\n ");
  1563. };
  1564. return ReactiveErrors;
  1565. }());
  1566. /**
  1567. * @license
  1568. * Copyright Google Inc. All Rights Reserved.
  1569. *
  1570. * Use of this source code is governed by an MIT-style license that can be
  1571. * found in the LICENSE file at https://angular.io/license
  1572. */
  1573. var SELECT_VALUE_ACCESSOR = {
  1574. provide: NG_VALUE_ACCESSOR,
  1575. useExisting: forwardRef(function () { return SelectControlValueAccessor; }),
  1576. multi: true
  1577. };
  1578. function _buildValueString(id, value) {
  1579. if (id == null)
  1580. return "" + value;
  1581. if (value && typeof value === 'object')
  1582. value = 'Object';
  1583. return (id + ": " + value).slice(0, 50);
  1584. }
  1585. function _extractId(valueString) {
  1586. return valueString.split(':')[0];
  1587. }
  1588. /**
  1589. * @description
  1590. * The `ControlValueAccessor` for writing select control values and listening to select control
  1591. * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and
  1592. * `NgModel` directives.
  1593. *
  1594. * @usageNotes
  1595. *
  1596. * ### Using select controls in a reactive form
  1597. *
  1598. * The following examples show how to use a select control in a reactive form.
  1599. *
  1600. * {@example forms/ts/reactiveSelectControl/reactive_select_control_example.ts region='Component'}
  1601. *
  1602. * ### Using select controls in a template-driven form
  1603. *
  1604. * To use a select in a template-driven form, simply add an `ngModel` and a `name`
  1605. * attribute to the main `<select>` tag.
  1606. *
  1607. * {@example forms/ts/selectControl/select_control_example.ts region='Component'}
  1608. *
  1609. * ### Customizing option selection
  1610. *
  1611. * Angular uses object identity to select option. It's possible for the identities of items
  1612. * to change while the data does not. This can happen, for example, if the items are produced
  1613. * from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the
  1614. * second response will produce objects with different identities.
  1615. *
  1616. * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
  1617. * `compareWith` takes a **function** which has two arguments: `option1` and `option2`.
  1618. * If `compareWith` is given, Angular selects option by the return value of the function.
  1619. *
  1620. * ```ts
  1621. * const selectedCountriesControl = new FormControl();
  1622. * ```
  1623. *
  1624. * ```
  1625. * <select [compareWith]="compareFn" [formControl]="selectedCountriesControl">
  1626. * <option *ngFor="let country of countries" [ngValue]="country">
  1627. * {{country.name}}
  1628. * </option>
  1629. * </select>
  1630. *
  1631. * compareFn(c1: Country, c2: Country): boolean {
  1632. * return c1 && c2 ? c1.id === c2.id : c1 === c2;
  1633. * }
  1634. * ```
  1635. *
  1636. * **Note:** We listen to the 'change' event because 'input' events aren't fired
  1637. * for selects in Firefox and IE:
  1638. * https://bugzilla.mozilla.org/show_bug.cgi?id=1024350
  1639. * https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/
  1640. *
  1641. * @ngModule ReactiveFormsModule
  1642. * @ngModule FormsModule
  1643. * @publicApi
  1644. */
  1645. var SelectControlValueAccessor = /** @class */ (function () {
  1646. function SelectControlValueAccessor(_renderer, _elementRef) {
  1647. this._renderer = _renderer;
  1648. this._elementRef = _elementRef;
  1649. /** @internal */
  1650. this._optionMap = new Map();
  1651. /** @internal */
  1652. this._idCounter = 0;
  1653. /**
  1654. * @description
  1655. * The registered callback function called when a change event occurs on the input element.
  1656. */
  1657. this.onChange = function (_) { };
  1658. /**
  1659. * @description
  1660. * The registered callback function called when a blur event occurs on the input element.
  1661. */
  1662. this.onTouched = function () { };
  1663. this._compareWith = ɵlooseIdentical;
  1664. }
  1665. Object.defineProperty(SelectControlValueAccessor.prototype, "compareWith", {
  1666. /**
  1667. * @description
  1668. * Tracks the option comparison algorithm for tracking identities when
  1669. * checking for changes.
  1670. */
  1671. set: function (fn) {
  1672. if (typeof fn !== 'function') {
  1673. throw new Error("compareWith must be a function, but received " + JSON.stringify(fn));
  1674. }
  1675. this._compareWith = fn;
  1676. },
  1677. enumerable: true,
  1678. configurable: true
  1679. });
  1680. /**
  1681. * Sets the "value" property on the input element. The "selectedIndex"
  1682. * property is also set if an ID is provided on the option element.
  1683. *
  1684. * @param value The checked value
  1685. */
  1686. SelectControlValueAccessor.prototype.writeValue = function (value) {
  1687. this.value = value;
  1688. var id = this._getOptionId(value);
  1689. if (id == null) {
  1690. this._renderer.setProperty(this._elementRef.nativeElement, 'selectedIndex', -1);
  1691. }
  1692. var valueString = _buildValueString(id, value);
  1693. this._renderer.setProperty(this._elementRef.nativeElement, 'value', valueString);
  1694. };
  1695. /**
  1696. * @description
  1697. * Registers a function called when the control value changes.
  1698. *
  1699. * @param fn The callback function
  1700. */
  1701. SelectControlValueAccessor.prototype.registerOnChange = function (fn) {
  1702. var _this = this;
  1703. this.onChange = function (valueString) {
  1704. _this.value = _this._getOptionValue(valueString);
  1705. fn(_this.value);
  1706. };
  1707. };
  1708. /**
  1709. * @description
  1710. * Registers a function called when the control is touched.
  1711. *
  1712. * @param fn The callback function
  1713. */
  1714. SelectControlValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
  1715. /**
  1716. * Sets the "disabled" property on the select input element.
  1717. *
  1718. * @param isDisabled The disabled value
  1719. */
  1720. SelectControlValueAccessor.prototype.setDisabledState = function (isDisabled) {
  1721. this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  1722. };
  1723. /** @internal */
  1724. SelectControlValueAccessor.prototype._registerOption = function () { return (this._idCounter++).toString(); };
  1725. /** @internal */
  1726. SelectControlValueAccessor.prototype._getOptionId = function (value) {
  1727. var e_1, _a;
  1728. try {
  1729. for (var _b = __values(Array.from(this._optionMap.keys())), _c = _b.next(); !_c.done; _c = _b.next()) {
  1730. var id = _c.value;
  1731. if (this._compareWith(this._optionMap.get(id), value))
  1732. return id;
  1733. }
  1734. }
  1735. catch (e_1_1) { e_1 = { error: e_1_1 }; }
  1736. finally {
  1737. try {
  1738. if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
  1739. }
  1740. finally { if (e_1) throw e_1.error; }
  1741. }
  1742. return null;
  1743. };
  1744. /** @internal */
  1745. SelectControlValueAccessor.prototype._getOptionValue = function (valueString) {
  1746. var id = _extractId(valueString);
  1747. return this._optionMap.has(id) ? this._optionMap.get(id) : valueString;
  1748. };
  1749. __decorate([
  1750. Input(),
  1751. __metadata("design:type", Function),
  1752. __metadata("design:paramtypes", [Function])
  1753. ], SelectControlValueAccessor.prototype, "compareWith", null);
  1754. SelectControlValueAccessor = __decorate([
  1755. Directive({
  1756. selector: 'select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
  1757. host: { '(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
  1758. providers: [SELECT_VALUE_ACCESSOR]
  1759. }),
  1760. __metadata("design:paramtypes", [Renderer2, ElementRef])
  1761. ], SelectControlValueAccessor);
  1762. return SelectControlValueAccessor;
  1763. }());
  1764. /**
  1765. * @description
  1766. * Marks `<option>` as dynamic, so Angular can be notified when options change.
  1767. *
  1768. * @see `SelectControlValueAccessor`
  1769. *
  1770. * @ngModule ReactiveFormsModule
  1771. * @ngModule FormsModule
  1772. * @publicApi
  1773. */
  1774. var NgSelectOption = /** @class */ (function () {
  1775. function NgSelectOption(_element, _renderer, _select) {
  1776. this._element = _element;
  1777. this._renderer = _renderer;
  1778. this._select = _select;
  1779. if (this._select)
  1780. this.id = this._select._registerOption();
  1781. }
  1782. Object.defineProperty(NgSelectOption.prototype, "ngValue", {
  1783. /**
  1784. * @description
  1785. * Tracks the value bound to the option element. Unlike the value binding,
  1786. * ngValue supports binding to objects.
  1787. */
  1788. set: function (value) {
  1789. if (this._select == null)
  1790. return;
  1791. this._select._optionMap.set(this.id, value);
  1792. this._setElementValue(_buildValueString(this.id, value));
  1793. this._select.writeValue(this._select.value);
  1794. },
  1795. enumerable: true,
  1796. configurable: true
  1797. });
  1798. Object.defineProperty(NgSelectOption.prototype, "value", {
  1799. /**
  1800. * @description
  1801. * Tracks simple string values bound to the option element.
  1802. * For objects, use the `ngValue` input binding.
  1803. */
  1804. set: function (value) {
  1805. this._setElementValue(value);
  1806. if (this._select)
  1807. this._select.writeValue(this._select.value);
  1808. },
  1809. enumerable: true,
  1810. configurable: true
  1811. });
  1812. /** @internal */
  1813. NgSelectOption.prototype._setElementValue = function (value) {
  1814. this._renderer.setProperty(this._element.nativeElement, 'value', value);
  1815. };
  1816. /**
  1817. * @description
  1818. * Lifecycle method called before the directive's instance is destroyed. For internal use only.
  1819. */
  1820. NgSelectOption.prototype.ngOnDestroy = function () {
  1821. if (this._select) {
  1822. this._select._optionMap.delete(this.id);
  1823. this._select.writeValue(this._select.value);
  1824. }
  1825. };
  1826. __decorate([
  1827. Input('ngValue'),
  1828. __metadata("design:type", Object),
  1829. __metadata("design:paramtypes", [Object])
  1830. ], NgSelectOption.prototype, "ngValue", null);
  1831. __decorate([
  1832. Input('value'),
  1833. __metadata("design:type", Object),
  1834. __metadata("design:paramtypes", [Object])
  1835. ], NgSelectOption.prototype, "value", null);
  1836. NgSelectOption = __decorate([
  1837. Directive({ selector: 'option' }),
  1838. __param(2, Optional()), __param(2, Host()),
  1839. __metadata("design:paramtypes", [ElementRef, Renderer2,
  1840. SelectControlValueAccessor])
  1841. ], NgSelectOption);
  1842. return NgSelectOption;
  1843. }());
  1844. /**
  1845. * @license
  1846. * Copyright Google Inc. All Rights Reserved.
  1847. *
  1848. * Use of this source code is governed by an MIT-style license that can be
  1849. * found in the LICENSE file at https://angular.io/license
  1850. */
  1851. var SELECT_MULTIPLE_VALUE_ACCESSOR = {
  1852. provide: NG_VALUE_ACCESSOR,
  1853. useExisting: forwardRef(function () { return SelectMultipleControlValueAccessor; }),
  1854. multi: true
  1855. };
  1856. function _buildValueString$1(id, value) {
  1857. if (id == null)
  1858. return "" + value;
  1859. if (typeof value === 'string')
  1860. value = "'" + value + "'";
  1861. if (value && typeof value === 'object')
  1862. value = 'Object';
  1863. return (id + ": " + value).slice(0, 50);
  1864. }
  1865. function _extractId$1(valueString) {
  1866. return valueString.split(':')[0];
  1867. }
  1868. /**
  1869. * @description
  1870. * The `ControlValueAccessor` for writing multi-select control values and listening to multi-select control
  1871. * changes. The value accessor is used by the `FormControlDirective`, `FormControlName`, and `NgModel`
  1872. * directives.
  1873. *
  1874. * @see `SelectControlValueAccessor`
  1875. *
  1876. * @usageNotes
  1877. *
  1878. * ### Using a multi-select control
  1879. *
  1880. * The follow example shows you how to use a multi-select control with a reactive form.
  1881. *
  1882. * ```ts
  1883. * const countryControl = new FormControl();
  1884. * ```
  1885. *
  1886. * ```
  1887. * <select multiple name="countries" [formControl]="countryControl">
  1888. * <option *ngFor="let country of countries" [ngValue]="country">
  1889. * {{ country.name }}
  1890. * </option>
  1891. * </select>
  1892. * ```
  1893. *
  1894. * ### Customizing option selection
  1895. *
  1896. * To customize the default option comparison algorithm, `<select>` supports `compareWith` input.
  1897. * See the `SelectControlValueAccessor` for usage.
  1898. *
  1899. * @ngModule ReactiveFormsModule
  1900. * @ngModule FormsModule
  1901. * @publicApi
  1902. */
  1903. var SelectMultipleControlValueAccessor = /** @class */ (function () {
  1904. function SelectMultipleControlValueAccessor(_renderer, _elementRef) {
  1905. this._renderer = _renderer;
  1906. this._elementRef = _elementRef;
  1907. /** @internal */
  1908. this._optionMap = new Map();
  1909. /** @internal */
  1910. this._idCounter = 0;
  1911. /**
  1912. * @description
  1913. * The registered callback function called when a change event occurs on the input element.
  1914. */
  1915. this.onChange = function (_) { };
  1916. /**
  1917. * @description
  1918. * The registered callback function called when a blur event occurs on the input element.
  1919. */
  1920. this.onTouched = function () { };
  1921. this._compareWith = ɵlooseIdentical;
  1922. }
  1923. Object.defineProperty(SelectMultipleControlValueAccessor.prototype, "compareWith", {
  1924. /**
  1925. * @description
  1926. * Tracks the option comparison algorithm for tracking identities when
  1927. * checking for changes.
  1928. */
  1929. set: function (fn) {
  1930. if (typeof fn !== 'function') {
  1931. throw new Error("compareWith must be a function, but received " + JSON.stringify(fn));
  1932. }
  1933. this._compareWith = fn;
  1934. },
  1935. enumerable: true,
  1936. configurable: true
  1937. });
  1938. /**
  1939. * @description
  1940. * Sets the "value" property on one or of more
  1941. * of the select's options.
  1942. *
  1943. * @param value The value
  1944. */
  1945. SelectMultipleControlValueAccessor.prototype.writeValue = function (value) {
  1946. var _this = this;
  1947. this.value = value;
  1948. var optionSelectedStateSetter;
  1949. if (Array.isArray(value)) {
  1950. // convert values to ids
  1951. var ids_1 = value.map(function (v) { return _this._getOptionId(v); });
  1952. optionSelectedStateSetter = function (opt, o) { opt._setSelected(ids_1.indexOf(o.toString()) > -1); };
  1953. }
  1954. else {
  1955. optionSelectedStateSetter = function (opt, o) { opt._setSelected(false); };
  1956. }
  1957. this._optionMap.forEach(optionSelectedStateSetter);
  1958. };
  1959. /**
  1960. * @description
  1961. * Registers a function called when the control value changes
  1962. * and writes an array of the selected options.
  1963. *
  1964. * @param fn The callback function
  1965. */
  1966. SelectMultipleControlValueAccessor.prototype.registerOnChange = function (fn) {
  1967. var _this = this;
  1968. this.onChange = function (_) {
  1969. var selected = [];
  1970. if (_.hasOwnProperty('selectedOptions')) {
  1971. var options = _.selectedOptions;
  1972. for (var i = 0; i < options.length; i++) {
  1973. var opt = options.item(i);
  1974. var val = _this._getOptionValue(opt.value);
  1975. selected.push(val);
  1976. }
  1977. }
  1978. // Degrade on IE
  1979. else {
  1980. var options = _.options;
  1981. for (var i = 0; i < options.length; i++) {
  1982. var opt = options.item(i);
  1983. if (opt.selected) {
  1984. var val = _this._getOptionValue(opt.value);
  1985. selected.push(val);
  1986. }
  1987. }
  1988. }
  1989. _this.value = selected;
  1990. fn(selected);
  1991. };
  1992. };
  1993. /**
  1994. * @description
  1995. * Registers a function called when the control is touched.
  1996. *
  1997. * @param fn The callback function
  1998. */
  1999. SelectMultipleControlValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
  2000. /**
  2001. * Sets the "disabled" property on the select input element.
  2002. *
  2003. * @param isDisabled The disabled value
  2004. */
  2005. SelectMultipleControlValueAccessor.prototype.setDisabledState = function (isDisabled) {
  2006. this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  2007. };
  2008. /** @internal */
  2009. SelectMultipleControlValueAccessor.prototype._registerOption = function (value) {
  2010. var id = (this._idCounter++).toString();
  2011. this._optionMap.set(id, value);
  2012. return id;
  2013. };
  2014. /** @internal */
  2015. SelectMultipleControlValueAccessor.prototype._getOptionId = function (value) {
  2016. var e_1, _a;
  2017. try {
  2018. for (var _b = __values(Array.from(this._optionMap.keys())), _c = _b.next(); !_c.done; _c = _b.next()) {
  2019. var id = _c.value;
  2020. if (this._compareWith(this._optionMap.get(id)._value, value))
  2021. return id;
  2022. }
  2023. }
  2024. catch (e_1_1) { e_1 = { error: e_1_1 }; }
  2025. finally {
  2026. try {
  2027. if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
  2028. }
  2029. finally { if (e_1) throw e_1.error; }
  2030. }
  2031. return null;
  2032. };
  2033. /** @internal */
  2034. SelectMultipleControlValueAccessor.prototype._getOptionValue = function (valueString) {
  2035. var id = _extractId$1(valueString);
  2036. return this._optionMap.has(id) ? this._optionMap.get(id)._value : valueString;
  2037. };
  2038. __decorate([
  2039. Input(),
  2040. __metadata("design:type", Function),
  2041. __metadata("design:paramtypes", [Function])
  2042. ], SelectMultipleControlValueAccessor.prototype, "compareWith", null);
  2043. SelectMultipleControlValueAccessor = __decorate([
  2044. Directive({
  2045. selector: 'select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]',
  2046. host: { '(change)': 'onChange($event.target)', '(blur)': 'onTouched()' },
  2047. providers: [SELECT_MULTIPLE_VALUE_ACCESSOR]
  2048. }),
  2049. __metadata("design:paramtypes", [Renderer2, ElementRef])
  2050. ], SelectMultipleControlValueAccessor);
  2051. return SelectMultipleControlValueAccessor;
  2052. }());
  2053. /**
  2054. * @description
  2055. * Marks `<option>` as dynamic, so Angular can be notified when options change.
  2056. *
  2057. * @see `SelectMultipleControlValueAccessor`
  2058. *
  2059. * @ngModule ReactiveFormsModule
  2060. * @ngModule FormsModule
  2061. * @publicApi
  2062. */
  2063. var ɵNgSelectMultipleOption = /** @class */ (function () {
  2064. function ɵNgSelectMultipleOption(_element, _renderer, _select) {
  2065. this._element = _element;
  2066. this._renderer = _renderer;
  2067. this._select = _select;
  2068. if (this._select) {
  2069. this.id = this._select._registerOption(this);
  2070. }
  2071. }
  2072. Object.defineProperty(ɵNgSelectMultipleOption.prototype, "ngValue", {
  2073. /**
  2074. * @description
  2075. * Tracks the value bound to the option element. Unlike the value binding,
  2076. * ngValue supports binding to objects.
  2077. */
  2078. set: function (value) {
  2079. if (this._select == null)
  2080. return;
  2081. this._value = value;
  2082. this._setElementValue(_buildValueString$1(this.id, value));
  2083. this._select.writeValue(this._select.value);
  2084. },
  2085. enumerable: true,
  2086. configurable: true
  2087. });
  2088. Object.defineProperty(ɵNgSelectMultipleOption.prototype, "value", {
  2089. /**
  2090. * @description
  2091. * Tracks simple string values bound to the option element.
  2092. * For objects, use the `ngValue` input binding.
  2093. */
  2094. set: function (value) {
  2095. if (this._select) {
  2096. this._value = value;
  2097. this._setElementValue(_buildValueString$1(this.id, value));
  2098. this._select.writeValue(this._select.value);
  2099. }
  2100. else {
  2101. this._setElementValue(value);
  2102. }
  2103. },
  2104. enumerable: true,
  2105. configurable: true
  2106. });
  2107. /** @internal */
  2108. ɵNgSelectMultipleOption.prototype._setElementValue = function (value) {
  2109. this._renderer.setProperty(this._element.nativeElement, 'value', value);
  2110. };
  2111. /** @internal */
  2112. ɵNgSelectMultipleOption.prototype._setSelected = function (selected) {
  2113. this._renderer.setProperty(this._element.nativeElement, 'selected', selected);
  2114. };
  2115. /**
  2116. * @description
  2117. * Lifecycle method called before the directive's instance is destroyed. For internal use only.
  2118. */
  2119. ɵNgSelectMultipleOption.prototype.ngOnDestroy = function () {
  2120. if (this._select) {
  2121. this._select._optionMap.delete(this.id);
  2122. this._select.writeValue(this._select.value);
  2123. }
  2124. };
  2125. __decorate([
  2126. Input('ngValue'),
  2127. __metadata("design:type", Object),
  2128. __metadata("design:paramtypes", [Object])
  2129. ], ɵNgSelectMultipleOption.prototype, "ngValue", null);
  2130. __decorate([
  2131. Input('value'),
  2132. __metadata("design:type", Object),
  2133. __metadata("design:paramtypes", [Object])
  2134. ], ɵNgSelectMultipleOption.prototype, "value", null);
  2135. ɵNgSelectMultipleOption = __decorate([
  2136. Directive({ selector: 'option' }),
  2137. __param(2, Optional()), __param(2, Host()),
  2138. __metadata("design:paramtypes", [ElementRef, Renderer2,
  2139. SelectMultipleControlValueAccessor])
  2140. ], ɵNgSelectMultipleOption);
  2141. return ɵNgSelectMultipleOption;
  2142. }());
  2143. /**
  2144. * @license
  2145. * Copyright Google Inc. All Rights Reserved.
  2146. *
  2147. * Use of this source code is governed by an MIT-style license that can be
  2148. * found in the LICENSE file at https://angular.io/license
  2149. */
  2150. function controlPath(name, parent) {
  2151. return __spread(parent.path, [name]);
  2152. }
  2153. function setUpControl(control, dir) {
  2154. if (!control)
  2155. _throwError(dir, 'Cannot find control with');
  2156. if (!dir.valueAccessor)
  2157. _throwError(dir, 'No value accessor for form control with');
  2158. control.validator = Validators.compose([control.validator, dir.validator]);
  2159. control.asyncValidator = Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);
  2160. dir.valueAccessor.writeValue(control.value);
  2161. setUpViewChangePipeline(control, dir);
  2162. setUpModelChangePipeline(control, dir);
  2163. setUpBlurPipeline(control, dir);
  2164. if (dir.valueAccessor.setDisabledState) {
  2165. control.registerOnDisabledChange(function (isDisabled) { dir.valueAccessor.setDisabledState(isDisabled); });
  2166. }
  2167. // re-run validation when validator binding changes, e.g. minlength=3 -> minlength=4
  2168. dir._rawValidators.forEach(function (validator) {
  2169. if (validator.registerOnValidatorChange)
  2170. validator.registerOnValidatorChange(function () { return control.updateValueAndValidity(); });
  2171. });
  2172. dir._rawAsyncValidators.forEach(function (validator) {
  2173. if (validator.registerOnValidatorChange)
  2174. validator.registerOnValidatorChange(function () { return control.updateValueAndValidity(); });
  2175. });
  2176. }
  2177. function cleanUpControl(control, dir) {
  2178. dir.valueAccessor.registerOnChange(function () { return _noControlError(dir); });
  2179. dir.valueAccessor.registerOnTouched(function () { return _noControlError(dir); });
  2180. dir._rawValidators.forEach(function (validator) {
  2181. if (validator.registerOnValidatorChange) {
  2182. validator.registerOnValidatorChange(null);
  2183. }
  2184. });
  2185. dir._rawAsyncValidators.forEach(function (validator) {
  2186. if (validator.registerOnValidatorChange) {
  2187. validator.registerOnValidatorChange(null);
  2188. }
  2189. });
  2190. if (control)
  2191. control._clearChangeFns();
  2192. }
  2193. function setUpViewChangePipeline(control, dir) {
  2194. dir.valueAccessor.registerOnChange(function (newValue) {
  2195. control._pendingValue = newValue;
  2196. control._pendingChange = true;
  2197. control._pendingDirty = true;
  2198. if (control.updateOn === 'change')
  2199. updateControl(control, dir);
  2200. });
  2201. }
  2202. function setUpBlurPipeline(control, dir) {
  2203. dir.valueAccessor.registerOnTouched(function () {
  2204. control._pendingTouched = true;
  2205. if (control.updateOn === 'blur' && control._pendingChange)
  2206. updateControl(control, dir);
  2207. if (control.updateOn !== 'submit')
  2208. control.markAsTouched();
  2209. });
  2210. }
  2211. function updateControl(control, dir) {
  2212. if (control._pendingDirty)
  2213. control.markAsDirty();
  2214. control.setValue(control._pendingValue, { emitModelToViewChange: false });
  2215. dir.viewToModelUpdate(control._pendingValue);
  2216. control._pendingChange = false;
  2217. }
  2218. function setUpModelChangePipeline(control, dir) {
  2219. control.registerOnChange(function (newValue, emitModelEvent) {
  2220. // control -> view
  2221. dir.valueAccessor.writeValue(newValue);
  2222. // control -> ngModel
  2223. if (emitModelEvent)
  2224. dir.viewToModelUpdate(newValue);
  2225. });
  2226. }
  2227. function setUpFormContainer(control, dir) {
  2228. if (control == null)
  2229. _throwError(dir, 'Cannot find control with');
  2230. control.validator = Validators.compose([control.validator, dir.validator]);
  2231. control.asyncValidator = Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);
  2232. }
  2233. function _noControlError(dir) {
  2234. return _throwError(dir, 'There is no FormControl instance attached to form control element with');
  2235. }
  2236. function _throwError(dir, message) {
  2237. var messageEnd;
  2238. if (dir.path.length > 1) {
  2239. messageEnd = "path: '" + dir.path.join(' -> ') + "'";
  2240. }
  2241. else if (dir.path[0]) {
  2242. messageEnd = "name: '" + dir.path + "'";
  2243. }
  2244. else {
  2245. messageEnd = 'unspecified name attribute';
  2246. }
  2247. throw new Error(message + " " + messageEnd);
  2248. }
  2249. function composeValidators(validators) {
  2250. return validators != null ? Validators.compose(validators.map(normalizeValidator)) : null;
  2251. }
  2252. function composeAsyncValidators(validators) {
  2253. return validators != null ? Validators.composeAsync(validators.map(normalizeAsyncValidator)) :
  2254. null;
  2255. }
  2256. function isPropertyUpdated(changes, viewModel) {
  2257. if (!changes.hasOwnProperty('model'))
  2258. return false;
  2259. var change = changes['model'];
  2260. if (change.isFirstChange())
  2261. return true;
  2262. return !ɵlooseIdentical(viewModel, change.currentValue);
  2263. }
  2264. var BUILTIN_ACCESSORS = [
  2265. CheckboxControlValueAccessor,
  2266. RangeValueAccessor,
  2267. NumberValueAccessor,
  2268. SelectControlValueAccessor,
  2269. SelectMultipleControlValueAccessor,
  2270. RadioControlValueAccessor,
  2271. ];
  2272. function isBuiltInAccessor(valueAccessor) {
  2273. return BUILTIN_ACCESSORS.some(function (a) { return valueAccessor.constructor === a; });
  2274. }
  2275. function syncPendingControls(form, directives) {
  2276. form._syncPendingControls();
  2277. directives.forEach(function (dir) {
  2278. var control = dir.control;
  2279. if (control.updateOn === 'submit' && control._pendingChange) {
  2280. dir.viewToModelUpdate(control._pendingValue);
  2281. control._pendingChange = false;
  2282. }
  2283. });
  2284. }
  2285. // TODO: vsavkin remove it once https://github.com/angular/angular/issues/3011 is implemented
  2286. function selectValueAccessor(dir, valueAccessors) {
  2287. if (!valueAccessors)
  2288. return null;
  2289. if (!Array.isArray(valueAccessors))
  2290. _throwError(dir, 'Value accessor was not provided as an array for form control with');
  2291. var defaultAccessor = undefined;
  2292. var builtinAccessor = undefined;
  2293. var customAccessor = undefined;
  2294. valueAccessors.forEach(function (v) {
  2295. if (v.constructor === DefaultValueAccessor) {
  2296. defaultAccessor = v;
  2297. }
  2298. else if (isBuiltInAccessor(v)) {
  2299. if (builtinAccessor)
  2300. _throwError(dir, 'More than one built-in value accessor matches form control with');
  2301. builtinAccessor = v;
  2302. }
  2303. else {
  2304. if (customAccessor)
  2305. _throwError(dir, 'More than one custom value accessor matches form control with');
  2306. customAccessor = v;
  2307. }
  2308. });
  2309. if (customAccessor)
  2310. return customAccessor;
  2311. if (builtinAccessor)
  2312. return builtinAccessor;
  2313. if (defaultAccessor)
  2314. return defaultAccessor;
  2315. _throwError(dir, 'No valid value accessor for form control with');
  2316. return null;
  2317. }
  2318. function removeDir(list, el) {
  2319. var index = list.indexOf(el);
  2320. if (index > -1)
  2321. list.splice(index, 1);
  2322. }
  2323. // TODO(kara): remove after deprecation period
  2324. function _ngModelWarning(name, type, instance, warningConfig) {
  2325. if (!isDevMode() || warningConfig === 'never')
  2326. return;
  2327. if (((warningConfig === null || warningConfig === 'once') && !type._ngModelWarningSentOnce) ||
  2328. (warningConfig === 'always' && !instance._ngModelWarningSent)) {
  2329. ReactiveErrors.ngModelWarning(name);
  2330. type._ngModelWarningSentOnce = true;
  2331. instance._ngModelWarningSent = true;
  2332. }
  2333. }
  2334. /**
  2335. * @license
  2336. * Copyright Google Inc. All Rights Reserved.
  2337. *
  2338. * Use of this source code is governed by an MIT-style license that can be
  2339. * found in the LICENSE file at https://angular.io/license
  2340. */
  2341. /**
  2342. * Reports that a FormControl is valid, meaning that no errors exist in the input value.
  2343. *
  2344. * @see `status`
  2345. */
  2346. var VALID = 'VALID';
  2347. /**
  2348. * Reports that a FormControl is invalid, meaning that an error exists in the input value.
  2349. *
  2350. * @see `status`
  2351. */
  2352. var INVALID = 'INVALID';
  2353. /**
  2354. * Reports that a FormControl is pending, meaning that that async validation is occurring and
  2355. * errors are not yet available for the input value.
  2356. *
  2357. * @see `markAsPending`
  2358. * @see `status`
  2359. */
  2360. var PENDING = 'PENDING';
  2361. /**
  2362. * Reports that a FormControl is disabled, meaning that the control is exempt from ancestor
  2363. * calculations of validity or value.
  2364. *
  2365. * @see `markAsDisabled`
  2366. * @see `status`
  2367. */
  2368. var DISABLED = 'DISABLED';
  2369. function _find(control, path, delimiter) {
  2370. if (path == null)
  2371. return null;
  2372. if (!(path instanceof Array)) {
  2373. path = path.split(delimiter);
  2374. }
  2375. if (path instanceof Array && (path.length === 0))
  2376. return null;
  2377. return path.reduce(function (v, name) {
  2378. if (v instanceof FormGroup) {
  2379. return v.controls.hasOwnProperty(name) ? v.controls[name] : null;
  2380. }
  2381. if (v instanceof FormArray) {
  2382. return v.at(name) || null;
  2383. }
  2384. return null;
  2385. }, control);
  2386. }
  2387. function coerceToValidator(validatorOrOpts) {
  2388. var validator = (isOptionsObj(validatorOrOpts) ? validatorOrOpts.validators :
  2389. validatorOrOpts);
  2390. return Array.isArray(validator) ? composeValidators(validator) : validator || null;
  2391. }
  2392. function coerceToAsyncValidator(asyncValidator, validatorOrOpts) {
  2393. var origAsyncValidator = (isOptionsObj(validatorOrOpts) ? validatorOrOpts.asyncValidators :
  2394. asyncValidator);
  2395. return Array.isArray(origAsyncValidator) ? composeAsyncValidators(origAsyncValidator) :
  2396. origAsyncValidator || null;
  2397. }
  2398. function isOptionsObj(validatorOrOpts) {
  2399. return validatorOrOpts != null && !Array.isArray(validatorOrOpts) &&
  2400. typeof validatorOrOpts === 'object';
  2401. }
  2402. /**
  2403. * This is the base class for `FormControl`, `FormGroup`, and `FormArray`.
  2404. *
  2405. * It provides some of the shared behavior that all controls and groups of controls have, like
  2406. * running validators, calculating status, and resetting state. It also defines the properties
  2407. * that are shared between all sub-classes, like `value`, `valid`, and `dirty`. It shouldn't be
  2408. * instantiated directly.
  2409. *
  2410. * @see [Forms Guide](/guide/forms)
  2411. * @see [Reactive Forms Guide](/guide/reactive-forms)
  2412. * @see [Dynamic Forms Guide](/guide/dynamic-form)
  2413. *
  2414. * @publicApi
  2415. */
  2416. var AbstractControl = /** @class */ (function () {
  2417. /**
  2418. * Initialize the AbstractControl instance.
  2419. *
  2420. * @param validator The function that determines the synchronous validity of this control.
  2421. * @param asyncValidator The function that determines the asynchronous validity of this
  2422. * control.
  2423. */
  2424. function AbstractControl(validator, asyncValidator) {
  2425. this.validator = validator;
  2426. this.asyncValidator = asyncValidator;
  2427. /** @internal */
  2428. this._onCollectionChange = function () { };
  2429. /**
  2430. * A control is `pristine` if the user has not yet changed
  2431. * the value in the UI.
  2432. *
  2433. * @returns True if the user has not yet changed the value in the UI; compare `dirty`.
  2434. * Programmatic changes to a control's value do not mark it dirty.
  2435. */
  2436. this.pristine = true;
  2437. /**
  2438. * True if the control is marked as `touched`.
  2439. *
  2440. * A control is marked `touched` once the user has triggered
  2441. * a `blur` event on it.
  2442. */
  2443. this.touched = false;
  2444. /** @internal */
  2445. this._onDisabledChange = [];
  2446. }
  2447. Object.defineProperty(AbstractControl.prototype, "parent", {
  2448. /**
  2449. * The parent control.
  2450. */
  2451. get: function () { return this._parent; },
  2452. enumerable: true,
  2453. configurable: true
  2454. });
  2455. Object.defineProperty(AbstractControl.prototype, "valid", {
  2456. /**
  2457. * A control is `valid` when its `status` is `VALID`.
  2458. *
  2459. * @see {@link AbstractControl.status}
  2460. *
  2461. * @returns True if the control has passed all of its validation tests,
  2462. * false otherwise.
  2463. */
  2464. get: function () { return this.status === VALID; },
  2465. enumerable: true,
  2466. configurable: true
  2467. });
  2468. Object.defineProperty(AbstractControl.prototype, "invalid", {
  2469. /**
  2470. * A control is `invalid` when its `status` is `INVALID`.
  2471. *
  2472. * @see {@link AbstractControl.status}
  2473. *
  2474. * @returns True if this control has failed one or more of its validation checks,
  2475. * false otherwise.
  2476. */
  2477. get: function () { return this.status === INVALID; },
  2478. enumerable: true,
  2479. configurable: true
  2480. });
  2481. Object.defineProperty(AbstractControl.prototype, "pending", {
  2482. /**
  2483. * A control is `pending` when its `status` is `PENDING`.
  2484. *
  2485. * @see {@link AbstractControl.status}
  2486. *
  2487. * @returns True if this control is in the process of conducting a validation check,
  2488. * false otherwise.
  2489. */
  2490. get: function () { return this.status == PENDING; },
  2491. enumerable: true,
  2492. configurable: true
  2493. });
  2494. Object.defineProperty(AbstractControl.prototype, "disabled", {
  2495. /**
  2496. * A control is `disabled` when its `status` is `DISABLED`.
  2497. *
  2498. * Disabled controls are exempt from validation checks and
  2499. * are not included in the aggregate value of their ancestor
  2500. * controls.
  2501. *
  2502. * @see {@link AbstractControl.status}
  2503. *
  2504. * @returns True if the control is disabled, false otherwise.
  2505. */
  2506. get: function () { return this.status === DISABLED; },
  2507. enumerable: true,
  2508. configurable: true
  2509. });
  2510. Object.defineProperty(AbstractControl.prototype, "enabled", {
  2511. /**
  2512. * A control is `enabled` as long as its `status` is not `DISABLED`.
  2513. *
  2514. * @returns True if the control has any status other than 'DISABLED',
  2515. * false if the status is 'DISABLED'.
  2516. *
  2517. * @see {@link AbstractControl.status}
  2518. *
  2519. */
  2520. get: function () { return this.status !== DISABLED; },
  2521. enumerable: true,
  2522. configurable: true
  2523. });
  2524. Object.defineProperty(AbstractControl.prototype, "dirty", {
  2525. /**
  2526. * A control is `dirty` if the user has changed the value
  2527. * in the UI.
  2528. *
  2529. * @returns True if the user has changed the value of this control in the UI; compare `pristine`.
  2530. * Programmatic changes to a control's value do not mark it dirty.
  2531. */
  2532. get: function () { return !this.pristine; },
  2533. enumerable: true,
  2534. configurable: true
  2535. });
  2536. Object.defineProperty(AbstractControl.prototype, "untouched", {
  2537. /**
  2538. * True if the control has not been marked as touched
  2539. *
  2540. * A control is `untouched` if the user has not yet triggered
  2541. * a `blur` event on it.
  2542. */
  2543. get: function () { return !this.touched; },
  2544. enumerable: true,
  2545. configurable: true
  2546. });
  2547. Object.defineProperty(AbstractControl.prototype, "updateOn", {
  2548. /**
  2549. * Reports the update strategy of the `AbstractControl` (meaning
  2550. * the event on which the control updates itself).
  2551. * Possible values: `'change'` | `'blur'` | `'submit'`
  2552. * Default value: `'change'`
  2553. */
  2554. get: function () {
  2555. return this._updateOn ? this._updateOn : (this.parent ? this.parent.updateOn : 'change');
  2556. },
  2557. enumerable: true,
  2558. configurable: true
  2559. });
  2560. /**
  2561. * Sets the synchronous validators that are active on this control. Calling
  2562. * this overwrites any existing sync validators.
  2563. */
  2564. AbstractControl.prototype.setValidators = function (newValidator) {
  2565. this.validator = coerceToValidator(newValidator);
  2566. };
  2567. /**
  2568. * Sets the async validators that are active on this control. Calling this
  2569. * overwrites any existing async validators.
  2570. */
  2571. AbstractControl.prototype.setAsyncValidators = function (newValidator) {
  2572. this.asyncValidator = coerceToAsyncValidator(newValidator);
  2573. };
  2574. /**
  2575. * Empties out the sync validator list.
  2576. */
  2577. AbstractControl.prototype.clearValidators = function () { this.validator = null; };
  2578. /**
  2579. * Empties out the async validator list.
  2580. */
  2581. AbstractControl.prototype.clearAsyncValidators = function () { this.asyncValidator = null; };
  2582. /**
  2583. * Marks the control as `touched`. A control is touched by focus and
  2584. * blur events that do not change the value.
  2585. *
  2586. * @see `markAsUntouched()`
  2587. * @see `markAsDirty()`
  2588. * @see `markAsPristine()`
  2589. *
  2590. * @param opts Configuration options that determine how the control propagates changes
  2591. * and emits events events after marking is applied.
  2592. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  2593. * marks all direct ancestors. Default is false.
  2594. */
  2595. AbstractControl.prototype.markAsTouched = function (opts) {
  2596. if (opts === void 0) { opts = {}; }
  2597. this.touched = true;
  2598. if (this._parent && !opts.onlySelf) {
  2599. this._parent.markAsTouched(opts);
  2600. }
  2601. };
  2602. /**
  2603. * Marks the control and all its descendant controls as `touched`.
  2604. * @see `markAsTouched()`
  2605. */
  2606. AbstractControl.prototype.markAllAsTouched = function () {
  2607. this.markAsTouched({ onlySelf: true });
  2608. this._forEachChild(function (control) { return control.markAllAsTouched(); });
  2609. };
  2610. /**
  2611. * Marks the control as `untouched`.
  2612. *
  2613. * If the control has any children, also marks all children as `untouched`
  2614. * and recalculates the `touched` status of all parent controls.
  2615. *
  2616. * @see `markAsTouched()`
  2617. * @see `markAsDirty()`
  2618. * @see `markAsPristine()`
  2619. *
  2620. * @param opts Configuration options that determine how the control propagates changes
  2621. * and emits events after the marking is applied.
  2622. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  2623. * marks all direct ancestors. Default is false.
  2624. */
  2625. AbstractControl.prototype.markAsUntouched = function (opts) {
  2626. if (opts === void 0) { opts = {}; }
  2627. this.touched = false;
  2628. this._pendingTouched = false;
  2629. this._forEachChild(function (control) { control.markAsUntouched({ onlySelf: true }); });
  2630. if (this._parent && !opts.onlySelf) {
  2631. this._parent._updateTouched(opts);
  2632. }
  2633. };
  2634. /**
  2635. * Marks the control as `dirty`. A control becomes dirty when
  2636. * the control's value is changed through the UI; compare `markAsTouched`.
  2637. *
  2638. * @see `markAsTouched()`
  2639. * @see `markAsUntouched()`
  2640. * @see `markAsPristine()`
  2641. *
  2642. * @param opts Configuration options that determine how the control propagates changes
  2643. * and emits events after marking is applied.
  2644. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  2645. * marks all direct ancestors. Default is false.
  2646. */
  2647. AbstractControl.prototype.markAsDirty = function (opts) {
  2648. if (opts === void 0) { opts = {}; }
  2649. this.pristine = false;
  2650. if (this._parent && !opts.onlySelf) {
  2651. this._parent.markAsDirty(opts);
  2652. }
  2653. };
  2654. /**
  2655. * Marks the control as `pristine`.
  2656. *
  2657. * If the control has any children, marks all children as `pristine`,
  2658. * and recalculates the `pristine` status of all parent
  2659. * controls.
  2660. *
  2661. * @see `markAsTouched()`
  2662. * @see `markAsUntouched()`
  2663. * @see `markAsDirty()`
  2664. *
  2665. * @param opts Configuration options that determine how the control emits events after
  2666. * marking is applied.
  2667. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  2668. * marks all direct ancestors. Default is false..
  2669. */
  2670. AbstractControl.prototype.markAsPristine = function (opts) {
  2671. if (opts === void 0) { opts = {}; }
  2672. this.pristine = true;
  2673. this._pendingDirty = false;
  2674. this._forEachChild(function (control) { control.markAsPristine({ onlySelf: true }); });
  2675. if (this._parent && !opts.onlySelf) {
  2676. this._parent._updatePristine(opts);
  2677. }
  2678. };
  2679. /**
  2680. * Marks the control as `pending`.
  2681. *
  2682. * A control is pending while the control performs async validation.
  2683. *
  2684. * @see {@link AbstractControl.status}
  2685. *
  2686. * @param opts Configuration options that determine how the control propagates changes and
  2687. * emits events after marking is applied.
  2688. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  2689. * marks all direct ancestors. Default is false..
  2690. * * `emitEvent`: When true or not supplied (the default), the `statusChanges`
  2691. * observable emits an event with the latest status the control is marked pending.
  2692. * When false, no events are emitted.
  2693. *
  2694. */
  2695. AbstractControl.prototype.markAsPending = function (opts) {
  2696. if (opts === void 0) { opts = {}; }
  2697. this.status = PENDING;
  2698. if (opts.emitEvent !== false) {
  2699. this.statusChanges.emit(this.status);
  2700. }
  2701. if (this._parent && !opts.onlySelf) {
  2702. this._parent.markAsPending(opts);
  2703. }
  2704. };
  2705. /**
  2706. * Disables the control. This means the control is exempt from validation checks and
  2707. * excluded from the aggregate value of any parent. Its status is `DISABLED`.
  2708. *
  2709. * If the control has children, all children are also disabled.
  2710. *
  2711. * @see {@link AbstractControl.status}
  2712. *
  2713. * @param opts Configuration options that determine how the control propagates
  2714. * changes and emits events after the control is disabled.
  2715. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  2716. * marks all direct ancestors. Default is false..
  2717. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  2718. * `valueChanges`
  2719. * observables emit events with the latest status and value when the control is disabled.
  2720. * When false, no events are emitted.
  2721. */
  2722. AbstractControl.prototype.disable = function (opts) {
  2723. if (opts === void 0) { opts = {}; }
  2724. // If parent has been marked artificially dirty we don't want to re-calculate the
  2725. // parent's dirtiness based on the children.
  2726. var skipPristineCheck = this._parentMarkedDirty(opts.onlySelf);
  2727. this.status = DISABLED;
  2728. this.errors = null;
  2729. this._forEachChild(function (control) { control.disable(__assign({}, opts, { onlySelf: true })); });
  2730. this._updateValue();
  2731. if (opts.emitEvent !== false) {
  2732. this.valueChanges.emit(this.value);
  2733. this.statusChanges.emit(this.status);
  2734. }
  2735. this._updateAncestors(__assign({}, opts, { skipPristineCheck: skipPristineCheck }));
  2736. this._onDisabledChange.forEach(function (changeFn) { return changeFn(true); });
  2737. };
  2738. /**
  2739. * Enables the control. This means the control is included in validation checks and
  2740. * the aggregate value of its parent. Its status recalculates based on its value and
  2741. * its validators.
  2742. *
  2743. * By default, if the control has children, all children are enabled.
  2744. *
  2745. * @see {@link AbstractControl.status}
  2746. *
  2747. * @param opts Configure options that control how the control propagates changes and
  2748. * emits events when marked as untouched
  2749. * * `onlySelf`: When true, mark only this control. When false or not supplied,
  2750. * marks all direct ancestors. Default is false..
  2751. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  2752. * `valueChanges`
  2753. * observables emit events with the latest status and value when the control is enabled.
  2754. * When false, no events are emitted.
  2755. */
  2756. AbstractControl.prototype.enable = function (opts) {
  2757. if (opts === void 0) { opts = {}; }
  2758. // If parent has been marked artificially dirty we don't want to re-calculate the
  2759. // parent's dirtiness based on the children.
  2760. var skipPristineCheck = this._parentMarkedDirty(opts.onlySelf);
  2761. this.status = VALID;
  2762. this._forEachChild(function (control) { control.enable(__assign({}, opts, { onlySelf: true })); });
  2763. this.updateValueAndValidity({ onlySelf: true, emitEvent: opts.emitEvent });
  2764. this._updateAncestors(__assign({}, opts, { skipPristineCheck: skipPristineCheck }));
  2765. this._onDisabledChange.forEach(function (changeFn) { return changeFn(false); });
  2766. };
  2767. AbstractControl.prototype._updateAncestors = function (opts) {
  2768. if (this._parent && !opts.onlySelf) {
  2769. this._parent.updateValueAndValidity(opts);
  2770. if (!opts.skipPristineCheck) {
  2771. this._parent._updatePristine();
  2772. }
  2773. this._parent._updateTouched();
  2774. }
  2775. };
  2776. /**
  2777. * @param parent Sets the parent of the control
  2778. */
  2779. AbstractControl.prototype.setParent = function (parent) { this._parent = parent; };
  2780. /**
  2781. * Recalculates the value and validation status of the control.
  2782. *
  2783. * By default, it also updates the value and validity of its ancestors.
  2784. *
  2785. * @param opts Configuration options determine how the control propagates changes and emits events
  2786. * after updates and validity checks are applied.
  2787. * * `onlySelf`: When true, only update this control. When false or not supplied,
  2788. * update all direct ancestors. Default is false..
  2789. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  2790. * `valueChanges`
  2791. * observables emit events with the latest status and value when the control is updated.
  2792. * When false, no events are emitted.
  2793. */
  2794. AbstractControl.prototype.updateValueAndValidity = function (opts) {
  2795. if (opts === void 0) { opts = {}; }
  2796. this._setInitialStatus();
  2797. this._updateValue();
  2798. if (this.enabled) {
  2799. this._cancelExistingSubscription();
  2800. this.errors = this._runValidator();
  2801. this.status = this._calculateStatus();
  2802. if (this.status === VALID || this.status === PENDING) {
  2803. this._runAsyncValidator(opts.emitEvent);
  2804. }
  2805. }
  2806. if (opts.emitEvent !== false) {
  2807. this.valueChanges.emit(this.value);
  2808. this.statusChanges.emit(this.status);
  2809. }
  2810. if (this._parent && !opts.onlySelf) {
  2811. this._parent.updateValueAndValidity(opts);
  2812. }
  2813. };
  2814. /** @internal */
  2815. AbstractControl.prototype._updateTreeValidity = function (opts) {
  2816. if (opts === void 0) { opts = { emitEvent: true }; }
  2817. this._forEachChild(function (ctrl) { return ctrl._updateTreeValidity(opts); });
  2818. this.updateValueAndValidity({ onlySelf: true, emitEvent: opts.emitEvent });
  2819. };
  2820. AbstractControl.prototype._setInitialStatus = function () {
  2821. this.status = this._allControlsDisabled() ? DISABLED : VALID;
  2822. };
  2823. AbstractControl.prototype._runValidator = function () {
  2824. return this.validator ? this.validator(this) : null;
  2825. };
  2826. AbstractControl.prototype._runAsyncValidator = function (emitEvent) {
  2827. var _this = this;
  2828. if (this.asyncValidator) {
  2829. this.status = PENDING;
  2830. var obs = toObservable(this.asyncValidator(this));
  2831. this._asyncValidationSubscription =
  2832. obs.subscribe(function (errors) { return _this.setErrors(errors, { emitEvent: emitEvent }); });
  2833. }
  2834. };
  2835. AbstractControl.prototype._cancelExistingSubscription = function () {
  2836. if (this._asyncValidationSubscription) {
  2837. this._asyncValidationSubscription.unsubscribe();
  2838. }
  2839. };
  2840. /**
  2841. * Sets errors on a form control when running validations manually, rather than automatically.
  2842. *
  2843. * Calling `setErrors` also updates the validity of the parent control.
  2844. *
  2845. * @usageNotes
  2846. * ### Manually set the errors for a control
  2847. *
  2848. * ```
  2849. * const login = new FormControl('someLogin');
  2850. * login.setErrors({
  2851. * notUnique: true
  2852. * });
  2853. *
  2854. * expect(login.valid).toEqual(false);
  2855. * expect(login.errors).toEqual({ notUnique: true });
  2856. *
  2857. * login.setValue('someOtherLogin');
  2858. *
  2859. * expect(login.valid).toEqual(true);
  2860. * ```
  2861. */
  2862. AbstractControl.prototype.setErrors = function (errors, opts) {
  2863. if (opts === void 0) { opts = {}; }
  2864. this.errors = errors;
  2865. this._updateControlsErrors(opts.emitEvent !== false);
  2866. };
  2867. /**
  2868. * Retrieves a child control given the control's name or path.
  2869. *
  2870. * @param path A dot-delimited string or array of string/number values that define the path to the
  2871. * control.
  2872. *
  2873. * @usageNotes
  2874. * ### Retrieve a nested control
  2875. *
  2876. * For example, to get a `name` control nested within a `person` sub-group:
  2877. *
  2878. * * `this.form.get('person.name');`
  2879. *
  2880. * -OR-
  2881. *
  2882. * * `this.form.get(['person', 'name']);`
  2883. */
  2884. AbstractControl.prototype.get = function (path) { return _find(this, path, '.'); };
  2885. /**
  2886. * @description
  2887. * Reports error data for the control with the given path.
  2888. *
  2889. * @param errorCode The code of the error to check
  2890. * @param path A list of control names that designates how to move from the current control
  2891. * to the control that should be queried for errors.
  2892. *
  2893. * @usageNotes
  2894. * For example, for the following `FormGroup`:
  2895. *
  2896. * ```
  2897. * form = new FormGroup({
  2898. * address: new FormGroup({ street: new FormControl() })
  2899. * });
  2900. * ```
  2901. *
  2902. * The path to the 'street' control from the root form would be 'address' -> 'street'.
  2903. *
  2904. * It can be provided to this method in one of two formats:
  2905. *
  2906. * 1. An array of string control names, e.g. `['address', 'street']`
  2907. * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
  2908. *
  2909. * @returns error data for that particular error. If the control or error is not present,
  2910. * null is returned.
  2911. */
  2912. AbstractControl.prototype.getError = function (errorCode, path) {
  2913. var control = path ? this.get(path) : this;
  2914. return control && control.errors ? control.errors[errorCode] : null;
  2915. };
  2916. /**
  2917. * @description
  2918. * Reports whether the control with the given path has the error specified.
  2919. *
  2920. * @param errorCode The code of the error to check
  2921. * @param path A list of control names that designates how to move from the current control
  2922. * to the control that should be queried for errors.
  2923. *
  2924. * @usageNotes
  2925. * For example, for the following `FormGroup`:
  2926. *
  2927. * ```
  2928. * form = new FormGroup({
  2929. * address: new FormGroup({ street: new FormControl() })
  2930. * });
  2931. * ```
  2932. *
  2933. * The path to the 'street' control from the root form would be 'address' -> 'street'.
  2934. *
  2935. * It can be provided to this method in one of two formats:
  2936. *
  2937. * 1. An array of string control names, e.g. `['address', 'street']`
  2938. * 1. A period-delimited list of control names in one string, e.g. `'address.street'`
  2939. *
  2940. * If no path is given, this method checks for the error on the current control.
  2941. *
  2942. * @returns whether the given error is present in the control at the given path.
  2943. *
  2944. * If the control is not present, false is returned.
  2945. */
  2946. AbstractControl.prototype.hasError = function (errorCode, path) {
  2947. return !!this.getError(errorCode, path);
  2948. };
  2949. Object.defineProperty(AbstractControl.prototype, "root", {
  2950. /**
  2951. * Retrieves the top-level ancestor of this control.
  2952. */
  2953. get: function () {
  2954. var x = this;
  2955. while (x._parent) {
  2956. x = x._parent;
  2957. }
  2958. return x;
  2959. },
  2960. enumerable: true,
  2961. configurable: true
  2962. });
  2963. /** @internal */
  2964. AbstractControl.prototype._updateControlsErrors = function (emitEvent) {
  2965. this.status = this._calculateStatus();
  2966. if (emitEvent) {
  2967. this.statusChanges.emit(this.status);
  2968. }
  2969. if (this._parent) {
  2970. this._parent._updateControlsErrors(emitEvent);
  2971. }
  2972. };
  2973. /** @internal */
  2974. AbstractControl.prototype._initObservables = function () {
  2975. this.valueChanges = new EventEmitter();
  2976. this.statusChanges = new EventEmitter();
  2977. };
  2978. AbstractControl.prototype._calculateStatus = function () {
  2979. if (this._allControlsDisabled())
  2980. return DISABLED;
  2981. if (this.errors)
  2982. return INVALID;
  2983. if (this._anyControlsHaveStatus(PENDING))
  2984. return PENDING;
  2985. if (this._anyControlsHaveStatus(INVALID))
  2986. return INVALID;
  2987. return VALID;
  2988. };
  2989. /** @internal */
  2990. AbstractControl.prototype._anyControlsHaveStatus = function (status) {
  2991. return this._anyControls(function (control) { return control.status === status; });
  2992. };
  2993. /** @internal */
  2994. AbstractControl.prototype._anyControlsDirty = function () {
  2995. return this._anyControls(function (control) { return control.dirty; });
  2996. };
  2997. /** @internal */
  2998. AbstractControl.prototype._anyControlsTouched = function () {
  2999. return this._anyControls(function (control) { return control.touched; });
  3000. };
  3001. /** @internal */
  3002. AbstractControl.prototype._updatePristine = function (opts) {
  3003. if (opts === void 0) { opts = {}; }
  3004. this.pristine = !this._anyControlsDirty();
  3005. if (this._parent && !opts.onlySelf) {
  3006. this._parent._updatePristine(opts);
  3007. }
  3008. };
  3009. /** @internal */
  3010. AbstractControl.prototype._updateTouched = function (opts) {
  3011. if (opts === void 0) { opts = {}; }
  3012. this.touched = this._anyControlsTouched();
  3013. if (this._parent && !opts.onlySelf) {
  3014. this._parent._updateTouched(opts);
  3015. }
  3016. };
  3017. /** @internal */
  3018. AbstractControl.prototype._isBoxedValue = function (formState) {
  3019. return typeof formState === 'object' && formState !== null &&
  3020. Object.keys(formState).length === 2 && 'value' in formState && 'disabled' in formState;
  3021. };
  3022. /** @internal */
  3023. AbstractControl.prototype._registerOnCollectionChange = function (fn) { this._onCollectionChange = fn; };
  3024. /** @internal */
  3025. AbstractControl.prototype._setUpdateStrategy = function (opts) {
  3026. if (isOptionsObj(opts) && opts.updateOn != null) {
  3027. this._updateOn = opts.updateOn;
  3028. }
  3029. };
  3030. /**
  3031. * Check to see if parent has been marked artificially dirty.
  3032. *
  3033. * @internal
  3034. */
  3035. AbstractControl.prototype._parentMarkedDirty = function (onlySelf) {
  3036. var parentDirty = this._parent && this._parent.dirty;
  3037. return !onlySelf && parentDirty && !this._parent._anyControlsDirty();
  3038. };
  3039. return AbstractControl;
  3040. }());
  3041. /**
  3042. * Tracks the value and validation status of an individual form control.
  3043. *
  3044. * This is one of the three fundamental building blocks of Angular forms, along with
  3045. * `FormGroup` and `FormArray`. It extends the `AbstractControl` class that
  3046. * implements most of the base functionality for accessing the value, validation status,
  3047. * user interactions and events.
  3048. *
  3049. * @see `AbstractControl`
  3050. * @see [Reactive Forms Guide](guide/reactive-forms)
  3051. * @see [Usage Notes](#usage-notes)
  3052. *
  3053. * @usageNotes
  3054. *
  3055. * ### Initializing Form Controls
  3056. *
  3057. * Instantiate a `FormControl`, with an initial value.
  3058. *
  3059. * ```ts
  3060. * const control = new FormControl('some value');
  3061. * console.log(control.value); // 'some value'
  3062. *```
  3063. *
  3064. * The following example initializes the control with a form state object. The `value`
  3065. * and `disabled` keys are required in this case.
  3066. *
  3067. * ```ts
  3068. * const control = new FormControl({ value: 'n/a', disabled: true });
  3069. * console.log(control.value); // 'n/a'
  3070. * console.log(control.status); // 'DISABLED'
  3071. * ```
  3072. *
  3073. * The following example initializes the control with a sync validator.
  3074. *
  3075. * ```ts
  3076. * const control = new FormControl('', Validators.required);
  3077. * console.log(control.value); // ''
  3078. * console.log(control.status); // 'INVALID'
  3079. * ```
  3080. *
  3081. * The following example initializes the control using an options object.
  3082. *
  3083. * ```ts
  3084. * const control = new FormControl('', {
  3085. * validators: Validators.required,
  3086. * asyncValidators: myAsyncValidator
  3087. * });
  3088. * ```
  3089. *
  3090. * ### Configure the control to update on a blur event
  3091. *
  3092. * Set the `updateOn` option to `'blur'` to update on the blur `event`.
  3093. *
  3094. * ```ts
  3095. * const control = new FormControl('', { updateOn: 'blur' });
  3096. * ```
  3097. *
  3098. * ### Configure the control to update on a submit event
  3099. *
  3100. * Set the `updateOn` option to `'submit'` to update on a submit `event`.
  3101. *
  3102. * ```ts
  3103. * const control = new FormControl('', { updateOn: 'submit' });
  3104. * ```
  3105. *
  3106. * ### Reset the control back to an initial value
  3107. *
  3108. * You reset to a specific form state by passing through a standalone
  3109. * value or a form state object that contains both a value and a disabled state
  3110. * (these are the only two properties that cannot be calculated).
  3111. *
  3112. * ```ts
  3113. * const control = new FormControl('Nancy');
  3114. *
  3115. * console.log(control.value); // 'Nancy'
  3116. *
  3117. * control.reset('Drew');
  3118. *
  3119. * console.log(control.value); // 'Drew'
  3120. * ```
  3121. *
  3122. * ### Reset the control back to an initial value and disabled
  3123. *
  3124. * ```
  3125. * const control = new FormControl('Nancy');
  3126. *
  3127. * console.log(control.value); // 'Nancy'
  3128. * console.log(control.status); // 'VALID'
  3129. *
  3130. * control.reset({ value: 'Drew', disabled: true });
  3131. *
  3132. * console.log(control.value); // 'Drew'
  3133. * console.log(control.status); // 'DISABLED'
  3134. * ```
  3135. *
  3136. * @publicApi
  3137. */
  3138. var FormControl = /** @class */ (function (_super) {
  3139. __extends(FormControl, _super);
  3140. /**
  3141. * Creates a new `FormControl` instance.
  3142. *
  3143. * @param formState Initializes the control with an initial value,
  3144. * or an object that defines the initial value and disabled state.
  3145. *
  3146. * @param validatorOrOpts A synchronous validator function, or an array of
  3147. * such functions, or an `AbstractControlOptions` object that contains validation functions
  3148. * and a validation trigger.
  3149. *
  3150. * @param asyncValidator A single async validator or array of async validator functions
  3151. *
  3152. */
  3153. function FormControl(formState, validatorOrOpts, asyncValidator) {
  3154. if (formState === void 0) { formState = null; }
  3155. var _this = _super.call(this, coerceToValidator(validatorOrOpts), coerceToAsyncValidator(asyncValidator, validatorOrOpts)) || this;
  3156. /** @internal */
  3157. _this._onChange = [];
  3158. _this._applyFormState(formState);
  3159. _this._setUpdateStrategy(validatorOrOpts);
  3160. _this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
  3161. _this._initObservables();
  3162. return _this;
  3163. }
  3164. /**
  3165. * Sets a new value for the form control.
  3166. *
  3167. * @param value The new value for the control.
  3168. * @param options Configuration options that determine how the control propagates changes
  3169. * and emits events when the value changes.
  3170. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  3171. * updateValueAndValidity} method.
  3172. *
  3173. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
  3174. * false.
  3175. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  3176. * `valueChanges`
  3177. * observables emit events with the latest status and value when the control value is updated.
  3178. * When false, no events are emitted.
  3179. * * `emitModelToViewChange`: When true or not supplied (the default), each change triggers an
  3180. * `onChange` event to
  3181. * update the view.
  3182. * * `emitViewToModelChange`: When true or not supplied (the default), each change triggers an
  3183. * `ngModelChange`
  3184. * event to update the model.
  3185. *
  3186. */
  3187. FormControl.prototype.setValue = function (value, options) {
  3188. var _this = this;
  3189. if (options === void 0) { options = {}; }
  3190. this.value = this._pendingValue = value;
  3191. if (this._onChange.length && options.emitModelToViewChange !== false) {
  3192. this._onChange.forEach(function (changeFn) { return changeFn(_this.value, options.emitViewToModelChange !== false); });
  3193. }
  3194. this.updateValueAndValidity(options);
  3195. };
  3196. /**
  3197. * Patches the value of a control.
  3198. *
  3199. * This function is functionally the same as {@link FormControl#setValue setValue} at this level.
  3200. * It exists for symmetry with {@link FormGroup#patchValue patchValue} on `FormGroups` and
  3201. * `FormArrays`, where it does behave differently.
  3202. *
  3203. * @see `setValue` for options
  3204. */
  3205. FormControl.prototype.patchValue = function (value, options) {
  3206. if (options === void 0) { options = {}; }
  3207. this.setValue(value, options);
  3208. };
  3209. /**
  3210. * Resets the form control, marking it `pristine` and `untouched`, and setting
  3211. * the value to null.
  3212. *
  3213. * @param formState Resets the control with an initial value,
  3214. * or an object that defines the initial value and disabled state.
  3215. *
  3216. * @param options Configuration options that determine how the control propagates changes
  3217. * and emits events after the value changes.
  3218. *
  3219. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
  3220. * false.
  3221. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  3222. * `valueChanges`
  3223. * observables emit events with the latest status and value when the control is reset.
  3224. * When false, no events are emitted.
  3225. *
  3226. */
  3227. FormControl.prototype.reset = function (formState, options) {
  3228. if (formState === void 0) { formState = null; }
  3229. if (options === void 0) { options = {}; }
  3230. this._applyFormState(formState);
  3231. this.markAsPristine(options);
  3232. this.markAsUntouched(options);
  3233. this.setValue(this.value, options);
  3234. this._pendingChange = false;
  3235. };
  3236. /**
  3237. * @internal
  3238. */
  3239. FormControl.prototype._updateValue = function () { };
  3240. /**
  3241. * @internal
  3242. */
  3243. FormControl.prototype._anyControls = function (condition) { return false; };
  3244. /**
  3245. * @internal
  3246. */
  3247. FormControl.prototype._allControlsDisabled = function () { return this.disabled; };
  3248. /**
  3249. * Register a listener for change events.
  3250. *
  3251. * @param fn The method that is called when the value changes
  3252. */
  3253. FormControl.prototype.registerOnChange = function (fn) { this._onChange.push(fn); };
  3254. /**
  3255. * @internal
  3256. */
  3257. FormControl.prototype._clearChangeFns = function () {
  3258. this._onChange = [];
  3259. this._onDisabledChange = [];
  3260. this._onCollectionChange = function () { };
  3261. };
  3262. /**
  3263. * Register a listener for disabled events.
  3264. *
  3265. * @param fn The method that is called when the disabled status changes.
  3266. */
  3267. FormControl.prototype.registerOnDisabledChange = function (fn) {
  3268. this._onDisabledChange.push(fn);
  3269. };
  3270. /**
  3271. * @internal
  3272. */
  3273. FormControl.prototype._forEachChild = function (cb) { };
  3274. /** @internal */
  3275. FormControl.prototype._syncPendingControls = function () {
  3276. if (this.updateOn === 'submit') {
  3277. if (this._pendingDirty)
  3278. this.markAsDirty();
  3279. if (this._pendingTouched)
  3280. this.markAsTouched();
  3281. if (this._pendingChange) {
  3282. this.setValue(this._pendingValue, { onlySelf: true, emitModelToViewChange: false });
  3283. return true;
  3284. }
  3285. }
  3286. return false;
  3287. };
  3288. FormControl.prototype._applyFormState = function (formState) {
  3289. if (this._isBoxedValue(formState)) {
  3290. this.value = this._pendingValue = formState.value;
  3291. formState.disabled ? this.disable({ onlySelf: true, emitEvent: false }) :
  3292. this.enable({ onlySelf: true, emitEvent: false });
  3293. }
  3294. else {
  3295. this.value = this._pendingValue = formState;
  3296. }
  3297. };
  3298. return FormControl;
  3299. }(AbstractControl));
  3300. /**
  3301. * Tracks the value and validity state of a group of `FormControl` instances.
  3302. *
  3303. * A `FormGroup` aggregates the values of each child `FormControl` into one object,
  3304. * with each control name as the key. It calculates its status by reducing the status values
  3305. * of its children. For example, if one of the controls in a group is invalid, the entire
  3306. * group becomes invalid.
  3307. *
  3308. * `FormGroup` is one of the three fundamental building blocks used to define forms in Angular,
  3309. * along with `FormControl` and `FormArray`.
  3310. *
  3311. * When instantiating a `FormGroup`, pass in a collection of child controls as the first
  3312. * argument. The key for each child registers the name for the control.
  3313. *
  3314. * @usageNotes
  3315. *
  3316. * ### Create a form group with 2 controls
  3317. *
  3318. * ```
  3319. * const form = new FormGroup({
  3320. * first: new FormControl('Nancy', Validators.minLength(2)),
  3321. * last: new FormControl('Drew'),
  3322. * });
  3323. *
  3324. * console.log(form.value); // {first: 'Nancy', last; 'Drew'}
  3325. * console.log(form.status); // 'VALID'
  3326. * ```
  3327. *
  3328. * ### Create a form group with a group-level validator
  3329. *
  3330. * You include group-level validators as the second arg, or group-level async
  3331. * validators as the third arg. These come in handy when you want to perform validation
  3332. * that considers the value of more than one child control.
  3333. *
  3334. * ```
  3335. * const form = new FormGroup({
  3336. * password: new FormControl('', Validators.minLength(2)),
  3337. * passwordConfirm: new FormControl('', Validators.minLength(2)),
  3338. * }, passwordMatchValidator);
  3339. *
  3340. *
  3341. * function passwordMatchValidator(g: FormGroup) {
  3342. * return g.get('password').value === g.get('passwordConfirm').value
  3343. * ? null : {'mismatch': true};
  3344. * }
  3345. * ```
  3346. *
  3347. * Like `FormControl` instances, you choose to pass in
  3348. * validators and async validators as part of an options object.
  3349. *
  3350. * ```
  3351. * const form = new FormGroup({
  3352. * password: new FormControl('')
  3353. * passwordConfirm: new FormControl('')
  3354. * }, { validators: passwordMatchValidator, asyncValidators: otherValidator });
  3355. * ```
  3356. *
  3357. * ### Set the updateOn property for all controls in a form group
  3358. *
  3359. * The options object is used to set a default value for each child
  3360. * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
  3361. * group level, all child controls default to 'blur', unless the child
  3362. * has explicitly specified a different `updateOn` value.
  3363. *
  3364. * ```ts
  3365. * const c = new FormGroup({
  3366. * one: new FormControl()
  3367. * }, { updateOn: 'blur' });
  3368. * ```
  3369. *
  3370. * @publicApi
  3371. */
  3372. var FormGroup = /** @class */ (function (_super) {
  3373. __extends(FormGroup, _super);
  3374. /**
  3375. * Creates a new `FormGroup` instance.
  3376. *
  3377. * @param controls A collection of child controls. The key for each child is the name
  3378. * under which it is registered.
  3379. *
  3380. * @param validatorOrOpts A synchronous validator function, or an array of
  3381. * such functions, or an `AbstractControlOptions` object that contains validation functions
  3382. * and a validation trigger.
  3383. *
  3384. * @param asyncValidator A single async validator or array of async validator functions
  3385. *
  3386. */
  3387. function FormGroup(controls, validatorOrOpts, asyncValidator) {
  3388. var _this = _super.call(this, coerceToValidator(validatorOrOpts), coerceToAsyncValidator(asyncValidator, validatorOrOpts)) || this;
  3389. _this.controls = controls;
  3390. _this._initObservables();
  3391. _this._setUpdateStrategy(validatorOrOpts);
  3392. _this._setUpControls();
  3393. _this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
  3394. return _this;
  3395. }
  3396. /**
  3397. * Registers a control with the group's list of controls.
  3398. *
  3399. * This method does not update the value or validity of the control.
  3400. * Use {@link FormGroup#addControl addControl} instead.
  3401. *
  3402. * @param name The control name to register in the collection
  3403. * @param control Provides the control for the given name
  3404. */
  3405. FormGroup.prototype.registerControl = function (name, control) {
  3406. if (this.controls[name])
  3407. return this.controls[name];
  3408. this.controls[name] = control;
  3409. control.setParent(this);
  3410. control._registerOnCollectionChange(this._onCollectionChange);
  3411. return control;
  3412. };
  3413. /**
  3414. * Add a control to this group.
  3415. *
  3416. * This method also updates the value and validity of the control.
  3417. *
  3418. * @param name The control name to add to the collection
  3419. * @param control Provides the control for the given name
  3420. */
  3421. FormGroup.prototype.addControl = function (name, control) {
  3422. this.registerControl(name, control);
  3423. this.updateValueAndValidity();
  3424. this._onCollectionChange();
  3425. };
  3426. /**
  3427. * Remove a control from this group.
  3428. *
  3429. * @param name The control name to remove from the collection
  3430. */
  3431. FormGroup.prototype.removeControl = function (name) {
  3432. if (this.controls[name])
  3433. this.controls[name]._registerOnCollectionChange(function () { });
  3434. delete (this.controls[name]);
  3435. this.updateValueAndValidity();
  3436. this._onCollectionChange();
  3437. };
  3438. /**
  3439. * Replace an existing control.
  3440. *
  3441. * @param name The control name to replace in the collection
  3442. * @param control Provides the control for the given name
  3443. */
  3444. FormGroup.prototype.setControl = function (name, control) {
  3445. if (this.controls[name])
  3446. this.controls[name]._registerOnCollectionChange(function () { });
  3447. delete (this.controls[name]);
  3448. if (control)
  3449. this.registerControl(name, control);
  3450. this.updateValueAndValidity();
  3451. this._onCollectionChange();
  3452. };
  3453. /**
  3454. * Check whether there is an enabled control with the given name in the group.
  3455. *
  3456. * Reports false for disabled controls. If you'd like to check for existence in the group
  3457. * only, use {@link AbstractControl#get get} instead.
  3458. *
  3459. * @param name The control name to check for existence in the collection
  3460. *
  3461. * @returns false for disabled controls, true otherwise.
  3462. */
  3463. FormGroup.prototype.contains = function (controlName) {
  3464. return this.controls.hasOwnProperty(controlName) && this.controls[controlName].enabled;
  3465. };
  3466. /**
  3467. * Sets the value of the `FormGroup`. It accepts an object that matches
  3468. * the structure of the group, with control names as keys.
  3469. *
  3470. * @usageNotes
  3471. * ### Set the complete value for the form group
  3472. *
  3473. * ```
  3474. * const form = new FormGroup({
  3475. * first: new FormControl(),
  3476. * last: new FormControl()
  3477. * });
  3478. *
  3479. * console.log(form.value); // {first: null, last: null}
  3480. *
  3481. * form.setValue({first: 'Nancy', last: 'Drew'});
  3482. * console.log(form.value); // {first: 'Nancy', last: 'Drew'}
  3483. * ```
  3484. *
  3485. * @throws When strict checks fail, such as setting the value of a control
  3486. * that doesn't exist or if you excluding the value of a control.
  3487. *
  3488. * @param value The new value for the control that matches the structure of the group.
  3489. * @param options Configuration options that determine how the control propagates changes
  3490. * and emits events after the value changes.
  3491. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  3492. * updateValueAndValidity} method.
  3493. *
  3494. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
  3495. * false.
  3496. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  3497. * `valueChanges`
  3498. * observables emit events with the latest status and value when the control value is updated.
  3499. * When false, no events are emitted.
  3500. */
  3501. FormGroup.prototype.setValue = function (value, options) {
  3502. var _this = this;
  3503. if (options === void 0) { options = {}; }
  3504. this._checkAllValuesPresent(value);
  3505. Object.keys(value).forEach(function (name) {
  3506. _this._throwIfControlMissing(name);
  3507. _this.controls[name].setValue(value[name], { onlySelf: true, emitEvent: options.emitEvent });
  3508. });
  3509. this.updateValueAndValidity(options);
  3510. };
  3511. /**
  3512. * Patches the value of the `FormGroup`. It accepts an object with control
  3513. * names as keys, and does its best to match the values to the correct controls
  3514. * in the group.
  3515. *
  3516. * It accepts both super-sets and sub-sets of the group without throwing an error.
  3517. *
  3518. * @usageNotes
  3519. * ### Patch the value for a form group
  3520. *
  3521. * ```
  3522. * const form = new FormGroup({
  3523. * first: new FormControl(),
  3524. * last: new FormControl()
  3525. * });
  3526. * console.log(form.value); // {first: null, last: null}
  3527. *
  3528. * form.patchValue({first: 'Nancy'});
  3529. * console.log(form.value); // {first: 'Nancy', last: null}
  3530. * ```
  3531. *
  3532. * @param value The object that matches the structure of the group.
  3533. * @param options Configuration options that determine how the control propagates changes and
  3534. * emits events after the value is patched.
  3535. * * `onlySelf`: When true, each change only affects this control and not its parent. Default is
  3536. * true.
  3537. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  3538. * `valueChanges`
  3539. * observables emit events with the latest status and value when the control value is updated.
  3540. * When false, no events are emitted.
  3541. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  3542. * updateValueAndValidity} method.
  3543. */
  3544. FormGroup.prototype.patchValue = function (value, options) {
  3545. var _this = this;
  3546. if (options === void 0) { options = {}; }
  3547. Object.keys(value).forEach(function (name) {
  3548. if (_this.controls[name]) {
  3549. _this.controls[name].patchValue(value[name], { onlySelf: true, emitEvent: options.emitEvent });
  3550. }
  3551. });
  3552. this.updateValueAndValidity(options);
  3553. };
  3554. /**
  3555. * Resets the `FormGroup`, marks all descendants are marked `pristine` and `untouched`, and
  3556. * the value of all descendants to null.
  3557. *
  3558. * You reset to a specific form state by passing in a map of states
  3559. * that matches the structure of your form, with control names as keys. The state
  3560. * is a standalone value or a form state object with both a value and a disabled
  3561. * status.
  3562. *
  3563. * @param formState Resets the control with an initial value,
  3564. * or an object that defines the initial value and disabled state.
  3565. *
  3566. * @param options Configuration options that determine how the control propagates changes
  3567. * and emits events when the group is reset.
  3568. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
  3569. * false.
  3570. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  3571. * `valueChanges`
  3572. * observables emit events with the latest status and value when the control is reset.
  3573. * When false, no events are emitted.
  3574. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  3575. * updateValueAndValidity} method.
  3576. *
  3577. * @usageNotes
  3578. *
  3579. * ### Reset the form group values
  3580. *
  3581. * ```ts
  3582. * const form = new FormGroup({
  3583. * first: new FormControl('first name'),
  3584. * last: new FormControl('last name')
  3585. * });
  3586. *
  3587. * console.log(form.value); // {first: 'first name', last: 'last name'}
  3588. *
  3589. * form.reset({ first: 'name', last: 'last name' });
  3590. *
  3591. * console.log(form.value); // {first: 'name', last: 'last name'}
  3592. * ```
  3593. *
  3594. * ### Reset the form group values and disabled status
  3595. *
  3596. * ```
  3597. * const form = new FormGroup({
  3598. * first: new FormControl('first name'),
  3599. * last: new FormControl('last name')
  3600. * });
  3601. *
  3602. * form.reset({
  3603. * first: {value: 'name', disabled: true},
  3604. * last: 'last'
  3605. * });
  3606. *
  3607. * console.log(this.form.value); // {first: 'name', last: 'last name'}
  3608. * console.log(this.form.get('first').status); // 'DISABLED'
  3609. * ```
  3610. */
  3611. FormGroup.prototype.reset = function (value, options) {
  3612. if (value === void 0) { value = {}; }
  3613. if (options === void 0) { options = {}; }
  3614. this._forEachChild(function (control, name) {
  3615. control.reset(value[name], { onlySelf: true, emitEvent: options.emitEvent });
  3616. });
  3617. this._updatePristine(options);
  3618. this._updateTouched(options);
  3619. this.updateValueAndValidity(options);
  3620. };
  3621. /**
  3622. * The aggregate value of the `FormGroup`, including any disabled controls.
  3623. *
  3624. * Retrieves all values regardless of disabled status.
  3625. * The `value` property is the best way to get the value of the group, because
  3626. * it excludes disabled controls in the `FormGroup`.
  3627. */
  3628. FormGroup.prototype.getRawValue = function () {
  3629. return this._reduceChildren({}, function (acc, control, name) {
  3630. acc[name] = control instanceof FormControl ? control.value : control.getRawValue();
  3631. return acc;
  3632. });
  3633. };
  3634. /** @internal */
  3635. FormGroup.prototype._syncPendingControls = function () {
  3636. var subtreeUpdated = this._reduceChildren(false, function (updated, child) {
  3637. return child._syncPendingControls() ? true : updated;
  3638. });
  3639. if (subtreeUpdated)
  3640. this.updateValueAndValidity({ onlySelf: true });
  3641. return subtreeUpdated;
  3642. };
  3643. /** @internal */
  3644. FormGroup.prototype._throwIfControlMissing = function (name) {
  3645. if (!Object.keys(this.controls).length) {
  3646. throw new Error("\n There are no form controls registered with this group yet. If you're using ngModel,\n you may want to check next tick (e.g. use setTimeout).\n ");
  3647. }
  3648. if (!this.controls[name]) {
  3649. throw new Error("Cannot find form control with name: " + name + ".");
  3650. }
  3651. };
  3652. /** @internal */
  3653. FormGroup.prototype._forEachChild = function (cb) {
  3654. var _this = this;
  3655. Object.keys(this.controls).forEach(function (k) { return cb(_this.controls[k], k); });
  3656. };
  3657. /** @internal */
  3658. FormGroup.prototype._setUpControls = function () {
  3659. var _this = this;
  3660. this._forEachChild(function (control) {
  3661. control.setParent(_this);
  3662. control._registerOnCollectionChange(_this._onCollectionChange);
  3663. });
  3664. };
  3665. /** @internal */
  3666. FormGroup.prototype._updateValue = function () { this.value = this._reduceValue(); };
  3667. /** @internal */
  3668. FormGroup.prototype._anyControls = function (condition) {
  3669. var _this = this;
  3670. var res = false;
  3671. this._forEachChild(function (control, name) {
  3672. res = res || (_this.contains(name) && condition(control));
  3673. });
  3674. return res;
  3675. };
  3676. /** @internal */
  3677. FormGroup.prototype._reduceValue = function () {
  3678. var _this = this;
  3679. return this._reduceChildren({}, function (acc, control, name) {
  3680. if (control.enabled || _this.disabled) {
  3681. acc[name] = control.value;
  3682. }
  3683. return acc;
  3684. });
  3685. };
  3686. /** @internal */
  3687. FormGroup.prototype._reduceChildren = function (initValue, fn) {
  3688. var res = initValue;
  3689. this._forEachChild(function (control, name) { res = fn(res, control, name); });
  3690. return res;
  3691. };
  3692. /** @internal */
  3693. FormGroup.prototype._allControlsDisabled = function () {
  3694. var e_1, _a;
  3695. try {
  3696. for (var _b = __values(Object.keys(this.controls)), _c = _b.next(); !_c.done; _c = _b.next()) {
  3697. var controlName = _c.value;
  3698. if (this.controls[controlName].enabled) {
  3699. return false;
  3700. }
  3701. }
  3702. }
  3703. catch (e_1_1) { e_1 = { error: e_1_1 }; }
  3704. finally {
  3705. try {
  3706. if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
  3707. }
  3708. finally { if (e_1) throw e_1.error; }
  3709. }
  3710. return Object.keys(this.controls).length > 0 || this.disabled;
  3711. };
  3712. /** @internal */
  3713. FormGroup.prototype._checkAllValuesPresent = function (value) {
  3714. this._forEachChild(function (control, name) {
  3715. if (value[name] === undefined) {
  3716. throw new Error("Must supply a value for form control with name: '" + name + "'.");
  3717. }
  3718. });
  3719. };
  3720. return FormGroup;
  3721. }(AbstractControl));
  3722. /**
  3723. * Tracks the value and validity state of an array of `FormControl`,
  3724. * `FormGroup` or `FormArray` instances.
  3725. *
  3726. * A `FormArray` aggregates the values of each child `FormControl` into an array.
  3727. * It calculates its status by reducing the status values of its children. For example, if one of
  3728. * the controls in a `FormArray` is invalid, the entire array becomes invalid.
  3729. *
  3730. * `FormArray` is one of the three fundamental building blocks used to define forms in Angular,
  3731. * along with `FormControl` and `FormGroup`.
  3732. *
  3733. * @usageNotes
  3734. *
  3735. * ### Create an array of form controls
  3736. *
  3737. * ```
  3738. * const arr = new FormArray([
  3739. * new FormControl('Nancy', Validators.minLength(2)),
  3740. * new FormControl('Drew'),
  3741. * ]);
  3742. *
  3743. * console.log(arr.value); // ['Nancy', 'Drew']
  3744. * console.log(arr.status); // 'VALID'
  3745. * ```
  3746. *
  3747. * ### Create a form array with array-level validators
  3748. *
  3749. * You include array-level validators and async validators. These come in handy
  3750. * when you want to perform validation that considers the value of more than one child
  3751. * control.
  3752. *
  3753. * The two types of validators are passed in separately as the second and third arg
  3754. * respectively, or together as part of an options object.
  3755. *
  3756. * ```
  3757. * const arr = new FormArray([
  3758. * new FormControl('Nancy'),
  3759. * new FormControl('Drew')
  3760. * ], {validators: myValidator, asyncValidators: myAsyncValidator});
  3761. * ```
  3762. *
  3763. * ### Set the updateOn property for all controls in a form array
  3764. *
  3765. * The options object is used to set a default value for each child
  3766. * control's `updateOn` property. If you set `updateOn` to `'blur'` at the
  3767. * array level, all child controls default to 'blur', unless the child
  3768. * has explicitly specified a different `updateOn` value.
  3769. *
  3770. * ```ts
  3771. * const arr = new FormArray([
  3772. * new FormControl()
  3773. * ], {updateOn: 'blur'});
  3774. * ```
  3775. *
  3776. * ### Adding or removing controls from a form array
  3777. *
  3778. * To change the controls in the array, use the `push`, `insert`, `removeAt` or `clear` methods
  3779. * in `FormArray` itself. These methods ensure the controls are properly tracked in the
  3780. * form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
  3781. * the `FormArray` directly, as that result in strange and unexpected behavior such
  3782. * as broken change detection.
  3783. *
  3784. * @publicApi
  3785. */
  3786. var FormArray = /** @class */ (function (_super) {
  3787. __extends(FormArray, _super);
  3788. /**
  3789. * Creates a new `FormArray` instance.
  3790. *
  3791. * @param controls An array of child controls. Each child control is given an index
  3792. * where it is registered.
  3793. *
  3794. * @param validatorOrOpts A synchronous validator function, or an array of
  3795. * such functions, or an `AbstractControlOptions` object that contains validation functions
  3796. * and a validation trigger.
  3797. *
  3798. * @param asyncValidator A single async validator or array of async validator functions
  3799. *
  3800. */
  3801. function FormArray(controls, validatorOrOpts, asyncValidator) {
  3802. var _this = _super.call(this, coerceToValidator(validatorOrOpts), coerceToAsyncValidator(asyncValidator, validatorOrOpts)) || this;
  3803. _this.controls = controls;
  3804. _this._initObservables();
  3805. _this._setUpdateStrategy(validatorOrOpts);
  3806. _this._setUpControls();
  3807. _this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
  3808. return _this;
  3809. }
  3810. /**
  3811. * Get the `AbstractControl` at the given `index` in the array.
  3812. *
  3813. * @param index Index in the array to retrieve the control
  3814. */
  3815. FormArray.prototype.at = function (index) { return this.controls[index]; };
  3816. /**
  3817. * Insert a new `AbstractControl` at the end of the array.
  3818. *
  3819. * @param control Form control to be inserted
  3820. */
  3821. FormArray.prototype.push = function (control) {
  3822. this.controls.push(control);
  3823. this._registerControl(control);
  3824. this.updateValueAndValidity();
  3825. this._onCollectionChange();
  3826. };
  3827. /**
  3828. * Insert a new `AbstractControl` at the given `index` in the array.
  3829. *
  3830. * @param index Index in the array to insert the control
  3831. * @param control Form control to be inserted
  3832. */
  3833. FormArray.prototype.insert = function (index, control) {
  3834. this.controls.splice(index, 0, control);
  3835. this._registerControl(control);
  3836. this.updateValueAndValidity();
  3837. };
  3838. /**
  3839. * Remove the control at the given `index` in the array.
  3840. *
  3841. * @param index Index in the array to remove the control
  3842. */
  3843. FormArray.prototype.removeAt = function (index) {
  3844. if (this.controls[index])
  3845. this.controls[index]._registerOnCollectionChange(function () { });
  3846. this.controls.splice(index, 1);
  3847. this.updateValueAndValidity();
  3848. };
  3849. /**
  3850. * Replace an existing control.
  3851. *
  3852. * @param index Index in the array to replace the control
  3853. * @param control The `AbstractControl` control to replace the existing control
  3854. */
  3855. FormArray.prototype.setControl = function (index, control) {
  3856. if (this.controls[index])
  3857. this.controls[index]._registerOnCollectionChange(function () { });
  3858. this.controls.splice(index, 1);
  3859. if (control) {
  3860. this.controls.splice(index, 0, control);
  3861. this._registerControl(control);
  3862. }
  3863. this.updateValueAndValidity();
  3864. this._onCollectionChange();
  3865. };
  3866. Object.defineProperty(FormArray.prototype, "length", {
  3867. /**
  3868. * Length of the control array.
  3869. */
  3870. get: function () { return this.controls.length; },
  3871. enumerable: true,
  3872. configurable: true
  3873. });
  3874. /**
  3875. * Sets the value of the `FormArray`. It accepts an array that matches
  3876. * the structure of the control.
  3877. *
  3878. * This method performs strict checks, and throws an error if you try
  3879. * to set the value of a control that doesn't exist or if you exclude the
  3880. * value of a control.
  3881. *
  3882. * @usageNotes
  3883. * ### Set the values for the controls in the form array
  3884. *
  3885. * ```
  3886. * const arr = new FormArray([
  3887. * new FormControl(),
  3888. * new FormControl()
  3889. * ]);
  3890. * console.log(arr.value); // [null, null]
  3891. *
  3892. * arr.setValue(['Nancy', 'Drew']);
  3893. * console.log(arr.value); // ['Nancy', 'Drew']
  3894. * ```
  3895. *
  3896. * @param value Array of values for the controls
  3897. * @param options Configure options that determine how the control propagates changes and
  3898. * emits events after the value changes
  3899. *
  3900. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
  3901. * is false.
  3902. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  3903. * `valueChanges`
  3904. * observables emit events with the latest status and value when the control value is updated.
  3905. * When false, no events are emitted.
  3906. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  3907. * updateValueAndValidity} method.
  3908. */
  3909. FormArray.prototype.setValue = function (value, options) {
  3910. var _this = this;
  3911. if (options === void 0) { options = {}; }
  3912. this._checkAllValuesPresent(value);
  3913. value.forEach(function (newValue, index) {
  3914. _this._throwIfControlMissing(index);
  3915. _this.at(index).setValue(newValue, { onlySelf: true, emitEvent: options.emitEvent });
  3916. });
  3917. this.updateValueAndValidity(options);
  3918. };
  3919. /**
  3920. * Patches the value of the `FormArray`. It accepts an array that matches the
  3921. * structure of the control, and does its best to match the values to the correct
  3922. * controls in the group.
  3923. *
  3924. * It accepts both super-sets and sub-sets of the array without throwing an error.
  3925. *
  3926. * @usageNotes
  3927. * ### Patch the values for controls in a form array
  3928. *
  3929. * ```
  3930. * const arr = new FormArray([
  3931. * new FormControl(),
  3932. * new FormControl()
  3933. * ]);
  3934. * console.log(arr.value); // [null, null]
  3935. *
  3936. * arr.patchValue(['Nancy']);
  3937. * console.log(arr.value); // ['Nancy', null]
  3938. * ```
  3939. *
  3940. * @param value Array of latest values for the controls
  3941. * @param options Configure options that determine how the control propagates changes and
  3942. * emits events after the value changes
  3943. *
  3944. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
  3945. * is false.
  3946. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  3947. * `valueChanges`
  3948. * observables emit events with the latest status and value when the control value is updated.
  3949. * When false, no events are emitted.
  3950. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  3951. * updateValueAndValidity} method.
  3952. */
  3953. FormArray.prototype.patchValue = function (value, options) {
  3954. var _this = this;
  3955. if (options === void 0) { options = {}; }
  3956. value.forEach(function (newValue, index) {
  3957. if (_this.at(index)) {
  3958. _this.at(index).patchValue(newValue, { onlySelf: true, emitEvent: options.emitEvent });
  3959. }
  3960. });
  3961. this.updateValueAndValidity(options);
  3962. };
  3963. /**
  3964. * Resets the `FormArray` and all descendants are marked `pristine` and `untouched`, and the
  3965. * value of all descendants to null or null maps.
  3966. *
  3967. * You reset to a specific form state by passing in an array of states
  3968. * that matches the structure of the control. The state is a standalone value
  3969. * or a form state object with both a value and a disabled status.
  3970. *
  3971. * @usageNotes
  3972. * ### Reset the values in a form array
  3973. *
  3974. * ```ts
  3975. * const arr = new FormArray([
  3976. * new FormControl(),
  3977. * new FormControl()
  3978. * ]);
  3979. * arr.reset(['name', 'last name']);
  3980. *
  3981. * console.log(this.arr.value); // ['name', 'last name']
  3982. * ```
  3983. *
  3984. * ### Reset the values in a form array and the disabled status for the first control
  3985. *
  3986. * ```
  3987. * this.arr.reset([
  3988. * {value: 'name', disabled: true},
  3989. * 'last'
  3990. * ]);
  3991. *
  3992. * console.log(this.arr.value); // ['name', 'last name']
  3993. * console.log(this.arr.get(0).status); // 'DISABLED'
  3994. * ```
  3995. *
  3996. * @param value Array of values for the controls
  3997. * @param options Configure options that determine how the control propagates changes and
  3998. * emits events after the value changes
  3999. *
  4000. * * `onlySelf`: When true, each change only affects this control, and not its parent. Default
  4001. * is false.
  4002. * * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
  4003. * `valueChanges`
  4004. * observables emit events with the latest status and value when the control is reset.
  4005. * When false, no events are emitted.
  4006. * The configuration options are passed to the {@link AbstractControl#updateValueAndValidity
  4007. * updateValueAndValidity} method.
  4008. */
  4009. FormArray.prototype.reset = function (value, options) {
  4010. if (value === void 0) { value = []; }
  4011. if (options === void 0) { options = {}; }
  4012. this._forEachChild(function (control, index) {
  4013. control.reset(value[index], { onlySelf: true, emitEvent: options.emitEvent });
  4014. });
  4015. this._updatePristine(options);
  4016. this._updateTouched(options);
  4017. this.updateValueAndValidity(options);
  4018. };
  4019. /**
  4020. * The aggregate value of the array, including any disabled controls.
  4021. *
  4022. * Reports all values regardless of disabled status.
  4023. * For enabled controls only, the `value` property is the best way to get the value of the array.
  4024. */
  4025. FormArray.prototype.getRawValue = function () {
  4026. return this.controls.map(function (control) {
  4027. return control instanceof FormControl ? control.value : control.getRawValue();
  4028. });
  4029. };
  4030. /**
  4031. * Remove all controls in the `FormArray`.
  4032. *
  4033. * @usageNotes
  4034. * ### Remove all elements from a FormArray
  4035. *
  4036. * ```ts
  4037. * const arr = new FormArray([
  4038. * new FormControl(),
  4039. * new FormControl()
  4040. * ]);
  4041. * console.log(arr.length); // 2
  4042. *
  4043. * arr.clear();
  4044. * console.log(arr.length); // 0
  4045. * ```
  4046. *
  4047. * It's a simpler and more efficient alternative to removing all elements one by one:
  4048. *
  4049. * ```ts
  4050. * const arr = new FormArray([
  4051. * new FormControl(),
  4052. * new FormControl()
  4053. * ]);
  4054. *
  4055. * while (arr.length) {
  4056. * arr.removeAt(0);
  4057. * }
  4058. * ```
  4059. */
  4060. FormArray.prototype.clear = function () {
  4061. if (this.controls.length < 1)
  4062. return;
  4063. this._forEachChild(function (control) { return control._registerOnCollectionChange(function () { }); });
  4064. this.controls.splice(0);
  4065. this.updateValueAndValidity();
  4066. };
  4067. /** @internal */
  4068. FormArray.prototype._syncPendingControls = function () {
  4069. var subtreeUpdated = this.controls.reduce(function (updated, child) {
  4070. return child._syncPendingControls() ? true : updated;
  4071. }, false);
  4072. if (subtreeUpdated)
  4073. this.updateValueAndValidity({ onlySelf: true });
  4074. return subtreeUpdated;
  4075. };
  4076. /** @internal */
  4077. FormArray.prototype._throwIfControlMissing = function (index) {
  4078. if (!this.controls.length) {
  4079. throw new Error("\n There are no form controls registered with this array yet. If you're using ngModel,\n you may want to check next tick (e.g. use setTimeout).\n ");
  4080. }
  4081. if (!this.at(index)) {
  4082. throw new Error("Cannot find form control at index " + index);
  4083. }
  4084. };
  4085. /** @internal */
  4086. FormArray.prototype._forEachChild = function (cb) {
  4087. this.controls.forEach(function (control, index) { cb(control, index); });
  4088. };
  4089. /** @internal */
  4090. FormArray.prototype._updateValue = function () {
  4091. var _this = this;
  4092. this.value =
  4093. this.controls.filter(function (control) { return control.enabled || _this.disabled; })
  4094. .map(function (control) { return control.value; });
  4095. };
  4096. /** @internal */
  4097. FormArray.prototype._anyControls = function (condition) {
  4098. return this.controls.some(function (control) { return control.enabled && condition(control); });
  4099. };
  4100. /** @internal */
  4101. FormArray.prototype._setUpControls = function () {
  4102. var _this = this;
  4103. this._forEachChild(function (control) { return _this._registerControl(control); });
  4104. };
  4105. /** @internal */
  4106. FormArray.prototype._checkAllValuesPresent = function (value) {
  4107. this._forEachChild(function (control, i) {
  4108. if (value[i] === undefined) {
  4109. throw new Error("Must supply a value for form control at index: " + i + ".");
  4110. }
  4111. });
  4112. };
  4113. /** @internal */
  4114. FormArray.prototype._allControlsDisabled = function () {
  4115. var e_2, _a;
  4116. try {
  4117. for (var _b = __values(this.controls), _c = _b.next(); !_c.done; _c = _b.next()) {
  4118. var control = _c.value;
  4119. if (control.enabled)
  4120. return false;
  4121. }
  4122. }
  4123. catch (e_2_1) { e_2 = { error: e_2_1 }; }
  4124. finally {
  4125. try {
  4126. if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
  4127. }
  4128. finally { if (e_2) throw e_2.error; }
  4129. }
  4130. return this.controls.length > 0 || this.disabled;
  4131. };
  4132. FormArray.prototype._registerControl = function (control) {
  4133. control.setParent(this);
  4134. control._registerOnCollectionChange(this._onCollectionChange);
  4135. };
  4136. return FormArray;
  4137. }(AbstractControl));
  4138. /**
  4139. * @license
  4140. * Copyright Google Inc. All Rights Reserved.
  4141. *
  4142. * Use of this source code is governed by an MIT-style license that can be
  4143. * found in the LICENSE file at https://angular.io/license
  4144. */
  4145. var formDirectiveProvider = {
  4146. provide: ControlContainer,
  4147. useExisting: forwardRef(function () { return NgForm; })
  4148. };
  4149. var ɵ0 = function () { return Promise.resolve(null); };
  4150. var resolvedPromise = (ɵ0)();
  4151. /**
  4152. * @description
  4153. * Creates a top-level `FormGroup` instance and binds it to a form
  4154. * to track aggregate form value and validation status.
  4155. *
  4156. * As soon as you import the `FormsModule`, this directive becomes active by default on
  4157. * all `<form>` tags. You don't need to add a special selector.
  4158. *
  4159. * You optionally export the directive into a local template variable using `ngForm` as the key
  4160. * (ex: `#myForm="ngForm"`). This is optional, but useful. Many properties from the underlying
  4161. * `FormGroup` instance are duplicated on the directive itself, so a reference to it
  4162. * gives you access to the aggregate value and validity status of the form, as well as
  4163. * user interaction properties like `dirty` and `touched`.
  4164. *
  4165. * To register child controls with the form, use `NgModel` with a `name`
  4166. * attribute. You may use `NgModelGroup` to create sub-groups within the form.
  4167. *
  4168. * If necessary, listen to the directive's `ngSubmit` event to be notified when the user has
  4169. * triggered a form submission. The `ngSubmit` event emits the original form
  4170. * submission event.
  4171. *
  4172. * In template driven forms, all `<form>` tags are automatically tagged as `NgForm`.
  4173. * To import the `FormsModule` but skip its usage in some forms,
  4174. * for example, to use native HTML5 validation, add the `ngNoForm` and the `<form>`
  4175. * tags won't create an `NgForm` directive. In reactive forms, using `ngNoForm` is
  4176. * unnecessary because the `<form>` tags are inert. In that case, you would
  4177. * refrain from using the `formGroup` directive.
  4178. *
  4179. * @usageNotes
  4180. *
  4181. * ### Migrating from deprecated ngForm selector
  4182. *
  4183. * Support for using `ngForm` element selector has been deprecated in Angular v6 and will be removed
  4184. * in Angular v9.
  4185. *
  4186. * This has been deprecated to keep selectors consistent with other core Angular selectors,
  4187. * as element selectors are typically written in kebab-case.
  4188. *
  4189. * Now deprecated:
  4190. * ```html
  4191. * <ngForm #myForm="ngForm">
  4192. * ```
  4193. *
  4194. * After:
  4195. * ```html
  4196. * <ng-form #myForm="ngForm">
  4197. * ```
  4198. *
  4199. * ### Listening for form submission
  4200. *
  4201. * The following example shows how to capture the form values from the "ngSubmit" event.
  4202. *
  4203. * {@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
  4204. *
  4205. * ### Setting the update options
  4206. *
  4207. * The following example shows you how to change the "updateOn" option from its default using
  4208. * ngFormOptions.
  4209. *
  4210. * ```html
  4211. * <form [ngFormOptions]="{updateOn: 'blur'}">
  4212. * <input name="one" ngModel> <!-- this ngModel will update on blur -->
  4213. * </form>
  4214. * ```
  4215. *
  4216. * @ngModule FormsModule
  4217. * @publicApi
  4218. */
  4219. var NgForm = /** @class */ (function (_super) {
  4220. __extends(NgForm, _super);
  4221. function NgForm(validators, asyncValidators) {
  4222. var _this = _super.call(this) || this;
  4223. /**
  4224. * @description
  4225. * Returns whether the form submission has been triggered.
  4226. */
  4227. _this.submitted = false;
  4228. _this._directives = [];
  4229. /**
  4230. * @description
  4231. * Event emitter for the "ngSubmit" event
  4232. */
  4233. _this.ngSubmit = new EventEmitter();
  4234. _this.form =
  4235. new FormGroup({}, composeValidators(validators), composeAsyncValidators(asyncValidators));
  4236. return _this;
  4237. }
  4238. /**
  4239. * @description
  4240. * Lifecycle method called after the view is initialized. For internal use only.
  4241. */
  4242. NgForm.prototype.ngAfterViewInit = function () { this._setUpdateStrategy(); };
  4243. Object.defineProperty(NgForm.prototype, "formDirective", {
  4244. /**
  4245. * @description
  4246. * The directive instance.
  4247. */
  4248. get: function () { return this; },
  4249. enumerable: true,
  4250. configurable: true
  4251. });
  4252. Object.defineProperty(NgForm.prototype, "control", {
  4253. /**
  4254. * @description
  4255. * The internal `FormGroup` instance.
  4256. */
  4257. get: function () { return this.form; },
  4258. enumerable: true,
  4259. configurable: true
  4260. });
  4261. Object.defineProperty(NgForm.prototype, "path", {
  4262. /**
  4263. * @description
  4264. * Returns an array representing the path to this group. Because this directive
  4265. * always lives at the top level of a form, it is always an empty array.
  4266. */
  4267. get: function () { return []; },
  4268. enumerable: true,
  4269. configurable: true
  4270. });
  4271. Object.defineProperty(NgForm.prototype, "controls", {
  4272. /**
  4273. * @description
  4274. * Returns a map of the controls in this group.
  4275. */
  4276. get: function () { return this.form.controls; },
  4277. enumerable: true,
  4278. configurable: true
  4279. });
  4280. /**
  4281. * @description
  4282. * Method that sets up the control directive in this group, re-calculates its value
  4283. * and validity, and adds the instance to the internal list of directives.
  4284. *
  4285. * @param dir The `NgModel` directive instance.
  4286. */
  4287. NgForm.prototype.addControl = function (dir) {
  4288. var _this = this;
  4289. resolvedPromise.then(function () {
  4290. var container = _this._findContainer(dir.path);
  4291. dir.control =
  4292. container.registerControl(dir.name, dir.control);
  4293. setUpControl(dir.control, dir);
  4294. dir.control.updateValueAndValidity({ emitEvent: false });
  4295. _this._directives.push(dir);
  4296. });
  4297. };
  4298. /**
  4299. * @description
  4300. * Retrieves the `FormControl` instance from the provided `NgModel` directive.
  4301. *
  4302. * @param dir The `NgModel` directive instance.
  4303. */
  4304. NgForm.prototype.getControl = function (dir) { return this.form.get(dir.path); };
  4305. /**
  4306. * @description
  4307. * Removes the `NgModel` instance from the internal list of directives
  4308. *
  4309. * @param dir The `NgModel` directive instance.
  4310. */
  4311. NgForm.prototype.removeControl = function (dir) {
  4312. var _this = this;
  4313. resolvedPromise.then(function () {
  4314. var container = _this._findContainer(dir.path);
  4315. if (container) {
  4316. container.removeControl(dir.name);
  4317. }
  4318. removeDir(_this._directives, dir);
  4319. });
  4320. };
  4321. /**
  4322. * @description
  4323. * Adds a new `NgModelGroup` directive instance to the form.
  4324. *
  4325. * @param dir The `NgModelGroup` directive instance.
  4326. */
  4327. NgForm.prototype.addFormGroup = function (dir) {
  4328. var _this = this;
  4329. resolvedPromise.then(function () {
  4330. var container = _this._findContainer(dir.path);
  4331. var group = new FormGroup({});
  4332. setUpFormContainer(group, dir);
  4333. container.registerControl(dir.name, group);
  4334. group.updateValueAndValidity({ emitEvent: false });
  4335. });
  4336. };
  4337. /**
  4338. * @description
  4339. * Removes the `NgModelGroup` directive instance from the form.
  4340. *
  4341. * @param dir The `NgModelGroup` directive instance.
  4342. */
  4343. NgForm.prototype.removeFormGroup = function (dir) {
  4344. var _this = this;
  4345. resolvedPromise.then(function () {
  4346. var container = _this._findContainer(dir.path);
  4347. if (container) {
  4348. container.removeControl(dir.name);
  4349. }
  4350. });
  4351. };
  4352. /**
  4353. * @description
  4354. * Retrieves the `FormGroup` for a provided `NgModelGroup` directive instance
  4355. *
  4356. * @param dir The `NgModelGroup` directive instance.
  4357. */
  4358. NgForm.prototype.getFormGroup = function (dir) { return this.form.get(dir.path); };
  4359. /**
  4360. * Sets the new value for the provided `NgControl` directive.
  4361. *
  4362. * @param dir The `NgControl` directive instance.
  4363. * @param value The new value for the directive's control.
  4364. */
  4365. NgForm.prototype.updateModel = function (dir, value) {
  4366. var _this = this;
  4367. resolvedPromise.then(function () {
  4368. var ctrl = _this.form.get(dir.path);
  4369. ctrl.setValue(value);
  4370. });
  4371. };
  4372. /**
  4373. * @description
  4374. * Sets the value for this `FormGroup`.
  4375. *
  4376. * @param value The new value
  4377. */
  4378. NgForm.prototype.setValue = function (value) { this.control.setValue(value); };
  4379. /**
  4380. * @description
  4381. * Method called when the "submit" event is triggered on the form.
  4382. * Triggers the `ngSubmit` emitter to emit the "submit" event as its payload.
  4383. *
  4384. * @param $event The "submit" event object
  4385. */
  4386. NgForm.prototype.onSubmit = function ($event) {
  4387. this.submitted = true;
  4388. syncPendingControls(this.form, this._directives);
  4389. this.ngSubmit.emit($event);
  4390. return false;
  4391. };
  4392. /**
  4393. * @description
  4394. * Method called when the "reset" event is triggered on the form.
  4395. */
  4396. NgForm.prototype.onReset = function () { this.resetForm(); };
  4397. /**
  4398. * @description
  4399. * Resets the form to an initial value and resets its submitted status.
  4400. *
  4401. * @param value The new value for the form.
  4402. */
  4403. NgForm.prototype.resetForm = function (value) {
  4404. if (value === void 0) { value = undefined; }
  4405. this.form.reset(value);
  4406. this.submitted = false;
  4407. };
  4408. NgForm.prototype._setUpdateStrategy = function () {
  4409. if (this.options && this.options.updateOn != null) {
  4410. this.form._updateOn = this.options.updateOn;
  4411. }
  4412. };
  4413. /** @internal */
  4414. NgForm.prototype._findContainer = function (path) {
  4415. path.pop();
  4416. return path.length ? this.form.get(path) : this.form;
  4417. };
  4418. __decorate([
  4419. Input('ngFormOptions'),
  4420. __metadata("design:type", Object)
  4421. ], NgForm.prototype, "options", void 0);
  4422. NgForm = __decorate([
  4423. Directive({
  4424. selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,ng-form,[ngForm]',
  4425. providers: [formDirectiveProvider],
  4426. host: { '(submit)': 'onSubmit($event)', '(reset)': 'onReset()' },
  4427. outputs: ['ngSubmit'],
  4428. exportAs: 'ngForm'
  4429. }),
  4430. __param(0, Optional()), __param(0, Self()), __param(0, Inject(NG_VALIDATORS)),
  4431. __param(1, Optional()), __param(1, Self()), __param(1, Inject(NG_ASYNC_VALIDATORS)),
  4432. __metadata("design:paramtypes", [Array, Array])
  4433. ], NgForm);
  4434. return NgForm;
  4435. }(ControlContainer));
  4436. /**
  4437. * @license
  4438. * Copyright Google Inc. All Rights Reserved.
  4439. *
  4440. * Use of this source code is governed by an MIT-style license that can be
  4441. * found in the LICENSE file at https://angular.io/license
  4442. */
  4443. var TemplateDrivenErrors = /** @class */ (function () {
  4444. function TemplateDrivenErrors() {
  4445. }
  4446. TemplateDrivenErrors.modelParentException = function () {
  4447. throw new Error("\n ngModel cannot be used to register form controls with a parent formGroup directive. Try using\n formGroup's partner directive \"formControlName\" instead. Example:\n\n " + FormErrorExamples.formControlName + "\n\n Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:\n\n Example:\n\n " + FormErrorExamples.ngModelWithFormGroup);
  4448. };
  4449. TemplateDrivenErrors.formGroupNameException = function () {
  4450. throw new Error("\n ngModel cannot be used to register form controls with a parent formGroupName or formArrayName directive.\n\n Option 1: Use formControlName instead of ngModel (reactive strategy):\n\n " + FormErrorExamples.formGroupName + "\n\n Option 2: Update ngModel's parent be ngModelGroup (template-driven strategy):\n\n " + FormErrorExamples.ngModelGroup);
  4451. };
  4452. TemplateDrivenErrors.missingNameException = function () {
  4453. throw new Error("If ngModel is used within a form tag, either the name attribute must be set or the form\n control must be defined as 'standalone' in ngModelOptions.\n\n Example 1: <input [(ngModel)]=\"person.firstName\" name=\"first\">\n Example 2: <input [(ngModel)]=\"person.firstName\" [ngModelOptions]=\"{standalone: true}\">");
  4454. };
  4455. TemplateDrivenErrors.modelGroupParentException = function () {
  4456. throw new Error("\n ngModelGroup cannot be used with a parent formGroup directive.\n\n Option 1: Use formGroupName instead of ngModelGroup (reactive strategy):\n\n " + FormErrorExamples.formGroupName + "\n\n Option 2: Use a regular form tag instead of the formGroup directive (template-driven strategy):\n\n " + FormErrorExamples.ngModelGroup);
  4457. };
  4458. TemplateDrivenErrors.ngFormWarning = function () {
  4459. console.warn("\n It looks like you're using 'ngForm'.\n\n Support for using the 'ngForm' element selector has been deprecated in Angular v6 and will be removed\n in Angular v9.\n\n Use 'ng-form' instead.\n\n Before:\n <ngForm #myForm=\"ngForm\">\n\n After:\n <ng-form #myForm=\"ngForm\">\n ");
  4460. };
  4461. return TemplateDrivenErrors;
  4462. }());
  4463. /**
  4464. * @license
  4465. * Copyright Google Inc. All Rights Reserved.
  4466. *
  4467. * Use of this source code is governed by an MIT-style license that can be
  4468. * found in the LICENSE file at https://angular.io/license
  4469. */
  4470. /**
  4471. * @description
  4472. * `InjectionToken` to provide to turn off the warning when using 'ngForm' deprecated selector.
  4473. */
  4474. var NG_FORM_SELECTOR_WARNING = new InjectionToken('NgFormSelectorWarning');
  4475. /**
  4476. * This directive is solely used to display warnings when the deprecated `ngForm` selector is used.
  4477. *
  4478. * @deprecated in Angular v6 and will be removed in Angular v9.
  4479. * @ngModule FormsModule
  4480. * @publicApi
  4481. */
  4482. var NgFormSelectorWarning = /** @class */ (function () {
  4483. function NgFormSelectorWarning(ngFormWarning) {
  4484. if (((!ngFormWarning || ngFormWarning === 'once') && !NgFormSelectorWarning_1._ngFormWarning) ||
  4485. ngFormWarning === 'always') {
  4486. TemplateDrivenErrors.ngFormWarning();
  4487. NgFormSelectorWarning_1._ngFormWarning = true;
  4488. }
  4489. }
  4490. NgFormSelectorWarning_1 = NgFormSelectorWarning;
  4491. var NgFormSelectorWarning_1;
  4492. /**
  4493. * Static property used to track whether the deprecation warning for this selector has been sent.
  4494. * Used to support warning config of "once".
  4495. *
  4496. * @internal
  4497. */
  4498. NgFormSelectorWarning._ngFormWarning = false;
  4499. NgFormSelectorWarning = NgFormSelectorWarning_1 = __decorate([
  4500. Directive({ selector: 'ngForm' }),
  4501. __param(0, Optional()), __param(0, Inject(NG_FORM_SELECTOR_WARNING)),
  4502. __metadata("design:paramtypes", [Object])
  4503. ], NgFormSelectorWarning);
  4504. return NgFormSelectorWarning;
  4505. }());
  4506. /**
  4507. * @license
  4508. * Copyright Google Inc. All Rights Reserved.
  4509. *
  4510. * Use of this source code is governed by an MIT-style license that can be
  4511. * found in the LICENSE file at https://angular.io/license
  4512. */
  4513. /**
  4514. * @description
  4515. * A base class for code shared between the `NgModelGroup` and `FormGroupName` directives.
  4516. *
  4517. * @publicApi
  4518. */
  4519. var AbstractFormGroupDirective = /** @class */ (function (_super) {
  4520. __extends(AbstractFormGroupDirective, _super);
  4521. function AbstractFormGroupDirective() {
  4522. return _super !== null && _super.apply(this, arguments) || this;
  4523. }
  4524. /**
  4525. * @description
  4526. * An internal callback method triggered on the instance after the inputs are set.
  4527. * Registers the group with its parent group.
  4528. */
  4529. AbstractFormGroupDirective.prototype.ngOnInit = function () {
  4530. this._checkParentType();
  4531. this.formDirective.addFormGroup(this);
  4532. };
  4533. /**
  4534. * @description
  4535. * An internal callback method triggered before the instance is destroyed.
  4536. * Removes the group from its parent group.
  4537. */
  4538. AbstractFormGroupDirective.prototype.ngOnDestroy = function () {
  4539. if (this.formDirective) {
  4540. this.formDirective.removeFormGroup(this);
  4541. }
  4542. };
  4543. Object.defineProperty(AbstractFormGroupDirective.prototype, "control", {
  4544. /**
  4545. * @description
  4546. * The `FormGroup` bound to this directive.
  4547. */
  4548. get: function () { return this.formDirective.getFormGroup(this); },
  4549. enumerable: true,
  4550. configurable: true
  4551. });
  4552. Object.defineProperty(AbstractFormGroupDirective.prototype, "path", {
  4553. /**
  4554. * @description
  4555. * The path to this group from the top-level directive.
  4556. */
  4557. get: function () { return controlPath(this.name, this._parent); },
  4558. enumerable: true,
  4559. configurable: true
  4560. });
  4561. Object.defineProperty(AbstractFormGroupDirective.prototype, "formDirective", {
  4562. /**
  4563. * @description
  4564. * The top-level directive for this group if present, otherwise null.
  4565. */
  4566. get: function () { return this._parent ? this._parent.formDirective : null; },
  4567. enumerable: true,
  4568. configurable: true
  4569. });
  4570. Object.defineProperty(AbstractFormGroupDirective.prototype, "validator", {
  4571. /**
  4572. * @description
  4573. * The synchronous validators registered with this group.
  4574. */
  4575. get: function () { return composeValidators(this._validators); },
  4576. enumerable: true,
  4577. configurable: true
  4578. });
  4579. Object.defineProperty(AbstractFormGroupDirective.prototype, "asyncValidator", {
  4580. /**
  4581. * @description
  4582. * The async validators registered with this group.
  4583. */
  4584. get: function () {
  4585. return composeAsyncValidators(this._asyncValidators);
  4586. },
  4587. enumerable: true,
  4588. configurable: true
  4589. });
  4590. /** @internal */
  4591. AbstractFormGroupDirective.prototype._checkParentType = function () { };
  4592. return AbstractFormGroupDirective;
  4593. }(ControlContainer));
  4594. /**
  4595. * @license
  4596. * Copyright Google Inc. All Rights Reserved.
  4597. *
  4598. * Use of this source code is governed by an MIT-style license that can be
  4599. * found in the LICENSE file at https://angular.io/license
  4600. */
  4601. var modelGroupProvider = {
  4602. provide: ControlContainer,
  4603. useExisting: forwardRef(function () { return NgModelGroup; })
  4604. };
  4605. /**
  4606. * @description
  4607. * Creates and binds a `FormGroup` instance to a DOM element.
  4608. *
  4609. * This directive can only be used as a child of `NgForm` (within `<form>` tags).
  4610. *
  4611. * Use this directive to validate a sub-group of your form separately from the
  4612. * rest of your form, or if some values in your domain model make more sense
  4613. * to consume together in a nested object.
  4614. *
  4615. * Provide a name for the sub-group and it will become the key
  4616. * for the sub-group in the form's full value. If you need direct access, export the directive into
  4617. * a local template variable using `ngModelGroup` (ex: `#myGroup="ngModelGroup"`).
  4618. *
  4619. * @usageNotes
  4620. *
  4621. * ### Consuming controls in a grouping
  4622. *
  4623. * The following example shows you how to combine controls together in a sub-group
  4624. * of the form.
  4625. *
  4626. * {@example forms/ts/ngModelGroup/ng_model_group_example.ts region='Component'}
  4627. *
  4628. * @ngModule FormsModule
  4629. * @publicApi
  4630. */
  4631. var NgModelGroup = /** @class */ (function (_super) {
  4632. __extends(NgModelGroup, _super);
  4633. function NgModelGroup(parent, validators, asyncValidators) {
  4634. var _this = _super.call(this) || this;
  4635. _this._parent = parent;
  4636. _this._validators = validators;
  4637. _this._asyncValidators = asyncValidators;
  4638. return _this;
  4639. }
  4640. NgModelGroup_1 = NgModelGroup;
  4641. /** @internal */
  4642. NgModelGroup.prototype._checkParentType = function () {
  4643. if (!(this._parent instanceof NgModelGroup_1) && !(this._parent instanceof NgForm)) {
  4644. TemplateDrivenErrors.modelGroupParentException();
  4645. }
  4646. };
  4647. var NgModelGroup_1;
  4648. __decorate([
  4649. Input('ngModelGroup'),
  4650. __metadata("design:type", String)
  4651. ], NgModelGroup.prototype, "name", void 0);
  4652. NgModelGroup = NgModelGroup_1 = __decorate([
  4653. Directive({ selector: '[ngModelGroup]', providers: [modelGroupProvider], exportAs: 'ngModelGroup' }),
  4654. __param(0, Host()), __param(0, SkipSelf()),
  4655. __param(1, Optional()), __param(1, Self()), __param(1, Inject(NG_VALIDATORS)),
  4656. __param(2, Optional()), __param(2, Self()), __param(2, Inject(NG_ASYNC_VALIDATORS)),
  4657. __metadata("design:paramtypes", [ControlContainer, Array, Array])
  4658. ], NgModelGroup);
  4659. return NgModelGroup;
  4660. }(AbstractFormGroupDirective));
  4661. /**
  4662. * @license
  4663. * Copyright Google Inc. All Rights Reserved.
  4664. *
  4665. * Use of this source code is governed by an MIT-style license that can be
  4666. * found in the LICENSE file at https://angular.io/license
  4667. */
  4668. var formControlBinding = {
  4669. provide: NgControl,
  4670. useExisting: forwardRef(function () { return NgModel; })
  4671. };
  4672. var ɵ0$1 = function () { return Promise.resolve(null); };
  4673. /**
  4674. * `ngModel` forces an additional change detection run when its inputs change:
  4675. * E.g.:
  4676. * ```
  4677. * <div>{{myModel.valid}}</div>
  4678. * <input [(ngModel)]="myValue" #myModel="ngModel">
  4679. * ```
  4680. * I.e. `ngModel` can export itself on the element and then be used in the template.
  4681. * Normally, this would result in expressions before the `input` that use the exported directive
  4682. * to have and old value as they have been
  4683. * dirty checked before. As this is a very common case for `ngModel`, we added this second change
  4684. * detection run.
  4685. *
  4686. * Notes:
  4687. * - this is just one extra run no matter how many `ngModel` have been changed.
  4688. * - this is a general problem when using `exportAs` for directives!
  4689. */
  4690. var resolvedPromise$1 = (ɵ0$1)();
  4691. /**
  4692. * @description
  4693. * Creates a `FormControl` instance from a domain model and binds it
  4694. * to a form control element.
  4695. *
  4696. * The `FormControl` instance tracks the value, user interaction, and
  4697. * validation status of the control and keeps the view synced with the model. If used
  4698. * within a parent form, the directive also registers itself with the form as a child
  4699. * control.
  4700. *
  4701. * This directive is used by itself or as part of a larger form. Use the
  4702. * `ngModel` selector to activate it.
  4703. *
  4704. * It accepts a domain model as an optional `Input`. If you have a one-way binding
  4705. * to `ngModel` with `[]` syntax, changing the value of the domain model in the component
  4706. * class sets the value in the view. If you have a two-way binding with `[()]` syntax
  4707. * (also known as 'banana-box syntax'), the value in the UI always syncs back to
  4708. * the domain model in your class.
  4709. *
  4710. * To inspect the properties of the associated `FormControl` (like validity state),
  4711. * export the directive into a local template variable using `ngModel` as the key (ex: `#myVar="ngModel"`).
  4712. * You then access the control using the directive's `control` property,
  4713. * but most properties used (like `valid` and `dirty`) fall through to the control anyway for direct access.
  4714. * See a full list of properties directly available in `AbstractControlDirective`.
  4715. *
  4716. * @see `RadioControlValueAccessor`
  4717. * @see `SelectControlValueAccessor`
  4718. *
  4719. * @usageNotes
  4720. *
  4721. * ### Using ngModel on a standalone control
  4722. *
  4723. * The following examples show a simple standalone control using `ngModel`:
  4724. *
  4725. * {@example forms/ts/simpleNgModel/simple_ng_model_example.ts region='Component'}
  4726. *
  4727. * When using the `ngModel` within `<form>` tags, you'll also need to supply a `name` attribute
  4728. * so that the control can be registered with the parent form under that name.
  4729. *
  4730. * In the context of a parent form, it's often unnecessary to include one-way or two-way binding,
  4731. * as the parent form syncs the value for you. You access its properties by exporting it into a
  4732. * local template variable using `ngForm` such as (`#f="ngForm"`). Use the variable where
  4733. * needed on form submission.
  4734. *
  4735. * If you do need to populate initial values into your form, using a one-way binding for
  4736. * `ngModel` tends to be sufficient as long as you use the exported form's value rather
  4737. * than the domain model's value on submit.
  4738. *
  4739. * ### Using ngModel within a form
  4740. *
  4741. * The following example shows controls using `ngModel` within a form:
  4742. *
  4743. * {@example forms/ts/simpleForm/simple_form_example.ts region='Component'}
  4744. *
  4745. * ### Using a standalone ngModel within a group
  4746. *
  4747. * The following example shows you how to use a standalone ngModel control
  4748. * within a form. This controls the display of the form, but doesn't contain form data.
  4749. *
  4750. * ```html
  4751. * <form>
  4752. * <input name="login" ngModel placeholder="Login">
  4753. * <input type="checkbox" ngModel [ngModelOptions]="{standalone: true}"> Show more options?
  4754. * </form>
  4755. * <!-- form value: {login: ''} -->
  4756. * ```
  4757. *
  4758. * ### Setting the ngModel name attribute through options
  4759. *
  4760. * The following example shows you an alternate way to set the name attribute. The name attribute is used
  4761. * within a custom form component, and the name `@Input` property serves a different purpose.
  4762. *
  4763. * ```html
  4764. * <form>
  4765. * <my-person-control name="Nancy" ngModel [ngModelOptions]="{name: 'user'}">
  4766. * </my-person-control>
  4767. * </form>
  4768. * <!-- form value: {user: ''} -->
  4769. * ```
  4770. *
  4771. * @ngModule FormsModule
  4772. * @publicApi
  4773. */
  4774. var NgModel = /** @class */ (function (_super) {
  4775. __extends(NgModel, _super);
  4776. function NgModel(parent, validators, asyncValidators, valueAccessors) {
  4777. var _this = _super.call(this) || this;
  4778. _this.control = new FormControl();
  4779. /** @internal */
  4780. _this._registered = false;
  4781. /**
  4782. * @description
  4783. * Event emitter for producing the `ngModelChange` event after
  4784. * the view model updates.
  4785. */
  4786. _this.update = new EventEmitter();
  4787. _this._parent = parent;
  4788. _this._rawValidators = validators || [];
  4789. _this._rawAsyncValidators = asyncValidators || [];
  4790. _this.valueAccessor = selectValueAccessor(_this, valueAccessors);
  4791. return _this;
  4792. }
  4793. /**
  4794. * @description
  4795. * A lifecycle method called when the directive's inputs change. For internal use
  4796. * only.
  4797. *
  4798. * @param changes A object of key/value pairs for the set of changed inputs.
  4799. */
  4800. NgModel.prototype.ngOnChanges = function (changes) {
  4801. this._checkForErrors();
  4802. if (!this._registered)
  4803. this._setUpControl();
  4804. if ('isDisabled' in changes) {
  4805. this._updateDisabled(changes);
  4806. }
  4807. if (isPropertyUpdated(changes, this.viewModel)) {
  4808. this._updateValue(this.model);
  4809. this.viewModel = this.model;
  4810. }
  4811. };
  4812. /**
  4813. * @description
  4814. * Lifecycle method called before the directive's instance is destroyed. For internal
  4815. * use only.
  4816. */
  4817. NgModel.prototype.ngOnDestroy = function () { this.formDirective && this.formDirective.removeControl(this); };
  4818. Object.defineProperty(NgModel.prototype, "path", {
  4819. /**
  4820. * @description
  4821. * Returns an array that represents the path from the top-level form to this control.
  4822. * Each index is the string name of the control on that level.
  4823. */
  4824. get: function () {
  4825. return this._parent ? controlPath(this.name, this._parent) : [this.name];
  4826. },
  4827. enumerable: true,
  4828. configurable: true
  4829. });
  4830. Object.defineProperty(NgModel.prototype, "formDirective", {
  4831. /**
  4832. * @description
  4833. * The top-level directive for this control if present, otherwise null.
  4834. */
  4835. get: function () { return this._parent ? this._parent.formDirective : null; },
  4836. enumerable: true,
  4837. configurable: true
  4838. });
  4839. Object.defineProperty(NgModel.prototype, "validator", {
  4840. /**
  4841. * @description
  4842. * Synchronous validator function composed of all the synchronous validators
  4843. * registered with this directive.
  4844. */
  4845. get: function () { return composeValidators(this._rawValidators); },
  4846. enumerable: true,
  4847. configurable: true
  4848. });
  4849. Object.defineProperty(NgModel.prototype, "asyncValidator", {
  4850. /**
  4851. * @description
  4852. * Async validator function composed of all the async validators registered with this
  4853. * directive.
  4854. */
  4855. get: function () {
  4856. return composeAsyncValidators(this._rawAsyncValidators);
  4857. },
  4858. enumerable: true,
  4859. configurable: true
  4860. });
  4861. /**
  4862. * @description
  4863. * Sets the new value for the view model and emits an `ngModelChange` event.
  4864. *
  4865. * @param newValue The new value emitted by `ngModelChange`.
  4866. */
  4867. NgModel.prototype.viewToModelUpdate = function (newValue) {
  4868. this.viewModel = newValue;
  4869. this.update.emit(newValue);
  4870. };
  4871. NgModel.prototype._setUpControl = function () {
  4872. this._setUpdateStrategy();
  4873. this._isStandalone() ? this._setUpStandalone() :
  4874. this.formDirective.addControl(this);
  4875. this._registered = true;
  4876. };
  4877. NgModel.prototype._setUpdateStrategy = function () {
  4878. if (this.options && this.options.updateOn != null) {
  4879. this.control._updateOn = this.options.updateOn;
  4880. }
  4881. };
  4882. NgModel.prototype._isStandalone = function () {
  4883. return !this._parent || !!(this.options && this.options.standalone);
  4884. };
  4885. NgModel.prototype._setUpStandalone = function () {
  4886. setUpControl(this.control, this);
  4887. this.control.updateValueAndValidity({ emitEvent: false });
  4888. };
  4889. NgModel.prototype._checkForErrors = function () {
  4890. if (!this._isStandalone()) {
  4891. this._checkParentType();
  4892. }
  4893. this._checkName();
  4894. };
  4895. NgModel.prototype._checkParentType = function () {
  4896. if (!(this._parent instanceof NgModelGroup) &&
  4897. this._parent instanceof AbstractFormGroupDirective) {
  4898. TemplateDrivenErrors.formGroupNameException();
  4899. }
  4900. else if (!(this._parent instanceof NgModelGroup) && !(this._parent instanceof NgForm)) {
  4901. TemplateDrivenErrors.modelParentException();
  4902. }
  4903. };
  4904. NgModel.prototype._checkName = function () {
  4905. if (this.options && this.options.name)
  4906. this.name = this.options.name;
  4907. if (!this._isStandalone() && !this.name) {
  4908. TemplateDrivenErrors.missingNameException();
  4909. }
  4910. };
  4911. NgModel.prototype._updateValue = function (value) {
  4912. var _this = this;
  4913. resolvedPromise$1.then(function () { _this.control.setValue(value, { emitViewToModelChange: false }); });
  4914. };
  4915. NgModel.prototype._updateDisabled = function (changes) {
  4916. var _this = this;
  4917. var disabledValue = changes['isDisabled'].currentValue;
  4918. var isDisabled = disabledValue === '' || (disabledValue && disabledValue !== 'false');
  4919. resolvedPromise$1.then(function () {
  4920. if (isDisabled && !_this.control.disabled) {
  4921. _this.control.disable();
  4922. }
  4923. else if (!isDisabled && _this.control.disabled) {
  4924. _this.control.enable();
  4925. }
  4926. });
  4927. };
  4928. __decorate([
  4929. Input(),
  4930. __metadata("design:type", String)
  4931. ], NgModel.prototype, "name", void 0);
  4932. __decorate([
  4933. Input('disabled'),
  4934. __metadata("design:type", Boolean)
  4935. ], NgModel.prototype, "isDisabled", void 0);
  4936. __decorate([
  4937. Input('ngModel'),
  4938. __metadata("design:type", Object)
  4939. ], NgModel.prototype, "model", void 0);
  4940. __decorate([
  4941. Input('ngModelOptions'),
  4942. __metadata("design:type", Object)
  4943. ], NgModel.prototype, "options", void 0);
  4944. __decorate([
  4945. Output('ngModelChange'),
  4946. __metadata("design:type", Object)
  4947. ], NgModel.prototype, "update", void 0);
  4948. NgModel = __decorate([
  4949. Directive({
  4950. selector: '[ngModel]:not([formControlName]):not([formControl])',
  4951. providers: [formControlBinding],
  4952. exportAs: 'ngModel'
  4953. }),
  4954. __param(0, Optional()), __param(0, Host()),
  4955. __param(1, Optional()), __param(1, Self()), __param(1, Inject(NG_VALIDATORS)),
  4956. __param(2, Optional()), __param(2, Self()), __param(2, Inject(NG_ASYNC_VALIDATORS)),
  4957. __param(3, Optional()), __param(3, Self()), __param(3, Inject(NG_VALUE_ACCESSOR)),
  4958. __metadata("design:paramtypes", [ControlContainer,
  4959. Array,
  4960. Array, Array])
  4961. ], NgModel);
  4962. return NgModel;
  4963. }(NgControl));
  4964. /**
  4965. * @license
  4966. * Copyright Google Inc. All Rights Reserved.
  4967. *
  4968. * Use of this source code is governed by an MIT-style license that can be
  4969. * found in the LICENSE file at https://angular.io/license
  4970. */
  4971. /**
  4972. * @description
  4973. *
  4974. * Adds `novalidate` attribute to all forms by default.
  4975. *
  4976. * `novalidate` is used to disable browser's native form validation.
  4977. *
  4978. * If you want to use native validation with Angular forms, just add `ngNativeValidate` attribute:
  4979. *
  4980. * ```
  4981. * <form ngNativeValidate></form>
  4982. * ```
  4983. *
  4984. * @publicApi
  4985. * @ngModule ReactiveFormsModule
  4986. * @ngModule FormsModule
  4987. */
  4988. var ɵNgNoValidate = /** @class */ (function () {
  4989. function ɵNgNoValidate() {
  4990. }
  4991. ɵNgNoValidate = __decorate([
  4992. Directive({
  4993. selector: 'form:not([ngNoForm]):not([ngNativeValidate])',
  4994. host: { 'novalidate': '' },
  4995. })
  4996. ], ɵNgNoValidate);
  4997. return ɵNgNoValidate;
  4998. }());
  4999. /**
  5000. * @license
  5001. * Copyright Google Inc. All Rights Reserved.
  5002. *
  5003. * Use of this source code is governed by an MIT-style license that can be
  5004. * found in the LICENSE file at https://angular.io/license
  5005. */
  5006. /**
  5007. * Token to provide to turn off the ngModel warning on formControl and formControlName.
  5008. */
  5009. var NG_MODEL_WITH_FORM_CONTROL_WARNING = new InjectionToken('NgModelWithFormControlWarning');
  5010. var formControlBinding$1 = {
  5011. provide: NgControl,
  5012. useExisting: forwardRef(function () { return FormControlDirective; })
  5013. };
  5014. /**
  5015. * @description
  5016. * * Syncs a standalone `FormControl` instance to a form control element.
  5017. *
  5018. * @see [Reactive Forms Guide](guide/reactive-forms)
  5019. * @see `FormControl`
  5020. * @see `AbstractControl`
  5021. *
  5022. * @usageNotes
  5023. *
  5024. * ### Registering a single form control
  5025. *
  5026. * The following examples shows how to register a standalone control and set its value.
  5027. *
  5028. * {@example forms/ts/simpleFormControl/simple_form_control_example.ts region='Component'}
  5029. *
  5030. * ### Use with ngModel
  5031. *
  5032. * Support for using the `ngModel` input property and `ngModelChange` event with reactive
  5033. * form directives has been deprecated in Angular v6 and will be removed in Angular v7.
  5034. *
  5035. * Now deprecated:
  5036. *
  5037. * ```html
  5038. * <input [formControl]="control" [(ngModel)]="value">
  5039. * ```
  5040. *
  5041. * ```ts
  5042. * this.value = 'some value';
  5043. * ```
  5044. *
  5045. * This has been deprecated for a few reasons. First, developers have found this pattern
  5046. * confusing. It seems like the actual `ngModel` directive is being used, but in fact it's
  5047. * an input/output property named `ngModel` on the reactive form directive that simply
  5048. * approximates (some of) its behavior. Specifically, it allows getting/setting the value
  5049. * and intercepting value events. However, some of `ngModel`'s other features - like
  5050. * delaying updates with`ngModelOptions` or exporting the directive - simply don't work,
  5051. * which has understandably caused some confusion.
  5052. *
  5053. * In addition, this pattern mixes template-driven and reactive forms strategies, which
  5054. * we generally don't recommend because it doesn't take advantage of the full benefits of
  5055. * either strategy. Setting the value in the template violates the template-agnostic
  5056. * principles behind reactive forms, whereas adding a `FormControl`/`FormGroup` layer in
  5057. * the class removes the convenience of defining forms in the template.
  5058. *
  5059. * To update your code before v7, you'll want to decide whether to stick with reactive form
  5060. * directives (and get/set values using reactive forms patterns) or switch over to
  5061. * template-driven directives.
  5062. *
  5063. * After (choice 1 - use reactive forms):
  5064. *
  5065. * ```html
  5066. * <input [formControl]="control">
  5067. * ```
  5068. *
  5069. * ```ts
  5070. * this.control.setValue('some value');
  5071. * ```
  5072. *
  5073. * After (choice 2 - use template-driven forms):
  5074. *
  5075. * ```html
  5076. * <input [(ngModel)]="value">
  5077. * ```
  5078. *
  5079. * ```ts
  5080. * this.value = 'some value';
  5081. * ```
  5082. *
  5083. * By default, when you use this pattern, you will see a deprecation warning once in dev
  5084. * mode. You can choose to silence this warning by providing a config for
  5085. * `ReactiveFormsModule` at import time:
  5086. *
  5087. * ```ts
  5088. * imports: [
  5089. * ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
  5090. * ]
  5091. * ```
  5092. *
  5093. * Alternatively, you can choose to surface a separate warning for each instance of this
  5094. * pattern with a config value of `"always"`. This may help to track down where in the code
  5095. * the pattern is being used as the code is being updated.
  5096. *
  5097. * @ngModule ReactiveFormsModule
  5098. * @publicApi
  5099. */
  5100. var FormControlDirective = /** @class */ (function (_super) {
  5101. __extends(FormControlDirective, _super);
  5102. function FormControlDirective(validators, asyncValidators, valueAccessors, _ngModelWarningConfig) {
  5103. var _this = _super.call(this) || this;
  5104. _this._ngModelWarningConfig = _ngModelWarningConfig;
  5105. /** @deprecated as of v6 */
  5106. _this.update = new EventEmitter();
  5107. /**
  5108. * @description
  5109. * Instance property used to track whether an ngModel warning has been sent out for this
  5110. * particular `FormControlDirective` instance. Used to support warning config of "always".
  5111. *
  5112. * @internal
  5113. */
  5114. _this._ngModelWarningSent = false;
  5115. _this._rawValidators = validators || [];
  5116. _this._rawAsyncValidators = asyncValidators || [];
  5117. _this.valueAccessor = selectValueAccessor(_this, valueAccessors);
  5118. return _this;
  5119. }
  5120. FormControlDirective_1 = FormControlDirective;
  5121. Object.defineProperty(FormControlDirective.prototype, "isDisabled", {
  5122. /**
  5123. * @description
  5124. * Triggers a warning that this input should not be used with reactive forms.
  5125. */
  5126. set: function (isDisabled) { ReactiveErrors.disabledAttrWarning(); },
  5127. enumerable: true,
  5128. configurable: true
  5129. });
  5130. /**
  5131. * @description
  5132. * A lifecycle method called when the directive's inputs change. For internal use
  5133. * only.
  5134. *
  5135. * @param changes A object of key/value pairs for the set of changed inputs.
  5136. */
  5137. FormControlDirective.prototype.ngOnChanges = function (changes) {
  5138. if (this._isControlChanged(changes)) {
  5139. setUpControl(this.form, this);
  5140. if (this.control.disabled && this.valueAccessor.setDisabledState) {
  5141. this.valueAccessor.setDisabledState(true);
  5142. }
  5143. this.form.updateValueAndValidity({ emitEvent: false });
  5144. }
  5145. if (isPropertyUpdated(changes, this.viewModel)) {
  5146. _ngModelWarning('formControl', FormControlDirective_1, this, this._ngModelWarningConfig);
  5147. this.form.setValue(this.model);
  5148. this.viewModel = this.model;
  5149. }
  5150. };
  5151. Object.defineProperty(FormControlDirective.prototype, "path", {
  5152. /**
  5153. * @description
  5154. * Returns an array that represents the path from the top-level form to this control.
  5155. * Each index is the string name of the control on that level.
  5156. */
  5157. get: function () { return []; },
  5158. enumerable: true,
  5159. configurable: true
  5160. });
  5161. Object.defineProperty(FormControlDirective.prototype, "validator", {
  5162. /**
  5163. * @description
  5164. * Synchronous validator function composed of all the synchronous validators
  5165. * registered with this directive.
  5166. */
  5167. get: function () { return composeValidators(this._rawValidators); },
  5168. enumerable: true,
  5169. configurable: true
  5170. });
  5171. Object.defineProperty(FormControlDirective.prototype, "asyncValidator", {
  5172. /**
  5173. * @description
  5174. * Async validator function composed of all the async validators registered with this
  5175. * directive.
  5176. */
  5177. get: function () {
  5178. return composeAsyncValidators(this._rawAsyncValidators);
  5179. },
  5180. enumerable: true,
  5181. configurable: true
  5182. });
  5183. Object.defineProperty(FormControlDirective.prototype, "control", {
  5184. /**
  5185. * @description
  5186. * The `FormControl` bound to this directive.
  5187. */
  5188. get: function () { return this.form; },
  5189. enumerable: true,
  5190. configurable: true
  5191. });
  5192. /**
  5193. * @description
  5194. * Sets the new value for the view model and emits an `ngModelChange` event.
  5195. *
  5196. * @param newValue The new value for the view model.
  5197. */
  5198. FormControlDirective.prototype.viewToModelUpdate = function (newValue) {
  5199. this.viewModel = newValue;
  5200. this.update.emit(newValue);
  5201. };
  5202. FormControlDirective.prototype._isControlChanged = function (changes) {
  5203. return changes.hasOwnProperty('form');
  5204. };
  5205. var FormControlDirective_1;
  5206. /**
  5207. * @description
  5208. * Static property used to track whether any ngModel warnings have been sent across
  5209. * all instances of FormControlDirective. Used to support warning config of "once".
  5210. *
  5211. * @internal
  5212. */
  5213. FormControlDirective._ngModelWarningSentOnce = false;
  5214. __decorate([
  5215. Input('formControl'),
  5216. __metadata("design:type", FormControl)
  5217. ], FormControlDirective.prototype, "form", void 0);
  5218. __decorate([
  5219. Input('disabled'),
  5220. __metadata("design:type", Boolean),
  5221. __metadata("design:paramtypes", [Boolean])
  5222. ], FormControlDirective.prototype, "isDisabled", null);
  5223. __decorate([
  5224. Input('ngModel'),
  5225. __metadata("design:type", Object)
  5226. ], FormControlDirective.prototype, "model", void 0);
  5227. __decorate([
  5228. Output('ngModelChange'),
  5229. __metadata("design:type", Object)
  5230. ], FormControlDirective.prototype, "update", void 0);
  5231. FormControlDirective = FormControlDirective_1 = __decorate([
  5232. Directive({ selector: '[formControl]', providers: [formControlBinding$1], exportAs: 'ngForm' }),
  5233. __param(0, Optional()), __param(0, Self()), __param(0, Inject(NG_VALIDATORS)),
  5234. __param(1, Optional()), __param(1, Self()), __param(1, Inject(NG_ASYNC_VALIDATORS)),
  5235. __param(2, Optional()), __param(2, Self()), __param(2, Inject(NG_VALUE_ACCESSOR)),
  5236. __param(3, Optional()), __param(3, Inject(NG_MODEL_WITH_FORM_CONTROL_WARNING)),
  5237. __metadata("design:paramtypes", [Array,
  5238. Array, Array, Object])
  5239. ], FormControlDirective);
  5240. return FormControlDirective;
  5241. }(NgControl));
  5242. /**
  5243. * @license
  5244. * Copyright Google Inc. All Rights Reserved.
  5245. *
  5246. * Use of this source code is governed by an MIT-style license that can be
  5247. * found in the LICENSE file at https://angular.io/license
  5248. */
  5249. var formDirectiveProvider$1 = {
  5250. provide: ControlContainer,
  5251. useExisting: forwardRef(function () { return FormGroupDirective; })
  5252. };
  5253. /**
  5254. * @description
  5255. *
  5256. * Binds an existing `FormGroup` to a DOM element.
  5257. *
  5258. * This directive accepts an existing `FormGroup` instance. It will then use this
  5259. * `FormGroup` instance to match any child `FormControl`, `FormGroup`,
  5260. * and `FormArray` instances to child `FormControlName`, `FormGroupName`,
  5261. * and `FormArrayName` directives.
  5262. *
  5263. * @see [Reactive Forms Guide](guide/reactive-forms)
  5264. * @see `AbstractControl`
  5265. *
  5266. * ### Register Form Group
  5267. *
  5268. * The following example registers a `FormGroup` with first name and last name controls,
  5269. * and listens for the *ngSubmit* event when the button is clicked.
  5270. *
  5271. * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
  5272. *
  5273. * @ngModule ReactiveFormsModule
  5274. * @publicApi
  5275. */
  5276. var FormGroupDirective = /** @class */ (function (_super) {
  5277. __extends(FormGroupDirective, _super);
  5278. function FormGroupDirective(_validators, _asyncValidators) {
  5279. var _this = _super.call(this) || this;
  5280. _this._validators = _validators;
  5281. _this._asyncValidators = _asyncValidators;
  5282. /**
  5283. * @description
  5284. * Reports whether the form submission has been triggered.
  5285. */
  5286. _this.submitted = false;
  5287. /**
  5288. * @description
  5289. * Tracks the list of added `FormControlName` instances
  5290. */
  5291. _this.directives = [];
  5292. /**
  5293. * @description
  5294. * Tracks the `FormGroup` bound to this directive.
  5295. */
  5296. _this.form = null;
  5297. /**
  5298. * @description
  5299. * Emits an event when the form submission has been triggered.
  5300. */
  5301. _this.ngSubmit = new EventEmitter();
  5302. return _this;
  5303. }
  5304. /**
  5305. * @description
  5306. * A lifecycle method called when the directive's inputs change. For internal use only.
  5307. *
  5308. * @param changes A object of key/value pairs for the set of changed inputs.
  5309. */
  5310. FormGroupDirective.prototype.ngOnChanges = function (changes) {
  5311. this._checkFormPresent();
  5312. if (changes.hasOwnProperty('form')) {
  5313. this._updateValidators();
  5314. this._updateDomValue();
  5315. this._updateRegistrations();
  5316. }
  5317. };
  5318. Object.defineProperty(FormGroupDirective.prototype, "formDirective", {
  5319. /**
  5320. * @description
  5321. * Returns this directive's instance.
  5322. */
  5323. get: function () { return this; },
  5324. enumerable: true,
  5325. configurable: true
  5326. });
  5327. Object.defineProperty(FormGroupDirective.prototype, "control", {
  5328. /**
  5329. * @description
  5330. * Returns the `FormGroup` bound to this directive.
  5331. */
  5332. get: function () { return this.form; },
  5333. enumerable: true,
  5334. configurable: true
  5335. });
  5336. Object.defineProperty(FormGroupDirective.prototype, "path", {
  5337. /**
  5338. * @description
  5339. * Returns an array representing the path to this group. Because this directive
  5340. * always lives at the top level of a form, it always an empty array.
  5341. */
  5342. get: function () { return []; },
  5343. enumerable: true,
  5344. configurable: true
  5345. });
  5346. /**
  5347. * @description
  5348. * Method that sets up the control directive in this group, re-calculates its value
  5349. * and validity, and adds the instance to the internal list of directives.
  5350. *
  5351. * @param dir The `FormControlName` directive instance.
  5352. */
  5353. FormGroupDirective.prototype.addControl = function (dir) {
  5354. var ctrl = this.form.get(dir.path);
  5355. setUpControl(ctrl, dir);
  5356. ctrl.updateValueAndValidity({ emitEvent: false });
  5357. this.directives.push(dir);
  5358. return ctrl;
  5359. };
  5360. /**
  5361. * @description
  5362. * Retrieves the `FormControl` instance from the provided `FormControlName` directive
  5363. *
  5364. * @param dir The `FormControlName` directive instance.
  5365. */
  5366. FormGroupDirective.prototype.getControl = function (dir) { return this.form.get(dir.path); };
  5367. /**
  5368. * @description
  5369. * Removes the `FormControlName` instance from the internal list of directives
  5370. *
  5371. * @param dir The `FormControlName` directive instance.
  5372. */
  5373. FormGroupDirective.prototype.removeControl = function (dir) { removeDir(this.directives, dir); };
  5374. /**
  5375. * Adds a new `FormGroupName` directive instance to the form.
  5376. *
  5377. * @param dir The `FormGroupName` directive instance.
  5378. */
  5379. FormGroupDirective.prototype.addFormGroup = function (dir) {
  5380. var ctrl = this.form.get(dir.path);
  5381. setUpFormContainer(ctrl, dir);
  5382. ctrl.updateValueAndValidity({ emitEvent: false });
  5383. };
  5384. /**
  5385. * No-op method to remove the form group.
  5386. *
  5387. * @param dir The `FormGroupName` directive instance.
  5388. */
  5389. FormGroupDirective.prototype.removeFormGroup = function (dir) { };
  5390. /**
  5391. * @description
  5392. * Retrieves the `FormGroup` for a provided `FormGroupName` directive instance
  5393. *
  5394. * @param dir The `FormGroupName` directive instance.
  5395. */
  5396. FormGroupDirective.prototype.getFormGroup = function (dir) { return this.form.get(dir.path); };
  5397. /**
  5398. * Adds a new `FormArrayName` directive instance to the form.
  5399. *
  5400. * @param dir The `FormArrayName` directive instance.
  5401. */
  5402. FormGroupDirective.prototype.addFormArray = function (dir) {
  5403. var ctrl = this.form.get(dir.path);
  5404. setUpFormContainer(ctrl, dir);
  5405. ctrl.updateValueAndValidity({ emitEvent: false });
  5406. };
  5407. /**
  5408. * No-op method to remove the form array.
  5409. *
  5410. * @param dir The `FormArrayName` directive instance.
  5411. */
  5412. FormGroupDirective.prototype.removeFormArray = function (dir) { };
  5413. /**
  5414. * @description
  5415. * Retrieves the `FormArray` for a provided `FormArrayName` directive instance.
  5416. *
  5417. * @param dir The `FormArrayName` directive instance.
  5418. */
  5419. FormGroupDirective.prototype.getFormArray = function (dir) { return this.form.get(dir.path); };
  5420. /**
  5421. * Sets the new value for the provided `FormControlName` directive.
  5422. *
  5423. * @param dir The `FormControlName` directive instance.
  5424. * @param value The new value for the directive's control.
  5425. */
  5426. FormGroupDirective.prototype.updateModel = function (dir, value) {
  5427. var ctrl = this.form.get(dir.path);
  5428. ctrl.setValue(value);
  5429. };
  5430. /**
  5431. * @description
  5432. * Method called with the "submit" event is triggered on the form.
  5433. * Triggers the `ngSubmit` emitter to emit the "submit" event as its payload.
  5434. *
  5435. * @param $event The "submit" event object
  5436. */
  5437. FormGroupDirective.prototype.onSubmit = function ($event) {
  5438. this.submitted = true;
  5439. syncPendingControls(this.form, this.directives);
  5440. this.ngSubmit.emit($event);
  5441. return false;
  5442. };
  5443. /**
  5444. * @description
  5445. * Method called when the "reset" event is triggered on the form.
  5446. */
  5447. FormGroupDirective.prototype.onReset = function () { this.resetForm(); };
  5448. /**
  5449. * @description
  5450. * Resets the form to an initial value and resets its submitted status.
  5451. *
  5452. * @param value The new value for the form.
  5453. */
  5454. FormGroupDirective.prototype.resetForm = function (value) {
  5455. if (value === void 0) { value = undefined; }
  5456. this.form.reset(value);
  5457. this.submitted = false;
  5458. };
  5459. /** @internal */
  5460. FormGroupDirective.prototype._updateDomValue = function () {
  5461. var _this = this;
  5462. this.directives.forEach(function (dir) {
  5463. var newCtrl = _this.form.get(dir.path);
  5464. if (dir.control !== newCtrl) {
  5465. cleanUpControl(dir.control, dir);
  5466. if (newCtrl)
  5467. setUpControl(newCtrl, dir);
  5468. dir.control = newCtrl;
  5469. }
  5470. });
  5471. this.form._updateTreeValidity({ emitEvent: false });
  5472. };
  5473. FormGroupDirective.prototype._updateRegistrations = function () {
  5474. var _this = this;
  5475. this.form._registerOnCollectionChange(function () { return _this._updateDomValue(); });
  5476. if (this._oldForm)
  5477. this._oldForm._registerOnCollectionChange(function () { });
  5478. this._oldForm = this.form;
  5479. };
  5480. FormGroupDirective.prototype._updateValidators = function () {
  5481. var sync = composeValidators(this._validators);
  5482. this.form.validator = Validators.compose([this.form.validator, sync]);
  5483. var async = composeAsyncValidators(this._asyncValidators);
  5484. this.form.asyncValidator = Validators.composeAsync([this.form.asyncValidator, async]);
  5485. };
  5486. FormGroupDirective.prototype._checkFormPresent = function () {
  5487. if (!this.form) {
  5488. ReactiveErrors.missingFormException();
  5489. }
  5490. };
  5491. __decorate([
  5492. Input('formGroup'),
  5493. __metadata("design:type", FormGroup)
  5494. ], FormGroupDirective.prototype, "form", void 0);
  5495. __decorate([
  5496. Output(),
  5497. __metadata("design:type", Object)
  5498. ], FormGroupDirective.prototype, "ngSubmit", void 0);
  5499. FormGroupDirective = __decorate([
  5500. Directive({
  5501. selector: '[formGroup]',
  5502. providers: [formDirectiveProvider$1],
  5503. host: { '(submit)': 'onSubmit($event)', '(reset)': 'onReset()' },
  5504. exportAs: 'ngForm'
  5505. }),
  5506. __param(0, Optional()), __param(0, Self()), __param(0, Inject(NG_VALIDATORS)),
  5507. __param(1, Optional()), __param(1, Self()), __param(1, Inject(NG_ASYNC_VALIDATORS)),
  5508. __metadata("design:paramtypes", [Array, Array])
  5509. ], FormGroupDirective);
  5510. return FormGroupDirective;
  5511. }(ControlContainer));
  5512. /**
  5513. * @license
  5514. * Copyright Google Inc. All Rights Reserved.
  5515. *
  5516. * Use of this source code is governed by an MIT-style license that can be
  5517. * found in the LICENSE file at https://angular.io/license
  5518. */
  5519. var formGroupNameProvider = {
  5520. provide: ControlContainer,
  5521. useExisting: forwardRef(function () { return FormGroupName; })
  5522. };
  5523. /**
  5524. * @description
  5525. *
  5526. * Syncs a nested `FormGroup` to a DOM element.
  5527. *
  5528. * This directive can only be used with a parent `FormGroupDirective`.
  5529. *
  5530. * It accepts the string name of the nested `FormGroup` to link, and
  5531. * looks for a `FormGroup` registered with that name in the parent
  5532. * `FormGroup` instance you passed into `FormGroupDirective`.
  5533. *
  5534. * Use nested form groups to validate a sub-group of a
  5535. * form separately from the rest or to group the values of certain
  5536. * controls into their own nested object.
  5537. *
  5538. * @see [Reactive Forms Guide](guide/reactive-forms)
  5539. *
  5540. * @usageNotes
  5541. *
  5542. * ### Access the group by name
  5543. *
  5544. * The following example uses the {@link AbstractControl#get get} method to access the
  5545. * associated `FormGroup`
  5546. *
  5547. * ```ts
  5548. * this.form.get('name');
  5549. * ```
  5550. *
  5551. * ### Access individual controls in the group
  5552. *
  5553. * The following example uses the {@link AbstractControl#get get} method to access
  5554. * individual controls within the group using dot syntax.
  5555. *
  5556. * ```ts
  5557. * this.form.get('name.first');
  5558. * ```
  5559. *
  5560. * ### Register a nested `FormGroup`.
  5561. *
  5562. * The following example registers a nested *name* `FormGroup` within an existing `FormGroup`,
  5563. * and provides methods to retrieve the nested `FormGroup` and individual controls.
  5564. *
  5565. * {@example forms/ts/nestedFormGroup/nested_form_group_example.ts region='Component'}
  5566. *
  5567. * @ngModule ReactiveFormsModule
  5568. * @publicApi
  5569. */
  5570. var FormGroupName = /** @class */ (function (_super) {
  5571. __extends(FormGroupName, _super);
  5572. function FormGroupName(parent, validators, asyncValidators) {
  5573. var _this = _super.call(this) || this;
  5574. _this._parent = parent;
  5575. _this._validators = validators;
  5576. _this._asyncValidators = asyncValidators;
  5577. return _this;
  5578. }
  5579. /** @internal */
  5580. FormGroupName.prototype._checkParentType = function () {
  5581. if (_hasInvalidParent(this._parent)) {
  5582. ReactiveErrors.groupParentException();
  5583. }
  5584. };
  5585. __decorate([
  5586. Input('formGroupName'),
  5587. __metadata("design:type", String)
  5588. ], FormGroupName.prototype, "name", void 0);
  5589. FormGroupName = __decorate([
  5590. Directive({ selector: '[formGroupName]', providers: [formGroupNameProvider] }),
  5591. __param(0, Optional()), __param(0, Host()), __param(0, SkipSelf()),
  5592. __param(1, Optional()), __param(1, Self()), __param(1, Inject(NG_VALIDATORS)),
  5593. __param(2, Optional()), __param(2, Self()), __param(2, Inject(NG_ASYNC_VALIDATORS)),
  5594. __metadata("design:paramtypes", [ControlContainer, Array, Array])
  5595. ], FormGroupName);
  5596. return FormGroupName;
  5597. }(AbstractFormGroupDirective));
  5598. var formArrayNameProvider = {
  5599. provide: ControlContainer,
  5600. useExisting: forwardRef(function () { return FormArrayName; })
  5601. };
  5602. /**
  5603. * @description
  5604. *
  5605. * Syncs a nested `FormArray` to a DOM element.
  5606. *
  5607. * This directive is designed to be used with a parent `FormGroupDirective` (selector:
  5608. * `[formGroup]`).
  5609. *
  5610. * It accepts the string name of the nested `FormArray` you want to link, and
  5611. * will look for a `FormArray` registered with that name in the parent
  5612. * `FormGroup` instance you passed into `FormGroupDirective`.
  5613. *
  5614. * @see [Reactive Forms Guide](guide/reactive-forms)
  5615. * @see `AbstractControl`
  5616. *
  5617. * @usageNotes
  5618. *
  5619. * ### Example
  5620. *
  5621. * {@example forms/ts/nestedFormArray/nested_form_array_example.ts region='Component'}
  5622. *
  5623. * @ngModule ReactiveFormsModule
  5624. * @publicApi
  5625. */
  5626. var FormArrayName = /** @class */ (function (_super) {
  5627. __extends(FormArrayName, _super);
  5628. function FormArrayName(parent, validators, asyncValidators) {
  5629. var _this = _super.call(this) || this;
  5630. _this._parent = parent;
  5631. _this._validators = validators;
  5632. _this._asyncValidators = asyncValidators;
  5633. return _this;
  5634. }
  5635. /**
  5636. * @description
  5637. * A lifecycle method called when the directive's inputs are initialized. For internal use only.
  5638. *
  5639. * @throws If the directive does not have a valid parent.
  5640. */
  5641. FormArrayName.prototype.ngOnInit = function () {
  5642. this._checkParentType();
  5643. this.formDirective.addFormArray(this);
  5644. };
  5645. /**
  5646. * @description
  5647. * A lifecycle method called before the directive's instance is destroyed. For internal use only.
  5648. */
  5649. FormArrayName.prototype.ngOnDestroy = function () {
  5650. if (this.formDirective) {
  5651. this.formDirective.removeFormArray(this);
  5652. }
  5653. };
  5654. Object.defineProperty(FormArrayName.prototype, "control", {
  5655. /**
  5656. * @description
  5657. * The `FormArray` bound to this directive.
  5658. */
  5659. get: function () { return this.formDirective.getFormArray(this); },
  5660. enumerable: true,
  5661. configurable: true
  5662. });
  5663. Object.defineProperty(FormArrayName.prototype, "formDirective", {
  5664. /**
  5665. * @description
  5666. * The top-level directive for this group if present, otherwise null.
  5667. */
  5668. get: function () {
  5669. return this._parent ? this._parent.formDirective : null;
  5670. },
  5671. enumerable: true,
  5672. configurable: true
  5673. });
  5674. Object.defineProperty(FormArrayName.prototype, "path", {
  5675. /**
  5676. * @description
  5677. * Returns an array that represents the path from the top-level form to this control.
  5678. * Each index is the string name of the control on that level.
  5679. */
  5680. get: function () { return controlPath(this.name, this._parent); },
  5681. enumerable: true,
  5682. configurable: true
  5683. });
  5684. Object.defineProperty(FormArrayName.prototype, "validator", {
  5685. /**
  5686. * @description
  5687. * Synchronous validator function composed of all the synchronous validators registered with this
  5688. * directive.
  5689. */
  5690. get: function () { return composeValidators(this._validators); },
  5691. enumerable: true,
  5692. configurable: true
  5693. });
  5694. Object.defineProperty(FormArrayName.prototype, "asyncValidator", {
  5695. /**
  5696. * @description
  5697. * Async validator function composed of all the async validators registered with this directive.
  5698. */
  5699. get: function () {
  5700. return composeAsyncValidators(this._asyncValidators);
  5701. },
  5702. enumerable: true,
  5703. configurable: true
  5704. });
  5705. FormArrayName.prototype._checkParentType = function () {
  5706. if (_hasInvalidParent(this._parent)) {
  5707. ReactiveErrors.arrayParentException();
  5708. }
  5709. };
  5710. __decorate([
  5711. Input('formArrayName'),
  5712. __metadata("design:type", String)
  5713. ], FormArrayName.prototype, "name", void 0);
  5714. FormArrayName = __decorate([
  5715. Directive({ selector: '[formArrayName]', providers: [formArrayNameProvider] }),
  5716. __param(0, Optional()), __param(0, Host()), __param(0, SkipSelf()),
  5717. __param(1, Optional()), __param(1, Self()), __param(1, Inject(NG_VALIDATORS)),
  5718. __param(2, Optional()), __param(2, Self()), __param(2, Inject(NG_ASYNC_VALIDATORS)),
  5719. __metadata("design:paramtypes", [ControlContainer, Array, Array])
  5720. ], FormArrayName);
  5721. return FormArrayName;
  5722. }(ControlContainer));
  5723. function _hasInvalidParent(parent) {
  5724. return !(parent instanceof FormGroupName) && !(parent instanceof FormGroupDirective) &&
  5725. !(parent instanceof FormArrayName);
  5726. }
  5727. /**
  5728. * @license
  5729. * Copyright Google Inc. All Rights Reserved.
  5730. *
  5731. * Use of this source code is governed by an MIT-style license that can be
  5732. * found in the LICENSE file at https://angular.io/license
  5733. */
  5734. var controlNameBinding = {
  5735. provide: NgControl,
  5736. useExisting: forwardRef(function () { return FormControlName; })
  5737. };
  5738. /**
  5739. * @description
  5740. * Syncs a `FormControl` in an existing `FormGroup` to a form control
  5741. * element by name.
  5742. *
  5743. * @see [Reactive Forms Guide](guide/reactive-forms)
  5744. * @see `FormControl`
  5745. * @see `AbstractControl`
  5746. *
  5747. * @usageNotes
  5748. *
  5749. * ### Register `FormControl` within a group
  5750. *
  5751. * The following example shows how to register multiple form controls within a form group
  5752. * and set their value.
  5753. *
  5754. * {@example forms/ts/simpleFormGroup/simple_form_group_example.ts region='Component'}
  5755. *
  5756. * To see `formControlName` examples with different form control types, see:
  5757. *
  5758. * * Radio buttons: `RadioControlValueAccessor`
  5759. * * Selects: `SelectControlValueAccessor`
  5760. *
  5761. * ### Use with ngModel
  5762. *
  5763. * Support for using the `ngModel` input property and `ngModelChange` event with reactive
  5764. * form directives has been deprecated in Angular v6 and will be removed in Angular v7.
  5765. *
  5766. * Now deprecated:
  5767. *
  5768. * ```html
  5769. * <form [formGroup]="form">
  5770. * <input formControlName="first" [(ngModel)]="value">
  5771. * </form>
  5772. * ```
  5773. *
  5774. * ```ts
  5775. * this.value = 'some value';
  5776. * ```
  5777. *
  5778. * This has been deprecated for a few reasons. First, developers have found this pattern
  5779. * confusing. It seems like the actual `ngModel` directive is being used, but in fact it's
  5780. * an input/output property named `ngModel` on the reactive form directive that simply
  5781. * approximates (some of) its behavior. Specifically, it allows getting/setting the value
  5782. * and intercepting value events. However, some of `ngModel`'s other features - like
  5783. * delaying updates with`ngModelOptions` or exporting the directive - simply don't work,
  5784. * which has understandably caused some confusion.
  5785. *
  5786. * In addition, this pattern mixes template-driven and reactive forms strategies, which
  5787. * we generally don't recommend because it doesn't take advantage of the full benefits of
  5788. * either strategy. Setting the value in the template violates the template-agnostic
  5789. * principles behind reactive forms, whereas adding a `FormControl`/`FormGroup` layer in
  5790. * the class removes the convenience of defining forms in the template.
  5791. *
  5792. * To update your code before v7, you'll want to decide whether to stick with reactive form
  5793. * directives (and get/set values using reactive forms patterns) or switch over to
  5794. * template-driven directives.
  5795. *
  5796. * After (choice 1 - use reactive forms):
  5797. *
  5798. * ```html
  5799. * <form [formGroup]="form">
  5800. * <input formControlName="first">
  5801. * </form>
  5802. * ```
  5803. *
  5804. * ```ts
  5805. * this.form.get('first').setValue('some value');
  5806. * ```
  5807. *
  5808. * After (choice 2 - use template-driven forms):
  5809. *
  5810. * ```html
  5811. * <input [(ngModel)]="value">
  5812. * ```
  5813. *
  5814. * ```ts
  5815. * this.value = 'some value';
  5816. * ```
  5817. *
  5818. * By default, when you use this pattern, you will see a deprecation warning once in dev
  5819. * mode. You can choose to silence this warning by providing a config for
  5820. * `ReactiveFormsModule` at import time:
  5821. *
  5822. * ```ts
  5823. * imports: [
  5824. * ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'})
  5825. * ]
  5826. * ```
  5827. *
  5828. * Alternatively, you can choose to surface a separate warning for each instance of this
  5829. * pattern with a config value of `"always"`. This may help to track down where in the code
  5830. * the pattern is being used as the code is being updated.
  5831. *
  5832. * @ngModule ReactiveFormsModule
  5833. * @publicApi
  5834. */
  5835. var FormControlName = /** @class */ (function (_super) {
  5836. __extends(FormControlName, _super);
  5837. function FormControlName(parent, validators, asyncValidators, valueAccessors, _ngModelWarningConfig) {
  5838. var _this = _super.call(this) || this;
  5839. _this._ngModelWarningConfig = _ngModelWarningConfig;
  5840. _this._added = false;
  5841. /** @deprecated as of v6 */
  5842. _this.update = new EventEmitter();
  5843. /**
  5844. * @description
  5845. * Instance property used to track whether an ngModel warning has been sent out for this
  5846. * particular FormControlName instance. Used to support warning config of "always".
  5847. *
  5848. * @internal
  5849. */
  5850. _this._ngModelWarningSent = false;
  5851. _this._parent = parent;
  5852. _this._rawValidators = validators || [];
  5853. _this._rawAsyncValidators = asyncValidators || [];
  5854. _this.valueAccessor = selectValueAccessor(_this, valueAccessors);
  5855. return _this;
  5856. }
  5857. FormControlName_1 = FormControlName;
  5858. Object.defineProperty(FormControlName.prototype, "isDisabled", {
  5859. /**
  5860. * @description
  5861. * Triggers a warning that this input should not be used with reactive forms.
  5862. */
  5863. set: function (isDisabled) { ReactiveErrors.disabledAttrWarning(); },
  5864. enumerable: true,
  5865. configurable: true
  5866. });
  5867. /**
  5868. * @description
  5869. * A lifecycle method called when the directive's inputs change. For internal use only.
  5870. *
  5871. * @param changes A object of key/value pairs for the set of changed inputs.
  5872. */
  5873. FormControlName.prototype.ngOnChanges = function (changes) {
  5874. if (!this._added)
  5875. this._setUpControl();
  5876. if (isPropertyUpdated(changes, this.viewModel)) {
  5877. _ngModelWarning('formControlName', FormControlName_1, this, this._ngModelWarningConfig);
  5878. this.viewModel = this.model;
  5879. this.formDirective.updateModel(this, this.model);
  5880. }
  5881. };
  5882. /**
  5883. * @description
  5884. * Lifecycle method called before the directive's instance is destroyed. For internal use only.
  5885. */
  5886. FormControlName.prototype.ngOnDestroy = function () {
  5887. if (this.formDirective) {
  5888. this.formDirective.removeControl(this);
  5889. }
  5890. };
  5891. /**
  5892. * @description
  5893. * Sets the new value for the view model and emits an `ngModelChange` event.
  5894. *
  5895. * @param newValue The new value for the view model.
  5896. */
  5897. FormControlName.prototype.viewToModelUpdate = function (newValue) {
  5898. this.viewModel = newValue;
  5899. this.update.emit(newValue);
  5900. };
  5901. Object.defineProperty(FormControlName.prototype, "path", {
  5902. /**
  5903. * @description
  5904. * Returns an array that represents the path from the top-level form to this control.
  5905. * Each index is the string name of the control on that level.
  5906. */
  5907. get: function () { return controlPath(this.name, this._parent); },
  5908. enumerable: true,
  5909. configurable: true
  5910. });
  5911. Object.defineProperty(FormControlName.prototype, "formDirective", {
  5912. /**
  5913. * @description
  5914. * The top-level directive for this group if present, otherwise null.
  5915. */
  5916. get: function () { return this._parent ? this._parent.formDirective : null; },
  5917. enumerable: true,
  5918. configurable: true
  5919. });
  5920. Object.defineProperty(FormControlName.prototype, "validator", {
  5921. /**
  5922. * @description
  5923. * Synchronous validator function composed of all the synchronous validators
  5924. * registered with this directive.
  5925. */
  5926. get: function () { return composeValidators(this._rawValidators); },
  5927. enumerable: true,
  5928. configurable: true
  5929. });
  5930. Object.defineProperty(FormControlName.prototype, "asyncValidator", {
  5931. /**
  5932. * @description
  5933. * Async validator function composed of all the async validators registered with this
  5934. * directive.
  5935. */
  5936. get: function () {
  5937. return composeAsyncValidators(this._rawAsyncValidators);
  5938. },
  5939. enumerable: true,
  5940. configurable: true
  5941. });
  5942. FormControlName.prototype._checkParentType = function () {
  5943. if (!(this._parent instanceof FormGroupName) &&
  5944. this._parent instanceof AbstractFormGroupDirective) {
  5945. ReactiveErrors.ngModelGroupException();
  5946. }
  5947. else if (!(this._parent instanceof FormGroupName) && !(this._parent instanceof FormGroupDirective) &&
  5948. !(this._parent instanceof FormArrayName)) {
  5949. ReactiveErrors.controlParentException();
  5950. }
  5951. };
  5952. FormControlName.prototype._setUpControl = function () {
  5953. this._checkParentType();
  5954. this.control = this.formDirective.addControl(this);
  5955. if (this.control.disabled && this.valueAccessor.setDisabledState) {
  5956. this.valueAccessor.setDisabledState(true);
  5957. }
  5958. this._added = true;
  5959. };
  5960. var FormControlName_1;
  5961. /**
  5962. * @description
  5963. * Static property used to track whether any ngModel warnings have been sent across
  5964. * all instances of FormControlName. Used to support warning config of "once".
  5965. *
  5966. * @internal
  5967. */
  5968. FormControlName._ngModelWarningSentOnce = false;
  5969. __decorate([
  5970. Input('formControlName'),
  5971. __metadata("design:type", String)
  5972. ], FormControlName.prototype, "name", void 0);
  5973. __decorate([
  5974. Input('disabled'),
  5975. __metadata("design:type", Boolean),
  5976. __metadata("design:paramtypes", [Boolean])
  5977. ], FormControlName.prototype, "isDisabled", null);
  5978. __decorate([
  5979. Input('ngModel'),
  5980. __metadata("design:type", Object)
  5981. ], FormControlName.prototype, "model", void 0);
  5982. __decorate([
  5983. Output('ngModelChange'),
  5984. __metadata("design:type", Object)
  5985. ], FormControlName.prototype, "update", void 0);
  5986. FormControlName = FormControlName_1 = __decorate([
  5987. Directive({ selector: '[formControlName]', providers: [controlNameBinding] }),
  5988. __param(0, Optional()), __param(0, Host()), __param(0, SkipSelf()),
  5989. __param(1, Optional()), __param(1, Self()), __param(1, Inject(NG_VALIDATORS)),
  5990. __param(2, Optional()), __param(2, Self()), __param(2, Inject(NG_ASYNC_VALIDATORS)),
  5991. __param(3, Optional()), __param(3, Self()), __param(3, Inject(NG_VALUE_ACCESSOR)),
  5992. __param(4, Optional()), __param(4, Inject(NG_MODEL_WITH_FORM_CONTROL_WARNING)),
  5993. __metadata("design:paramtypes", [ControlContainer,
  5994. Array,
  5995. Array, Array, Object])
  5996. ], FormControlName);
  5997. return FormControlName;
  5998. }(NgControl));
  5999. /**
  6000. * @license
  6001. * Copyright Google Inc. All Rights Reserved.
  6002. *
  6003. * Use of this source code is governed by an MIT-style license that can be
  6004. * found in the LICENSE file at https://angular.io/license
  6005. */
  6006. /**
  6007. * @description
  6008. * Provider which adds `RequiredValidator` to the `NG_VALIDATORS` multi-provider list.
  6009. */
  6010. var REQUIRED_VALIDATOR = {
  6011. provide: NG_VALIDATORS,
  6012. useExisting: forwardRef(function () { return RequiredValidator; }),
  6013. multi: true
  6014. };
  6015. /**
  6016. * @description
  6017. * Provider which adds `CheckboxRequiredValidator` to the `NG_VALIDATORS` multi-provider list.
  6018. */
  6019. var CHECKBOX_REQUIRED_VALIDATOR = {
  6020. provide: NG_VALIDATORS,
  6021. useExisting: forwardRef(function () { return CheckboxRequiredValidator; }),
  6022. multi: true
  6023. };
  6024. /**
  6025. * @description
  6026. * A directive that adds the `required` validator to any controls marked with the
  6027. * `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
  6028. *
  6029. * @see [Form Validation](guide/form-validation)
  6030. *
  6031. * @usageNotes
  6032. *
  6033. * ### Adding a required validator using template-driven forms
  6034. *
  6035. * ```
  6036. * <input name="fullName" ngModel required>
  6037. * ```
  6038. *
  6039. * @ngModule FormsModule
  6040. * @ngModule ReactiveFormsModule
  6041. * @publicApi
  6042. */
  6043. var RequiredValidator = /** @class */ (function () {
  6044. function RequiredValidator() {
  6045. }
  6046. Object.defineProperty(RequiredValidator.prototype, "required", {
  6047. /**
  6048. * @description
  6049. * Tracks changes to the required attribute bound to this directive.
  6050. */
  6051. get: function () { return this._required; },
  6052. set: function (value) {
  6053. this._required = value != null && value !== false && "" + value !== 'false';
  6054. if (this._onChange)
  6055. this._onChange();
  6056. },
  6057. enumerable: true,
  6058. configurable: true
  6059. });
  6060. /**
  6061. * @description
  6062. * Method that validates whether the control is empty.
  6063. * Returns the validation result if enabled, otherwise null.
  6064. */
  6065. RequiredValidator.prototype.validate = function (control) {
  6066. return this.required ? Validators.required(control) : null;
  6067. };
  6068. /**
  6069. * @description
  6070. * Registers a callback function to call when the validator inputs change.
  6071. *
  6072. * @param fn The callback function
  6073. */
  6074. RequiredValidator.prototype.registerOnValidatorChange = function (fn) { this._onChange = fn; };
  6075. __decorate([
  6076. Input(),
  6077. __metadata("design:type", Object),
  6078. __metadata("design:paramtypes", [Object])
  6079. ], RequiredValidator.prototype, "required", null);
  6080. RequiredValidator = __decorate([
  6081. Directive({
  6082. selector: ':not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]',
  6083. providers: [REQUIRED_VALIDATOR],
  6084. host: { '[attr.required]': 'required ? "" : null' }
  6085. })
  6086. ], RequiredValidator);
  6087. return RequiredValidator;
  6088. }());
  6089. /**
  6090. * A Directive that adds the `required` validator to checkbox controls marked with the
  6091. * `required` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
  6092. *
  6093. * @see [Form Validation](guide/form-validation)
  6094. *
  6095. * @usageNotes
  6096. *
  6097. * ### Adding a required checkbox validator using template-driven forms
  6098. *
  6099. * The following example shows how to add a checkbox required validator to an input attached to an ngModel binding.
  6100. *
  6101. * ```
  6102. * <input type="checkbox" name="active" ngModel required>
  6103. * ```
  6104. *
  6105. * @publicApi
  6106. * @ngModule FormsModule
  6107. * @ngModule ReactiveFormsModule
  6108. */
  6109. var CheckboxRequiredValidator = /** @class */ (function (_super) {
  6110. __extends(CheckboxRequiredValidator, _super);
  6111. function CheckboxRequiredValidator() {
  6112. return _super !== null && _super.apply(this, arguments) || this;
  6113. }
  6114. /**
  6115. * @description
  6116. * Method that validates whether or not the checkbox has been checked.
  6117. * Returns the validation result if enabled, otherwise null.
  6118. */
  6119. CheckboxRequiredValidator.prototype.validate = function (control) {
  6120. return this.required ? Validators.requiredTrue(control) : null;
  6121. };
  6122. CheckboxRequiredValidator = __decorate([
  6123. Directive({
  6124. selector: 'input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]',
  6125. providers: [CHECKBOX_REQUIRED_VALIDATOR],
  6126. host: { '[attr.required]': 'required ? "" : null' }
  6127. })
  6128. ], CheckboxRequiredValidator);
  6129. return CheckboxRequiredValidator;
  6130. }(RequiredValidator));
  6131. /**
  6132. * @description
  6133. * Provider which adds `EmailValidator` to the `NG_VALIDATORS` multi-provider list.
  6134. */
  6135. var EMAIL_VALIDATOR = {
  6136. provide: NG_VALIDATORS,
  6137. useExisting: forwardRef(function () { return EmailValidator; }),
  6138. multi: true
  6139. };
  6140. /**
  6141. * A directive that adds the `email` validator to controls marked with the
  6142. * `email` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
  6143. *
  6144. * @see [Form Validation](guide/form-validation)
  6145. *
  6146. * @usageNotes
  6147. *
  6148. * ### Adding an email validator
  6149. *
  6150. * The following example shows how to add an email validator to an input attached to an ngModel binding.
  6151. *
  6152. * ```
  6153. * <input type="email" name="email" ngModel email>
  6154. * <input type="email" name="email" ngModel email="true">
  6155. * <input type="email" name="email" ngModel [email]="true">
  6156. * ```
  6157. *
  6158. * @publicApi
  6159. * @ngModule FormsModule
  6160. * @ngModule ReactiveFormsModule
  6161. */
  6162. var EmailValidator = /** @class */ (function () {
  6163. function EmailValidator() {
  6164. }
  6165. Object.defineProperty(EmailValidator.prototype, "email", {
  6166. /**
  6167. * @description
  6168. * Tracks changes to the email attribute bound to this directive.
  6169. */
  6170. set: function (value) {
  6171. this._enabled = value === '' || value === true || value === 'true';
  6172. if (this._onChange)
  6173. this._onChange();
  6174. },
  6175. enumerable: true,
  6176. configurable: true
  6177. });
  6178. /**
  6179. * @description
  6180. * Method that validates whether an email address is valid.
  6181. * Returns the validation result if enabled, otherwise null.
  6182. */
  6183. EmailValidator.prototype.validate = function (control) {
  6184. return this._enabled ? Validators.email(control) : null;
  6185. };
  6186. /**
  6187. * @description
  6188. * Registers a callback function to call when the validator inputs change.
  6189. *
  6190. * @param fn The callback function
  6191. */
  6192. EmailValidator.prototype.registerOnValidatorChange = function (fn) { this._onChange = fn; };
  6193. __decorate([
  6194. Input(),
  6195. __metadata("design:type", Object),
  6196. __metadata("design:paramtypes", [Object])
  6197. ], EmailValidator.prototype, "email", null);
  6198. EmailValidator = __decorate([
  6199. Directive({
  6200. selector: '[email][formControlName],[email][formControl],[email][ngModel]',
  6201. providers: [EMAIL_VALIDATOR]
  6202. })
  6203. ], EmailValidator);
  6204. return EmailValidator;
  6205. }());
  6206. /**
  6207. * @description
  6208. * Provider which adds `MinLengthValidator` to the `NG_VALIDATORS` multi-provider list.
  6209. */
  6210. var MIN_LENGTH_VALIDATOR = {
  6211. provide: NG_VALIDATORS,
  6212. useExisting: forwardRef(function () { return MinLengthValidator; }),
  6213. multi: true
  6214. };
  6215. /**
  6216. * A directive that adds minimum length validation to controls marked with the
  6217. * `minlength` attribute. The directive is provided with the `NG_VALIDATORS` mult-provider list.
  6218. *
  6219. * @see [Form Validation](guide/form-validation)
  6220. *
  6221. * @usageNotes
  6222. *
  6223. * ### Adding a minimum length validator
  6224. *
  6225. * The following example shows how to add a minimum length validator to an input attached to an
  6226. * ngModel binding.
  6227. *
  6228. * ```html
  6229. * <input name="firstName" ngModel minlength="4">
  6230. * ```
  6231. *
  6232. * @ngModule ReactiveFormsModule
  6233. * @ngModule FormsModule
  6234. * @publicApi
  6235. */
  6236. var MinLengthValidator = /** @class */ (function () {
  6237. function MinLengthValidator() {
  6238. }
  6239. /**
  6240. * @description
  6241. * A lifecycle method called when the directive's inputs change. For internal use
  6242. * only.
  6243. *
  6244. * @param changes A object of key/value pairs for the set of changed inputs.
  6245. */
  6246. MinLengthValidator.prototype.ngOnChanges = function (changes) {
  6247. if ('minlength' in changes) {
  6248. this._createValidator();
  6249. if (this._onChange)
  6250. this._onChange();
  6251. }
  6252. };
  6253. /**
  6254. * @description
  6255. * Method that validates whether the value meets a minimum length
  6256. * requirement. Returns the validation result if enabled, otherwise null.
  6257. */
  6258. MinLengthValidator.prototype.validate = function (control) {
  6259. return this.minlength == null ? null : this._validator(control);
  6260. };
  6261. /**
  6262. * @description
  6263. * Registers a callback function to call when the validator inputs change.
  6264. *
  6265. * @param fn The callback function
  6266. */
  6267. MinLengthValidator.prototype.registerOnValidatorChange = function (fn) { this._onChange = fn; };
  6268. MinLengthValidator.prototype._createValidator = function () {
  6269. this._validator = Validators.minLength(parseInt(this.minlength, 10));
  6270. };
  6271. __decorate([
  6272. Input(),
  6273. __metadata("design:type", String)
  6274. ], MinLengthValidator.prototype, "minlength", void 0);
  6275. MinLengthValidator = __decorate([
  6276. Directive({
  6277. selector: '[minlength][formControlName],[minlength][formControl],[minlength][ngModel]',
  6278. providers: [MIN_LENGTH_VALIDATOR],
  6279. host: { '[attr.minlength]': 'minlength ? minlength : null' }
  6280. })
  6281. ], MinLengthValidator);
  6282. return MinLengthValidator;
  6283. }());
  6284. /**
  6285. * @description
  6286. * Provider which adds `MaxLengthValidator` to the `NG_VALIDATORS` multi-provider list.
  6287. */
  6288. var MAX_LENGTH_VALIDATOR = {
  6289. provide: NG_VALIDATORS,
  6290. useExisting: forwardRef(function () { return MaxLengthValidator; }),
  6291. multi: true
  6292. };
  6293. /**
  6294. * A directive that adds max length validation to controls marked with the
  6295. * `maxlength` attribute. The directive is provided with the `NG_VALIDATORS` multi-provider list.
  6296. *
  6297. * @see [Form Validation](guide/form-validation)
  6298. *
  6299. * @usageNotes
  6300. *
  6301. * ### Adding a maximum length validator
  6302. *
  6303. * The following example shows how to add a maximum length validator to an input attached to an
  6304. * ngModel binding.
  6305. *
  6306. * ```html
  6307. * <input name="firstName" ngModel maxlength="25">
  6308. * ```
  6309. *
  6310. * @ngModule ReactiveFormsModule
  6311. * @ngModule FormsModule
  6312. * @publicApi
  6313. */
  6314. var MaxLengthValidator = /** @class */ (function () {
  6315. function MaxLengthValidator() {
  6316. }
  6317. /**
  6318. * @description
  6319. * A lifecycle method called when the directive's inputs change. For internal use
  6320. * only.
  6321. *
  6322. * @param changes A object of key/value pairs for the set of changed inputs.
  6323. */
  6324. MaxLengthValidator.prototype.ngOnChanges = function (changes) {
  6325. if ('maxlength' in changes) {
  6326. this._createValidator();
  6327. if (this._onChange)
  6328. this._onChange();
  6329. }
  6330. };
  6331. /**
  6332. * @description
  6333. * Method that validates whether the value exceeds
  6334. * the maximum length requirement.
  6335. */
  6336. MaxLengthValidator.prototype.validate = function (control) {
  6337. return this.maxlength != null ? this._validator(control) : null;
  6338. };
  6339. /**
  6340. * @description
  6341. * Registers a callback function to call when the validator inputs change.
  6342. *
  6343. * @param fn The callback function
  6344. */
  6345. MaxLengthValidator.prototype.registerOnValidatorChange = function (fn) { this._onChange = fn; };
  6346. MaxLengthValidator.prototype._createValidator = function () {
  6347. this._validator = Validators.maxLength(parseInt(this.maxlength, 10));
  6348. };
  6349. __decorate([
  6350. Input(),
  6351. __metadata("design:type", String)
  6352. ], MaxLengthValidator.prototype, "maxlength", void 0);
  6353. MaxLengthValidator = __decorate([
  6354. Directive({
  6355. selector: '[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]',
  6356. providers: [MAX_LENGTH_VALIDATOR],
  6357. host: { '[attr.maxlength]': 'maxlength ? maxlength : null' }
  6358. })
  6359. ], MaxLengthValidator);
  6360. return MaxLengthValidator;
  6361. }());
  6362. /**
  6363. * @description
  6364. * Provider which adds `PatternValidator` to the `NG_VALIDATORS` multi-provider list.
  6365. */
  6366. var PATTERN_VALIDATOR = {
  6367. provide: NG_VALIDATORS,
  6368. useExisting: forwardRef(function () { return PatternValidator; }),
  6369. multi: true
  6370. };
  6371. /**
  6372. * @description
  6373. * A directive that adds regex pattern validation to controls marked with the
  6374. * `pattern` attribute. The regex must match the entire control value.
  6375. * The directive is provided with the `NG_VALIDATORS` multi-provider list.
  6376. *
  6377. * @see [Form Validation](guide/form-validation)
  6378. *
  6379. * @usageNotes
  6380. *
  6381. * ### Adding a pattern validator
  6382. *
  6383. * The following example shows how to add a pattern validator to an input attached to an
  6384. * ngModel binding.
  6385. *
  6386. * ```html
  6387. * <input name="firstName" ngModel pattern="[a-zA-Z ]*">
  6388. * ```
  6389. *
  6390. * @ngModule ReactiveFormsModule
  6391. * @ngModule FormsModule
  6392. * @publicApi
  6393. */
  6394. var PatternValidator = /** @class */ (function () {
  6395. function PatternValidator() {
  6396. }
  6397. /**
  6398. * @description
  6399. * A lifecycle method called when the directive's inputs change. For internal use
  6400. * only.
  6401. *
  6402. * @param changes A object of key/value pairs for the set of changed inputs.
  6403. */
  6404. PatternValidator.prototype.ngOnChanges = function (changes) {
  6405. if ('pattern' in changes) {
  6406. this._createValidator();
  6407. if (this._onChange)
  6408. this._onChange();
  6409. }
  6410. };
  6411. /**
  6412. * @description
  6413. * Method that validates whether the value matches the
  6414. * the pattern requirement.
  6415. */
  6416. PatternValidator.prototype.validate = function (control) { return this._validator(control); };
  6417. /**
  6418. * @description
  6419. * Registers a callback function to call when the validator inputs change.
  6420. *
  6421. * @param fn The callback function
  6422. */
  6423. PatternValidator.prototype.registerOnValidatorChange = function (fn) { this._onChange = fn; };
  6424. PatternValidator.prototype._createValidator = function () { this._validator = Validators.pattern(this.pattern); };
  6425. __decorate([
  6426. Input(),
  6427. __metadata("design:type", Object)
  6428. ], PatternValidator.prototype, "pattern", void 0);
  6429. PatternValidator = __decorate([
  6430. Directive({
  6431. selector: '[pattern][formControlName],[pattern][formControl],[pattern][ngModel]',
  6432. providers: [PATTERN_VALIDATOR],
  6433. host: { '[attr.pattern]': 'pattern ? pattern : null' }
  6434. })
  6435. ], PatternValidator);
  6436. return PatternValidator;
  6437. }());
  6438. /**
  6439. * @license
  6440. * Copyright Google Inc. All Rights Reserved.
  6441. *
  6442. * Use of this source code is governed by an MIT-style license that can be
  6443. * found in the LICENSE file at https://angular.io/license
  6444. */
  6445. var SHARED_FORM_DIRECTIVES = [
  6446. ɵNgNoValidate,
  6447. NgSelectOption,
  6448. ɵNgSelectMultipleOption,
  6449. DefaultValueAccessor,
  6450. NumberValueAccessor,
  6451. RangeValueAccessor,
  6452. CheckboxControlValueAccessor,
  6453. SelectControlValueAccessor,
  6454. SelectMultipleControlValueAccessor,
  6455. RadioControlValueAccessor,
  6456. NgControlStatus,
  6457. NgControlStatusGroup,
  6458. RequiredValidator,
  6459. MinLengthValidator,
  6460. MaxLengthValidator,
  6461. PatternValidator,
  6462. CheckboxRequiredValidator,
  6463. EmailValidator,
  6464. ];
  6465. var TEMPLATE_DRIVEN_DIRECTIVES = [NgModel, NgModelGroup, NgForm, NgFormSelectorWarning];
  6466. var REACTIVE_DRIVEN_DIRECTIVES = [FormControlDirective, FormGroupDirective, FormControlName, FormGroupName, FormArrayName];
  6467. /**
  6468. * Internal module used for sharing directives between FormsModule and ReactiveFormsModule
  6469. */
  6470. var ɵInternalFormsSharedModule = /** @class */ (function () {
  6471. function ɵInternalFormsSharedModule() {
  6472. }
  6473. ɵInternalFormsSharedModule = __decorate([
  6474. NgModule({
  6475. declarations: SHARED_FORM_DIRECTIVES,
  6476. exports: SHARED_FORM_DIRECTIVES,
  6477. })
  6478. ], ɵInternalFormsSharedModule);
  6479. return ɵInternalFormsSharedModule;
  6480. }());
  6481. /**
  6482. * @license
  6483. * Copyright Google Inc. All Rights Reserved.
  6484. *
  6485. * Use of this source code is governed by an MIT-style license that can be
  6486. * found in the LICENSE file at https://angular.io/license
  6487. */
  6488. function isAbstractControlOptions(options) {
  6489. return options.asyncValidators !== undefined ||
  6490. options.validators !== undefined ||
  6491. options.updateOn !== undefined;
  6492. }
  6493. /**
  6494. * @description
  6495. * Creates an `AbstractControl` from a user-specified configuration.
  6496. *
  6497. * The `FormBuilder` provides syntactic sugar that shortens creating instances of a `FormControl`,
  6498. * `FormGroup`, or `FormArray`. It reduces the amount of boilerplate needed to build complex
  6499. * forms.
  6500. *
  6501. * @see [Reactive Forms Guide](/guide/reactive-forms)
  6502. *
  6503. * @publicApi
  6504. */
  6505. var FormBuilder = /** @class */ (function () {
  6506. function FormBuilder() {
  6507. }
  6508. /**
  6509. * @description
  6510. * Construct a new `FormGroup` instance.
  6511. *
  6512. * @param controlsConfig A collection of child controls. The key for each child is the name
  6513. * under which it is registered.
  6514. *
  6515. * @param options Configuration options object for the `FormGroup`. The object can
  6516. * have two shapes:
  6517. *
  6518. * 1) `AbstractControlOptions` object (preferred), which consists of:
  6519. * * `validators`: A synchronous validator function, or an array of validator functions
  6520. * * `asyncValidators`: A single async validator or array of async validator functions
  6521. * * `updateOn`: The event upon which the control should be updated (options: 'change' | 'blur' |
  6522. * submit')
  6523. *
  6524. * 2) Legacy configuration object, which consists of:
  6525. * * `validator`: A synchronous validator function, or an array of validator functions
  6526. * * `asyncValidator`: A single async validator or array of async validator functions
  6527. *
  6528. */
  6529. FormBuilder.prototype.group = function (controlsConfig, options) {
  6530. if (options === void 0) { options = null; }
  6531. var controls = this._reduceControls(controlsConfig);
  6532. var validators = null;
  6533. var asyncValidators = null;
  6534. var updateOn = undefined;
  6535. if (options != null) {
  6536. if (isAbstractControlOptions(options)) {
  6537. // `options` are `AbstractControlOptions`
  6538. validators = options.validators != null ? options.validators : null;
  6539. asyncValidators = options.asyncValidators != null ? options.asyncValidators : null;
  6540. updateOn = options.updateOn != null ? options.updateOn : undefined;
  6541. }
  6542. else {
  6543. // `options` are legacy form group options
  6544. validators = options['validator'] != null ? options['validator'] : null;
  6545. asyncValidators = options['asyncValidator'] != null ? options['asyncValidator'] : null;
  6546. }
  6547. }
  6548. return new FormGroup(controls, { asyncValidators: asyncValidators, updateOn: updateOn, validators: validators });
  6549. };
  6550. /**
  6551. * @description
  6552. * Construct a new `FormControl` with the given state, validators and options.
  6553. *
  6554. * @param formState Initializes the control with an initial state value, or
  6555. * with an object that contains both a value and a disabled status.
  6556. *
  6557. * @param validatorOrOpts A synchronous validator function, or an array of
  6558. * such functions, or an `AbstractControlOptions` object that contains
  6559. * validation functions and a validation trigger.
  6560. *
  6561. * @param asyncValidator A single async validator or array of async validator
  6562. * functions.
  6563. *
  6564. * @usageNotes
  6565. *
  6566. * ### Initialize a control as disabled
  6567. *
  6568. * The following example returns a control with an initial value in a disabled state.
  6569. *
  6570. * <code-example path="forms/ts/formBuilder/form_builder_example.ts"
  6571. * linenums="false" region="disabled-control">
  6572. * </code-example>
  6573. */
  6574. FormBuilder.prototype.control = function (formState, validatorOrOpts, asyncValidator) {
  6575. return new FormControl(formState, validatorOrOpts, asyncValidator);
  6576. };
  6577. /**
  6578. * Constructs a new `FormArray` from the given array of configurations,
  6579. * validators and options.
  6580. *
  6581. * @param controlsConfig An array of child controls or control configs. Each
  6582. * child control is given an index when it is registered.
  6583. *
  6584. * @param validatorOrOpts A synchronous validator function, or an array of
  6585. * such functions, or an `AbstractControlOptions` object that contains
  6586. * validation functions and a validation trigger.
  6587. *
  6588. * @param asyncValidator A single async validator or array of async validator
  6589. * functions.
  6590. */
  6591. FormBuilder.prototype.array = function (controlsConfig, validatorOrOpts, asyncValidator) {
  6592. var _this = this;
  6593. var controls = controlsConfig.map(function (c) { return _this._createControl(c); });
  6594. return new FormArray(controls, validatorOrOpts, asyncValidator);
  6595. };
  6596. /** @internal */
  6597. FormBuilder.prototype._reduceControls = function (controlsConfig) {
  6598. var _this = this;
  6599. var controls = {};
  6600. Object.keys(controlsConfig).forEach(function (controlName) {
  6601. controls[controlName] = _this._createControl(controlsConfig[controlName]);
  6602. });
  6603. return controls;
  6604. };
  6605. /** @internal */
  6606. FormBuilder.prototype._createControl = function (controlConfig) {
  6607. if (controlConfig instanceof FormControl || controlConfig instanceof FormGroup ||
  6608. controlConfig instanceof FormArray) {
  6609. return controlConfig;
  6610. }
  6611. else if (Array.isArray(controlConfig)) {
  6612. var value = controlConfig[0];
  6613. var validator = controlConfig.length > 1 ? controlConfig[1] : null;
  6614. var asyncValidator = controlConfig.length > 2 ? controlConfig[2] : null;
  6615. return this.control(value, validator, asyncValidator);
  6616. }
  6617. else {
  6618. return this.control(controlConfig);
  6619. }
  6620. };
  6621. FormBuilder = __decorate([
  6622. Injectable()
  6623. ], FormBuilder);
  6624. return FormBuilder;
  6625. }());
  6626. /**
  6627. * @license
  6628. * Copyright Google Inc. All Rights Reserved.
  6629. *
  6630. * Use of this source code is governed by an MIT-style license that can be
  6631. * found in the LICENSE file at https://angular.io/license
  6632. */
  6633. /**
  6634. * @publicApi
  6635. */
  6636. var VERSION = new Version('8.1.0');
  6637. /**
  6638. * @license
  6639. * Copyright Google Inc. All Rights Reserved.
  6640. *
  6641. * Use of this source code is governed by an MIT-style license that can be
  6642. * found in the LICENSE file at https://angular.io/license
  6643. */
  6644. /**
  6645. * Exports the required providers and directives for template-driven forms,
  6646. * making them available for import by NgModules that import this module.
  6647. *
  6648. * @see [Forms Guide](/guide/forms)
  6649. *
  6650. * @publicApi
  6651. */
  6652. var FormsModule = /** @class */ (function () {
  6653. function FormsModule() {
  6654. }
  6655. FormsModule_1 = FormsModule;
  6656. /**
  6657. * @description
  6658. * Provides options for configuring the template-driven forms module.
  6659. *
  6660. * @param opts An object of configuration options
  6661. * * `warnOnDeprecatedNgFormSelector` Configures when to emit a warning when the deprecated
  6662. * `ngForm` selector is used.
  6663. */
  6664. FormsModule.withConfig = function (opts) {
  6665. return {
  6666. ngModule: FormsModule_1,
  6667. providers: [{ provide: NG_FORM_SELECTOR_WARNING, useValue: opts.warnOnDeprecatedNgFormSelector }]
  6668. };
  6669. };
  6670. var FormsModule_1;
  6671. FormsModule = FormsModule_1 = __decorate([
  6672. NgModule({
  6673. declarations: TEMPLATE_DRIVEN_DIRECTIVES,
  6674. providers: [RadioControlRegistry],
  6675. exports: [ɵInternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
  6676. })
  6677. ], FormsModule);
  6678. return FormsModule;
  6679. }());
  6680. /**
  6681. * Exports the required infrastructure and directives for reactive forms,
  6682. * making them available for import by NgModules that import this module.
  6683. * @see [Forms](guide/reactive-forms)
  6684. *
  6685. * @see [Reactive Forms Guide](/guide/reactive-forms)
  6686. *
  6687. * @publicApi
  6688. */
  6689. var ReactiveFormsModule = /** @class */ (function () {
  6690. function ReactiveFormsModule() {
  6691. }
  6692. ReactiveFormsModule_1 = ReactiveFormsModule;
  6693. /**
  6694. * @description
  6695. * Provides options for configuring the reactive forms module.
  6696. *
  6697. * @param opts An object of configuration options
  6698. * * `warnOnNgModelWithFormControl` Configures when to emit a warning when an `ngModel`
  6699. * binding is used with reactive form directives.
  6700. */
  6701. ReactiveFormsModule.withConfig = function (opts) {
  6702. return {
  6703. ngModule: ReactiveFormsModule_1,
  6704. providers: [{
  6705. provide: NG_MODEL_WITH_FORM_CONTROL_WARNING,
  6706. useValue: opts.warnOnNgModelWithFormControl
  6707. }]
  6708. };
  6709. };
  6710. var ReactiveFormsModule_1;
  6711. ReactiveFormsModule = ReactiveFormsModule_1 = __decorate([
  6712. NgModule({
  6713. declarations: [REACTIVE_DRIVEN_DIRECTIVES],
  6714. providers: [FormBuilder, RadioControlRegistry],
  6715. exports: [ɵInternalFormsSharedModule, REACTIVE_DRIVEN_DIRECTIVES]
  6716. })
  6717. ], ReactiveFormsModule);
  6718. return ReactiveFormsModule;
  6719. }());
  6720. /**
  6721. * @license
  6722. * Copyright Google Inc. All Rights Reserved.
  6723. *
  6724. * Use of this source code is governed by an MIT-style license that can be
  6725. * found in the LICENSE file at https://angular.io/license
  6726. */
  6727. /**
  6728. * @license
  6729. * Copyright Google Inc. All Rights Reserved.
  6730. *
  6731. * Use of this source code is governed by an MIT-style license that can be
  6732. * found in the LICENSE file at https://angular.io/license
  6733. */
  6734. // This file only reexports content of the `src` folder. Keep it that way.
  6735. /**
  6736. * @license
  6737. * Copyright Google Inc. All Rights Reserved.
  6738. *
  6739. * Use of this source code is governed by an MIT-style license that can be
  6740. * found in the LICENSE file at https://angular.io/license
  6741. */
  6742. /**
  6743. * Generated bundle index. Do not edit.
  6744. */
  6745. export { ɵInternalFormsSharedModule as ɵangular_packages_forms_forms_d, ɵInternalFormsSharedModule, REACTIVE_DRIVEN_DIRECTIVES as ɵangular_packages_forms_forms_c, SHARED_FORM_DIRECTIVES as ɵangular_packages_forms_forms_a, TEMPLATE_DRIVEN_DIRECTIVES as ɵangular_packages_forms_forms_b, CHECKBOX_VALUE_ACCESSOR as ɵangular_packages_forms_forms_e, DEFAULT_VALUE_ACCESSOR as ɵangular_packages_forms_forms_f, AbstractControlStatus as ɵangular_packages_forms_forms_g, ngControlStatusHost as ɵangular_packages_forms_forms_h, formDirectiveProvider as ɵangular_packages_forms_forms_i, NG_FORM_SELECTOR_WARNING as ɵangular_packages_forms_forms_j, formControlBinding as ɵangular_packages_forms_forms_k, modelGroupProvider as ɵangular_packages_forms_forms_l, ɵNgNoValidate as ɵangular_packages_forms_forms_z, ɵNgNoValidate, NUMBER_VALUE_ACCESSOR as ɵangular_packages_forms_forms_m, RADIO_VALUE_ACCESSOR as ɵangular_packages_forms_forms_n, RadioControlRegistry as ɵangular_packages_forms_forms_o, RANGE_VALUE_ACCESSOR as ɵangular_packages_forms_forms_p, NG_MODEL_WITH_FORM_CONTROL_WARNING as ɵangular_packages_forms_forms_q, formControlBinding$1 as ɵangular_packages_forms_forms_r, controlNameBinding as ɵangular_packages_forms_forms_s, formDirectiveProvider$1 as ɵangular_packages_forms_forms_t, formArrayNameProvider as ɵangular_packages_forms_forms_v, formGroupNameProvider as ɵangular_packages_forms_forms_u, SELECT_VALUE_ACCESSOR as ɵangular_packages_forms_forms_w, ɵNgSelectMultipleOption as ɵangular_packages_forms_forms_y, ɵNgSelectMultipleOption, SELECT_MULTIPLE_VALUE_ACCESSOR as ɵangular_packages_forms_forms_x, CHECKBOX_REQUIRED_VALIDATOR as ɵangular_packages_forms_forms_bb, EMAIL_VALIDATOR as ɵangular_packages_forms_forms_bc, MAX_LENGTH_VALIDATOR as ɵangular_packages_forms_forms_be, MIN_LENGTH_VALIDATOR as ɵangular_packages_forms_forms_bd, PATTERN_VALIDATOR as ɵangular_packages_forms_forms_bf, REQUIRED_VALIDATOR as ɵangular_packages_forms_forms_ba, AbstractControlDirective, AbstractFormGroupDirective, CheckboxControlValueAccessor, ControlContainer, NG_VALUE_ACCESSOR, COMPOSITION_BUFFER_MODE, DefaultValueAccessor, NgControl, NgControlStatus, NgControlStatusGroup, NgForm, NgFormSelectorWarning, NgModel, NgModelGroup, NumberValueAccessor, RadioControlValueAccessor, RangeValueAccessor, FormControlDirective, FormControlName, FormGroupDirective, FormArrayName, FormGroupName, NgSelectOption, SelectControlValueAccessor, SelectMultipleControlValueAccessor, CheckboxRequiredValidator, EmailValidator, MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, FormBuilder, AbstractControl, FormArray, FormControl, FormGroup, NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators, VERSION, FormsModule, ReactiveFormsModule };
  6746. //# sourceMappingURL=forms.js.map