Skip to content

Commit 49e6807

Browse files
mr-dev-dragonmr-dev-dragon
committed
add
1 parent 1fda04f commit 49e6807

File tree

1 file changed

+358
-0
lines changed

1 file changed

+358
-0
lines changed

‎bash-ng/src/app/reactive-form/reactive-form.component.html‎

Lines changed: 358 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,358 @@
1+
<!-- is-invalid -->
2+
3+
<div class="container mt-5">
4+
<div class="row">
5+
<div class="col-6">
6+
<div class="p-3 mb-5 mx-5 bg-body rounded">
7+
<form class="row g-3" [formGroup]="addForm">
8+
<!-- <div class="col-md-4">
9+
<label for="validationCustom01" class="form-label">First name</label>
10+
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
11+
<div class="valid-feedback">
12+
Looks good!
13+
</div>
14+
</div>
15+
<div class="col-md-3">
16+
<label for="validationCustom05" class="form-label">Zip</label>
17+
<input type="text" class="form-control" id="validationCustom05" required>
18+
19+
</div>
20+
is-invalid -->
21+
22+
<div class="col-md-6">
23+
<label for="inputEmail4" class="form-label">Email</label>
24+
<input formControlName="Email" type="email" class="form-control" id="inputEmail4" />
25+
<ng-container *ngIf="addForm.controls['Email'] as Email">
26+
<ng-container *ngIf="Email.dirty || Email.touched">
27+
<ng-container *ngIf="Email.errors as errorss">
28+
<div *ngIf="errorss['required']" class="error">
29+
Please Enter your Email!
30+
</div>
31+
</ng-container>
32+
</ng-container>
33+
</ng-container>
34+
</div>
35+
<div class="col-md-6">
36+
<label for="inputEmail412" class="form-label">Last name</label>
37+
38+
<input formControlName="Last_name" type="text" class="form-control" placeholder="Last name"
39+
aria-label="Last name" id="inputEmail412" />
40+
41+
<div *ngIf="addForm.controls['Last_name']?.errors?.['required']" class="">
42+
Please Enter your Last_name!
43+
</div>
44+
</div>
45+
<div class="col-md-6">
46+
<label for="inputEmail413" class="form-label is-invalid">First name</label>
47+
48+
<input formControlName="First_name" type="text" class="form-control" placeholder="First name"
49+
aria-label="First name" id="inputEmail413" />
50+
<ng-container *ngIf="addForm.controls['First_name'] as First_name">
51+
<ng-container *ngIf="First_name.dirty || First_name.touched">
52+
<ng-container *ngIf="First_name.errors as errors">
53+
<div *ngIf="errors['required']" class="error">
54+
Please Enter your frist name!
55+
</div>
56+
</ng-container>
57+
</ng-container>
58+
</ng-container>
59+
</div>
60+
61+
<div class="col-md-6">
62+
<label for="inputPassword4" class="form-label">Password</label>
63+
<input formControlName="Password" type="password" class="form-control" id="inputPassword4" />
64+
<ng-container *ngIf="addForm.controls['Password'] as Password">
65+
<ng-container *ngIf="Password.dirty || Password.touched">
66+
<ng-container *ngIf="Password.errors as errorssss">
67+
<div *ngIf="errorssss['required']" class="error">
68+
Please Enter your Password!
69+
</div>
70+
</ng-container>
71+
</ng-container>
72+
</ng-container>
73+
</div>
74+
75+
<div class="col-12">
76+
<label for="inputAddress" class="form-label">Address</label>
77+
<input formControlName="Address" type="text" class="form-control" id="inputAddress"
78+
placeholder="1234 Main street YK UK NEW YORK" />
79+
<ng-container *ngIf="addForm.controls['Address'] as Address">
80+
<ng-container *ngIf="Address.dirty || Address.touched">
81+
<ng-container *ngIf="Address.errors as errorsssss">
82+
<div *ngIf="errorsssss['required']" class="error">
83+
Please Enter your Address!
84+
</div>
85+
</ng-container>
86+
</ng-container>
87+
</ng-container>
88+
</div>
89+
<div class="col-12">
90+
<label for="inputAddress2" class="form-label">Address 2</label>
91+
<input formControlName="Address_2" type="text" class="form-control" id="inputAddress2"
92+
placeholder="Apartment, studio, or floor" />
93+
<ng-container *ngIf="addForm.controls['Address_2'] as Address_2">
94+
<ng-container *ngIf="Address_2.dirty || Address_2.touched">
95+
<ng-container *ngIf="Address_2.errors as errorssssss">
96+
<div *ngIf="errorssssss['required']" class="error">
97+
Please Enter your Address 2!
98+
</div>
99+
</ng-container>
100+
</ng-container>
101+
</ng-container>
102+
</div>
103+
<div class="col-md-6">
104+
<label for="inputCity" class="form-label">City</label>
105+
<input formControlName="City" type="text" class="form-control" id="inputCity" />
106+
<ng-container *ngIf="addForm.controls['City'] as City">
107+
<ng-container *ngIf="City.dirty || City.touched">
108+
<ng-container *ngIf="City.errors as errorsssssssss">
109+
<div *ngIf="errorsssssssss['required']" class="error">
110+
Please Enter your City!
111+
</div>
112+
</ng-container>
113+
</ng-container>
114+
</ng-container>
115+
</div>
116+
<div class="col-md-4">
117+
<label for="inputState" class="form-label">State</label>
118+
<select formControlName="State" id="inputState" class="form-select">
119+
<option selected value="0"></option>
120+
<option value="1">tanger</option>
121+
<option value="2">titwan</option>
122+
<option value="3">husima</option>
123+
</select>
124+
125+
<ng-container *ngIf="addForm.controls['State'] as State">
126+
<ng-container *ngIf="State.dirty || State.touched">
127+
<ng-container *ngIf="State.errors as errorsssssss">
128+
<div *ngIf="errorsssssss['required']" class="error">
129+
Please Enter your State!
130+
</div>
131+
</ng-container>
132+
</ng-container>
133+
</ng-container>
134+
</div>
135+
<div class="col-md-2">
136+
<label for="inputZip" class="form-label">Zip</label>
137+
<input formControlName="Zip" type="text" class="form-control" id="inputZip" />
138+
<ng-container *ngIf="addForm.controls['Zip'] as Zip">
139+
<ng-container *ngIf="Zip.dirty || Zip.touched">
140+
<ng-container *ngIf="Zip.errors as errorssssssss">
141+
<div *ngIf="errorssssssss['required']" class="error">
142+
Please Enter your Zip!
143+
</div>
144+
</ng-container>
145+
</ng-container>
146+
</ng-container>
147+
</div>
148+
149+
<div class="col-12">
150+
<div class="form-check">
151+
<input formControlName="Check_me_out" class="form-check-input" type="checkbox" id="gridCheck" />
152+
{{ addForm.controls["Check_me_out"].errors | json }}
153+
154+
<ng-container *ngIf="addForm.controls['Check_me_out'] as Check_me_out">
155+
<ng-container *ngIf="Check_me_out.dirty || Check_me_out.touched">
156+
<ng-container *ngIf="Check_me_out.errors as errorssssssssjs">
157+
<div *ngIf="errorssssssssjs['required']" class="error">
158+
Please Enter your Check me out!
159+
</div>
160+
</ng-container>
161+
</ng-container>
162+
</ng-container>
163+
164+
<label class="form-check-label" for="gridCheck">
165+
Check me out
166+
</label>
167+
</div>
168+
</div>
169+
170+
<div class="col-12">
171+
<button [disabled]="
172+
!(addForm.value && (addForm.dirty || addForm.touched))
173+
" [ngClass]="
174+
addForm.value && (addForm.dirty || addForm.touched)
175+
? 'btn-primary'
176+
: 'btn-danger'
177+
" type="submit" class="btn">
178+
Sign in
179+
</button>
180+
</div>
181+
</form>
182+
</div>
183+
</div>
184+
185+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
186+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
187+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
188+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
189+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
190+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
191+
<!---||||||||||||||||||||||\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\||||||||||||||||||\\-->
192+
193+
<div class="col">
194+
<div class="accordion shadow p-3 mb-5 bg-body rounded ml-5" id="accordionExample">
195+
<div class="accordion-item">
196+
<h2 class="accordion-header" id="headingOne">
197+
<button (click)="status1 = !status1" [ngClass]="status1 ? '' : 'collapsed'" type="button"
198+
class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
199+
aria-controls="collapseOne">
200+
First name
201+
</button>
202+
</h2>
203+
<div id="collapseOne" [ngClass]="status1 ? 'show' : ''" class="accordion-collapse collapse"
204+
aria-labelledby="headingOne" data-bs-parent="#accordionExample">
205+
<div class="accordion-body">dfdhhfdg</div>
206+
</div>
207+
</div>
208+
209+
<div class="accordion-item">
210+
<h2 class="accordion-header" id="headingTwo">
211+
<button (click)="status2 = !status2" [ngClass]="status2 ? '' : 'collapsed'"
212+
class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
213+
aria-expanded="false" aria-controls="collapseTwo">
214+
Last name
215+
</button>
216+
</h2>
217+
<div id="collapseTwo" [ngClass]="status2 ? 'show' : ''" class="accordion-collapse collapse"
218+
aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
219+
<div class="accordion-body">fgsdfgdsfg</div>
220+
</div>
221+
</div>
222+
223+
<div class="accordion-item">
224+
<h2 class="accordion-header" id="headingTwo">
225+
<button (click)="status3 = !status3" [ngClass]="status3 ? '' : 'collapsed'"
226+
class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
227+
aria-expanded="false" aria-controls="collapseTwo">
228+
Email
229+
</button>
230+
</h2>
231+
<div id="collapseTwo" [ngClass]="status3 ? 'show' : ''" class="accordion-collapse collapse"
232+
aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
233+
<div class="accordion-body">dfsgsdfgsdf</div>
234+
</div>
235+
</div>
236+
237+
<div class="accordion-item">
238+
<h2 class="accordion-header" id="headingTwo">
239+
<button (click)="status4 = !status4" [ngClass]="status4 ? '' : 'collapsed'"
240+
class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
241+
aria-expanded="false" aria-controls="collapseTwo">
242+
Password
243+
</button>
244+
</h2>
245+
<div id="collapseTwo" [ngClass]="status4 ? 'show' : ''" class="accordion-collapse collapse"
246+
aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
247+
<div class="accordion-body">dfgsdf</div>
248+
</div>
249+
</div>
250+
251+
<div class="accordion-item">
252+
<h2 class="accordion-header" id="headingTwo">
253+
<button (click)="status5 = !status5" [ngClass]="status5 ? '' : 'collapsed'"
254+
class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
255+
aria-expanded="false" aria-controls="collapseTwo">
256+
Address
257+
</button>
258+
</h2>
259+
<div id="collapseTwo" [ngClass]="status5 ? '' : 'show'" class="accordion-collapse collapse"
260+
aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
261+
<div class="accordion-body">dsgsdfg</div>
262+
</div>
263+
</div>
264+
265+
<div class="accordion-item">
266+
<h2 class="accordion-header" id="headingTwo">
267+
<button (click)="status6 = !status6" [ngClass]="status6 ? '' : 'collapsed'"
268+
class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
269+
aria-expanded="false" aria-controls="collapseTwo">
270+
Address 2
271+
</button>
272+
</h2>
273+
<div id="collapseTwo" [ngClass]="status6 ? 'show' : ''" class="accordion-collapse collapse"
274+
aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
275+
<div class="accordion-body">sdfgsd</div>
276+
</div>
277+
</div>
278+
<div class="accordion-item">
279+
<h2 class="accordion-header" id="headingTwo">
280+
<button (click)="status7 = !status7" [ngClass]="status7 ? '' : 'collapsed'"
281+
class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
282+
aria-expanded="false" aria-controls="collapseTwo">
283+
City
284+
</button>
285+
</h2>
286+
<div id="collapseTwo" [ngClass]="status7 ? 'show' : ''" class="accordion-collapse collapse"
287+
aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
288+
<div class="accordion-body">sdfgsdfg</div>
289+
</div>
290+
</div>
291+
<div class="accordion-item">
292+
<h2 class="accordion-header" id="headingTwo">
293+
<button (click)="status8 = !status8" [ngClass]="status8 ? '' : 'collapsed'"
294+
class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
295+
aria-expanded="false" aria-controls="collapseTwo">
296+
State
297+
</button>
298+
</h2>
299+
<div id="collapseTwo" [ngClass]="status8 ? 'show' : ''" class="accordion-collapse collapse"
300+
aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
301+
<div class="accordion-body">dfsgsdfg</div>
302+
</div>
303+
</div>
304+
<div class="accordion-item">
305+
<h2 class="accordion-header" id="headingTwo">
306+
<button (click)="status9 = !status9" [ngClass]="status9 ? '' : 'collapsed'"
307+
class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
308+
aria-expanded="false" aria-controls="collapseTwo">
309+
Zip
310+
</button>
311+
</h2>
312+
<div id="collapseTwo" [ngClass]="status9 ? 'show' : ''" class="accordion-collapse collapse"
313+
aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
314+
<div class="bg-dark accordion-body">dsfgsdf</div>
315+
</div>
316+
</div>
317+
</div>
318+
</div>
319+
<div class="col">
320+
<div *ngIf="(
321+
322+
addForm.dirty
323+
&& addForm.controls['Last_name'].errors?.['required']
324+
&& addForm.controls['First_name'].errors?.['required']
325+
&& addForm.controls['Email'].errors?.['required']
326+
&& addForm.controls['Password'].errors?.['required']
327+
&& addForm.controls['Address'].errors?.['required']
328+
&& addForm.controls['Address_2'].errors?.['required']
329+
&& addForm.controls['City'].errors?.['required']
330+
&& addForm.controls['State'].errors?.['required']
331+
)" class="alert alert-danger" role="alert">
332+
the form is invalid
333+
</div>
334+
335+
<div *ngIf="(
336+
337+
addForm.dirty
338+
&& !addForm.controls['Last_name']?.errors?.['required']
339+
&& !addForm.controls['First_name']?.errors?.['required']
340+
&& !addForm.controls['Email']?.errors?.['required']
341+
&& !addForm.controls['Password']?.errors?.['required']
342+
&& !addForm.controls['Address']?.errors?.['required']
343+
&& !addForm.controls['Address_2']?.errors?.['required']
344+
&& !addForm.controls['City']?.errors?.['required']
345+
&& !addForm.controls['State']?.errors?.['required']
346+
)" class="alert alert-success" role="alert">
347+
the form is all valid
348+
</div>
349+
350+
<div class="form-floating">
351+
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 300px">
352+
353+
{{ addForm.value | json }}
354+
</textarea>
355+
</div>
356+
</div>
357+
</div>
358+
</div>

0 commit comments

Comments
 (0)