import{b as K,d as Q,f as d,h as X,i as $,k as ee,n as te,o as ie,p as le,r as ne,s as ae,t as oe,u as re,x as me,y as de,z as ue}from"./chunk-7PPOABPU.js";import{a as H}from"./chunk-ILLDEPHH.js";import{Eb as p,Hc as u,Hd as W,Sb as r,Tb as t,Ub as e,Vb as a,cc as L,fb as o,sb as R,tc as i,ud as j,wd as J,yb as Y}from"./chunk-AQ27DSQO.js";import"./chunk-EQDQRRRY.js";var v=(n,m)=>({"is-invalid":n,"is-valid":m});function ve(n,m){n&1&&(t(0,"div",61),i(1," Please provide a first name. "),e())}function se(n,m){n&1&&(t(0,"div",54),i(1," Looks good! "),e())}function ce(n,m){n&1&&(t(0,"div",61),i(1," Please provide a last name. "),e())}function fe(n,m){n&1&&(t(0,"div",54),i(1," Looks good! "),e())}function ge(n,m){n&1&&(t(0,"div",61),i(1," Please choose a username. "),e())}function ye(n,m){n&1&&(t(0,"div",61),i(1," Please provide a valid city. "),e())}function be(n,m){n&1&&(t(0,"div",61),i(1," Please provide a valid state. "),e())}function Fe(n,m){n&1&&(t(0,"div",61),i(1," Please provide a valid zip. "),e())}function _e(n,m){n&1&&(t(0,"div",61),i(1," You must agree before submitting. "),e())}function Se(n,m){n&1&&(t(0,"div",61),i(1," Please provide a first name. "),e())}function he(n,m){n&1&&(t(0,"div",96),i(1," Looks good! "),e())}function Ce(n,m){n&1&&(t(0,"div",61),i(1," Please provide a last name. "),e())}function Ee(n,m){n&1&&(t(0,"div",96),i(1," Looks good! "),e())}function xe(n,m){n&1&&(t(0,"div",97),i(1," Please provide a valid city. "),e())}function ke(n,m){n&1&&(t(0,"div",97),i(1," Please provide a valid state. "),e())}function Ne(n,m){n&1&&(t(0,"div",97),i(1," Please provide a valid zip. "),e())}var pe=class n{constructor(m){this.fb=m}routes=H;myForm;myForm1;ngOnInit(){this.myForm=this.fb.group({firstName:["",d.required],lastName:["",d.required],username:["",d.required],city:["",d.required],state:["",d.required],zip:["",d.required],agree:[!1,d.requiredTrue]}),this.myForm1=this.fb.group({firstName:["",d.required],lastName:["",d.required],username:["",d.required],city:["",d.required],state:["",d.required],zip:["",d.required],agree:[!1,d.requiredTrue]})}onSubmit(){this.myForm.valid?console.log("Form Submitted!",this.myForm.value):this.myForm.markAllAsTouched()}onSubmit1(){this.myForm1.valid?console.log("Form Submitted!",this.myForm1.value):this.myForm1.markAllAsTouched()}static \u0275fac=function(k){return new(k||n)(R(me))};static \u0275cmp=Y({type:n,selectors:[["app-form-validation"]],decls:281,vars:70,consts:[[1,"page-header"],[1,"row"],[1,"col-sm-12"],[1,"page-title"],[1,"card"],[1,"card-header"],[1,"card-title"],[1,"card-text"],["href","https://getbootstrap.com/docs/4.1/components/forms/#server-side","target","_blank"],[1,"card-body"],[1,"col-sm"],["novalidate","",1,"needs-validation",3,"ngSubmit","formGroup"],[1,"form-row","row"],[1,"col-md-4","mb-3"],["for","validationCustom01",1,"form-label"],["type","text","id","validationCustom01","formControlName","firstName","placeholder","First name",1,"form-control",3,"ngClass"],["class","invalid-feedback",4,"ngIf"],["class","valid-feedback",4,"ngIf"],["for","validationCustom02",1,"form-label"],["type","text","id","validationCustom02","formControlName","lastName","placeholder","Last name",1,"form-control",3,"ngClass"],["for","validationCustomUsername"],[1,"input-group"],["id","inputGroupPrepend",1,"input-group-text"],["type","text","id","validationCustomUsername","formControlName","username","placeholder","Username","aria-describedby","inputGroupPrepend","required","",1,"form-control",3,"ngClass"],[1,"col-md-6","mb-3"],["for","validationTooltip03"],["type","text","id","validationCustomcityname","formControlName","city","placeholder","City","aria-describedby","inputGroupPrepend","required","","required","",1,"form-control",3,"ngClass"],[1,"col-md-3","mb-3"],["for","validationTooltip04"],["type","text","id","validationCustomstatename","formControlName","state","placeholder","State","aria-describedby","inputGroupPrepend","required","","required","",1,"form-control",3,"ngClass"],["for","validationTooltip05"],["type","text","id","validationCustomzipname","formControlName","zip","placeholder","Zip","aria-describedby","inputGroupPrepend","required","",1,"form-control",3,"ngClass"],[1,"form-group"],[1,"form-check"],["type","checkbox","formControlName","agree","id","invalidCheck","required","",1,"form-check-input",3,"ngClass"],["for","invalidCheck",1,"form-label"],["type","submit",1,"btn","btn-primary"],["for","validationDefault01",1,"form-label"],["type","text","id","validationDefault01","placeholder","First name","value","Mark","required","",1,"form-control"],["for","validationDefault02",1,"form-label"],["type","text","id","validationDefault02","placeholder","Last name","value","Otto","required","",1,"form-control"],["for","validationDefaultUsername",1,"form-label"],["id","inputGroupPrepend2",1,"input-group-text"],["type","text","id","validationDefaultUsername","placeholder","Username","aria-describedby","inputGroupPrepend2","required","",1,"form-control"],["for","validationDefault03",1,"form-label"],["type","text","id","validationDefault03","placeholder","City","required","",1,"form-control"],["for","validationDefault04",1,"form-label"],["type","text","id","validationDefault04","placeholder","State","required","",1,"form-control"],["for","validationDefault05",1,"form-label"],["type","text","id","validationDefault05","placeholder","Zip","required","",1,"form-control"],["type","checkbox","value","","id","invalidCheck2","required","",1,"form-check-input"],["for","invalidCheck2",1,"form-label"],["for","validationServer01",1,"form-label"],["type","text","id","validationServer01","placeholder","First name","value","Mark","required","",1,"form-control","is-valid"],[1,"valid-feedback"],["for","validationServer02",1,"form-label"],["type","text","id","validationServer02","placeholder","Last name","value","Otto","required","",1,"form-control","is-valid"],["for","validationServerUsername",1,"form-label"],[1,"input-group","input-grp"],["id","inputGroupPrepend3",1,"input-group-text"],["type","text","id","validationServerUsername","placeholder","Username","aria-describedby","inputGroupPrepend3","required","",1,"form-control","is-invalid"],[1,"invalid-feedback"],["for","validationServer03",1,"form-label"],["type","text","id","validationServer03","placeholder","City","required","",1,"form-control","is-invalid"],["for","validationServer04",1,"form-label"],["type","text","id","validationServer04","placeholder","State","required","",1,"form-control","is-invalid"],["for","validationServer05",1,"form-label"],["type","text","id","validationServer05","placeholder","Zip","required","",1,"form-control","is-invalid"],["type","checkbox","value","","id","invalidCheck3","required","",1,"form-check-input","is-invalid"],["for","invalidCheck3",1,"form-label"],[1,"was-validated"],[1,"mb-3"],["for","validationTextarea",1,"form-label"],["id","validationTextarea","placeholder","Required example textarea","required","",1,"form-control","is-invalid"],[1,"form-check","mb-3"],["type","checkbox","id","validationFormCheck1","required","",1,"form-check-input"],["for","validationFormCheck1",1,"form-check-label"],["type","radio","id","validationFormCheck2","name","radio-stacked","required","",1,"form-check-input"],["for","validationFormCheck2",1,"form-check-label"],["type","radio","id","validationFormCheck3","name","radio-stacked","required","",1,"form-check-input"],["for","validationFormCheck3",1,"form-check-label"],["required","","aria-label","select example",1,"form-select"],["value",""],["value","1"],["value","2"],["value","3"],["type","file","aria-label","file example","required","",1,"form-control"],["type","text","id","validationCustom01","formControlName","firstName","placeholder","First name","value","Mark","required","",1,"form-control",3,"ngClass"],["class","valid-tooltip",4,"ngIf"],["type","text","id","validationCustom02","formControlName","lastName","placeholder","Last name","value","hh",1,"form-control",3,"ngClass"],["for","validationCustomUsername",1,"form-label"],["for","validationTooltip03",1,"form-label"],["class","invalid-tooltip",4,"ngIf"],["for","validationTooltip04",1,"form-label"],["for","validationTooltip05",1,"form-label"],["type","text","id","validationCustomstatename","formControlName","zip","placeholder","Zip","aria-describedby","inputGroupPrepend","required","",1,"form-control",3,"ngClass"],[1,"valid-tooltip"],[1,"invalid-tooltip"]],template:function(k,l){if(k&1&&(t(0,"div",0)(1,"div",1)(2,"div",2)(3,"h3",3),i(4,"Form Validation"),e()()()(),t(5,"div",1)(6,"div",2)(7,"div",4)(8,"div",5)(9,"h5",6),i(10,"Custom Form Validation"),e(),t(11,"p",7),i(12,"For custom form validation messages, you\u2019ll need to add the "),t(13,"code"),i(14,"novalidate"),e(),i(15," boolean attribute to your form. For server side validation "),t(16,"a",8),i(17,"read full documentation"),e(),i(18,"."),e()(),t(19,"div",9)(20,"div",1)(21,"div",10)(22,"form",11),L("ngSubmit",function(){return l.onSubmit()}),t(23,"div",12)(24,"div",13)(25,"label",14),i(26,"First name"),e(),a(27,"input",15),p(28,ve,2,0,"div",16)(29,se,2,0,"div",17),e(),t(30,"div",13)(31,"label",18),i(32,"Last name"),e(),a(33,"input",19),p(34,ce,2,0,"div",16)(35,fe,2,0,"div",17),e(),t(36,"div",13)(37,"label",20),i(38,"Username"),e(),t(39,"div",21)(40,"span",22),i(41,"@"),e(),a(42,"input",23),p(43,ge,2,0,"div",16),e()()(),t(44,"div",12)(45,"div",24)(46,"label",25),i(47,"City"),e(),a(48,"input",26),p(49,ye,2,0,"div",16),e(),t(50,"div",27)(51,"label",28),i(52,"State"),e(),a(53,"input",29),p(54,be,2,0,"div",16),e(),t(55,"div",27)(56,"label",30),i(57,"Zip"),e(),a(58,"input",31),p(59,Fe,2,0,"div",16),e()(),t(60,"div",32)(61,"div",33),a(62,"input",34),t(63,"label",35),i(64," Agree to terms and conditions "),e(),p(65,_e,2,0,"div",16),e()(),t(66,"button",36),i(67,"Submit form"),e()()()()()(),t(68,"div",4)(69,"div",5)(70,"h5",6),i(71,"Browser defaults"),e(),t(72,"p",7),i(73,"Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. "),e()(),t(74,"div",9)(75,"div",1)(76,"div",10)(77,"form")(78,"div",12)(79,"div",13)(80,"label",37),i(81,"First name"),e(),a(82,"input",38),e(),t(83,"div",13)(84,"label",39),i(85,"Last name"),e(),a(86,"input",40),e(),t(87,"div",13)(88,"label",41),i(89,"Username"),e(),t(90,"div",21)(91,"span",42),i(92,"@"),e(),a(93,"input",43),e()()(),t(94,"div",12)(95,"div",24)(96,"label",44),i(97,"City"),e(),a(98,"input",45),e(),t(99,"div",27)(100,"label",46),i(101,"State"),e(),a(102,"input",47),e(),t(103,"div",27)(104,"label",48),i(105,"Zip"),e(),a(106,"input",49),e()(),t(107,"div",32)(108,"div",33),a(109,"input",50),t(110,"label",51),i(111," Agree to terms and conditions "),e()()()(),t(112,"button",36),i(113,"Submit form"),e()()()()(),t(114,"div",4)(115,"div",5)(116,"h5",6),i(117,"Server side"),e(),t(118,"p",7),i(119,"We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with "),t(120,"code"),i(121,".is-invalid"),e(),i(122," and "),t(123,"code"),i(124,".is-valid"),e(),i(125,". Note that "),t(126,"code"),i(127,".invalid-feedback"),e(),i(128," is also supported with these classes."),e()(),t(129,"div",9)(130,"form")(131,"div",12)(132,"div",13)(133,"label",52),i(134,"First name"),e(),a(135,"input",53),t(136,"div",54),i(137," Looks good! "),e()(),t(138,"div",13)(139,"label",55),i(140,"Last name"),e(),a(141,"input",56),t(142,"div",54),i(143," Looks good! "),e()(),t(144,"div",13)(145,"label",57),i(146,"Username"),e(),t(147,"div",58)(148,"span",59),i(149,"@"),e(),a(150,"input",60),t(151,"div",61),i(152," Please choose a username. "),e()()()(),t(153,"div",12)(154,"div",24)(155,"label",62),i(156,"City"),e(),a(157,"input",63),t(158,"div",61),i(159," Please provide a valid city. "),e()(),t(160,"div",27)(161,"label",64),i(162,"State"),e(),a(163,"input",65),t(164,"div",61),i(165," Please provide a valid state. "),e()(),t(166,"div",27)(167,"label",66),i(168,"Zip"),e(),a(169,"input",67),t(170,"div",61),i(171," Please provide a valid zip. "),e()()(),t(172,"div",32)(173,"div",33),a(174,"input",68),t(175,"label",69),i(176," Agree to terms and conditions "),e(),t(177,"div",61),i(178," You must agree before submitting. "),e()()()(),t(179,"button",36),i(180,"Submit form"),e()()(),t(181,"div",4)(182,"div",5)(183,"h5",6),i(184,"Supported elements"),e(),t(185,"p",7),i(186,"Form validation styles are also available for bootstrap custom form controls."),e()(),t(187,"div",9)(188,"div",1)(189,"div",10)(190,"form",70)(191,"div",71)(192,"label",72),i(193,"Textarea"),e(),a(194,"textarea",73),t(195,"div",61),i(196," Please enter a message in the textarea. "),e()(),t(197,"div",74),a(198,"input",75),t(199,"label",76),i(200,"Check this checkbox"),e(),t(201,"div",61),i(202,"Example invalid feedback text"),e()(),t(203,"div",33),a(204,"input",77),t(205,"label",78),i(206,"Toggle this radio"),e()(),t(207,"div",74),a(208,"input",79),t(209,"label",80),i(210,"Or toggle this other radio"),e(),t(211,"div",61),i(212,"More example invalid feedback text"),e()(),t(213,"div",71)(214,"select",81)(215,"option",82),i(216,"Open this select menu"),e(),t(217,"option",83),i(218,"One"),e(),t(219,"option",84),i(220,"Two"),e(),t(221,"option",85),i(222,"Three"),e()(),t(223,"div",61),i(224,"Example invalid select feedback"),e()(),t(225,"div",71),a(226,"input",86),t(227,"div",61),i(228,"Example invalid form file feedback"),e()()()()()()(),t(229,"div",4)(230,"div",5)(231,"h5",6),i(232,"Tooltips"),e(),t(233,"p",7),i(234,"You can swap the "),t(235,"code"),i(236,".valid|invalid-feedback"),e(),i(237," classes for "),t(238,"code"),i(239,".valid|invalid-tooltip"),e(),i(240," classes to display validation feedback in a styled tooltip."),e()(),t(241,"div",9)(242,"form",11),L("ngSubmit",function(){return l.onSubmit1()}),t(243,"div",12)(244,"div",13)(245,"label",14),i(246,"First name"),e(),a(247,"input",87),p(248,Se,2,0,"div",16)(249,he,2,0,"div",88),e(),t(250,"div",13)(251,"label",18),i(252,"Last name"),e(),a(253,"input",89),p(254,Ce,2,0,"div",16)(255,Ee,2,0,"div",88),e(),t(256,"div",13)(257,"label",90),i(258,"Username"),e(),t(259,"div",21)(260,"span",22),i(261,"@"),e(),a(262,"input",23),e()()(),t(263,"div",12)(264,"div",24)(265,"label",91),i(266,"City"),e(),a(267,"input",26),p(268,xe,2,0,"div",92),e(),t(269,"div",27)(270,"label",93),i(271,"State"),e(),a(272,"input",29),p(273,ke,2,0,"div",92),e(),t(274,"div",27)(275,"label",94),i(276,"Zip"),e(),a(277,"input",95),p(278,Ne,2,0,"div",92),e()(),t(279,"button",36),i(280,"Submit form"),e()()()()()()),k&2){let s,N,U,c,P,A,f,q,g,T,y,M,b,O,F,V,_,I,Z,S,z,B,h,C,G,E,D,x,w;o(22),r("formGroup",l.myForm),o(5),r("ngClass",u(31,v,((s=l.myForm.get("firstName"))==null?null:s.invalid)&&((s=l.myForm.get("firstName"))==null?null:s.touched),(s=l.myForm.get("firstName"))==null?null:s.valid)),o(),r("ngIf",((N=l.myForm.get("firstName"))==null?null:N.invalid)&&((N=l.myForm.get("firstName"))==null?null:N.touched)),o(),r("ngIf",(U=l.myForm.get("firstName"))==null?null:U.valid),o(4),r("ngClass",u(34,v,((c=l.myForm.get("lastName"))==null?null:c.invalid)&&((c=l.myForm.get("lastName"))==null?null:c.touched),(c=l.myForm.get("lastName"))==null?null:c.valid)),o(),r("ngIf",((P=l.myForm.get("lastName"))==null?null:P.invalid)&&((P=l.myForm.get("lastName"))==null?null:P.touched)),o(),r("ngIf",(A=l.myForm.get("lastName"))==null?null:A.valid),o(7),r("ngClass",u(37,v,((f=l.myForm.get("username"))==null?null:f.invalid)&&((f=l.myForm.get("username"))==null?null:f.touched),(f=l.myForm.get("username"))==null?null:f.valid)),o(),r("ngIf",((q=l.myForm.get("username"))==null?null:q.invalid)&&((q=l.myForm.get("username"))==null?null:q.touched)),o(5),r("ngClass",u(40,v,((g=l.myForm.get("city"))==null?null:g.invalid)&&((g=l.myForm.get("city"))==null?null:g.touched),(g=l.myForm.get("city"))==null?null:g.valid)),o(),r("ngIf",((T=l.myForm.get("city"))==null?null:T.invalid)&&((T=l.myForm.get("city"))==null?null:T.touched)),o(4),r("ngClass",u(43,v,((y=l.myForm.get("state"))==null?null:y.invalid)&&((y=l.myForm.get("state"))==null?null:y.touched),(y=l.myForm.get("state"))==null?null:y.valid)),o(),r("ngIf",((M=l.myForm.get("state"))==null?null:M.invalid)&&((M=l.myForm.get("state"))==null?null:M.touched)),o(4),r("ngClass",u(46,v,((b=l.myForm.get("zip"))==null?null:b.invalid)&&((b=l.myForm.get("zip"))==null?null:b.touched),(b=l.myForm.get("zip"))==null?null:b.valid)),o(),r("ngIf",((O=l.myForm.get("zip"))==null?null:O.invalid)&&((O=l.myForm.get("zip"))==null?null:O.touched)),o(3),r("ngClass",u(49,v,((F=l.myForm.get("agree"))==null?null:F.invalid)&&((F=l.myForm.get("agree"))==null?null:F.touched),(F=l.myForm.get("agree"))==null?null:F.valid)),o(3),r("ngIf",((V=l.myForm.get("agree"))==null?null:V.invalid)&&((V=l.myForm.get("agree"))==null?null:V.touched)),o(177),r("formGroup",l.myForm1),o(5),r("ngClass",u(52,v,((_=l.myForm1.get("firstName"))==null?null:_.invalid)&&((_=l.myForm1.get("firstName"))==null?null:_.touched),(_=l.myForm1.get("firstName"))==null?null:_.valid)),o(),r("ngIf",((I=l.myForm1.get("firstName"))==null?null:I.invalid)&&((I=l.myForm1.get("firstName"))==null?null:I.touched)),o(),r("ngIf",(Z=l.myForm1.get("firstName"))==null?null:Z.valid),o(4),r("ngClass",u(55,v,((S=l.myForm1.get("lastName"))==null?null:S.invalid)&&((S=l.myForm1.get("lastName"))==null?null:S.touched),(S=l.myForm1.get("lastName"))==null?null:S.valid)),o(),r("ngIf",((z=l.myForm1.get("lastName"))==null?null:z.invalid)&&((z=l.myForm1.get("lastName"))==null?null:z.touched)),o(),r("ngIf",(B=l.myForm1.get("lastName"))==null?null:B.valid),o(7),r("ngClass",u(58,v,((h=l.myForm1.get("username"))==null?null:h.invalid)&&((h=l.myForm1.get("username"))==null?null:h.touched),(h=l.myForm1.get("username"))==null?null:h.valid)),o(5),r("ngClass",u(61,v,((C=l.myForm1.get("city"))==null?null:C.invalid)&&((C=l.myForm1.get("city"))==null?null:C.touched),(C=l.myForm1.get("city"))==null?null:C.valid)),o(),r("ngIf",((G=l.myForm1.get("city"))==null?null:G.invalid)&&((G=l.myForm1.get("city"))==null?null:G.touched)),o(4),r("ngClass",u(64,v,((E=l.myForm1.get("state"))==null?null:E.invalid)&&((E=l.myForm1.get("state"))==null?null:E.touched),(E=l.myForm1.get("state"))==null?null:E.valid)),o(),r("ngIf",((D=l.myForm1.get("state"))==null?null:D.invalid)&&((D=l.myForm1.get("state"))==null?null:D.touched)),o(4),r("ngClass",u(67,v,((x=l.myForm1.get("zip"))==null?null:x.invalid)&&((x=l.myForm1.get("zip"))==null?null:x.touched),(x=l.myForm1.get("zip"))==null?null:x.valid)),o(),r("ngIf",((w=l.myForm1.get("zip"))==null?null:w.invalid)&&((w=l.myForm1.get("zip"))==null?null:w.touched))}},dependencies:[W,j,J,de,te,ne,ae,Q,K,X,$,oe,re,ee,ue,ie,le],styles:[".needs-validation[_ngcontent-%COMP%]{margin:20px}.is-valid[_ngcontent-%COMP%]{border-color:#28a745}.is-valid[_ngcontent-%COMP%]:focus{box-shadow:0 0 0 .2rem #28a74540}.valid-feedback[_ngcontent-%COMP%]{display:none}.is-valid[_ngcontent-%COMP%] ~ .valid-feedback[_ngcontent-%COMP%]{display:block;color:#28a745}.is-invalid[_ngcontent-%COMP%]{border-color:#dc3545}.is-invalid[_ngcontent-%COMP%]:focus{box-shadow:0 0 0 .2rem #dc354540}.invalid-feedback[_ngcontent-%COMP%]{display:none}.is-invalid[_ngcontent-%COMP%] ~ .invalid-feedback[_ngcontent-%COMP%]{display:block;color:#dc3545}.input-group[_ngcontent-%COMP%]   .input-group-text[_ngcontent-%COMP%]{border-color:inherit}.input-group[_ngcontent-%COMP%]   .form-control.is-valid[_ngcontent-%COMP%] ~ .input-group-text[_ngcontent-%COMP%]{border-color:#28a745;color:#28a745}.input-group[_ngcontent-%COMP%]   .form-control.is-invalid[_ngcontent-%COMP%] ~ .input-group-text[_ngcontent-%COMP%]{border-color:#dc3545;color:#dc3545}.invalid-tooltip[_ngcontent-%COMP%]{color:#fff;font-size:.875rem;margin-top:.25rem}.invalid-tooltip[_ngcontent-%COMP%], .valid-tooltip[_ngcontent-%COMP%]{position:relative;top:0}.needs-validation[_ngcontent-%COMP%]{margin:0!important}"]})};export{pe as FormValidationComponent};