Skip to content

Commit ed47c0a

Browse files
committed
add
1 parent 3fcfece commit ed47c0a

File tree

10 files changed

+588
-0
lines changed

10 files changed

+588
-0
lines changed
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

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

Lines changed: 358 additions & 0 deletions
Large diffs are not rendered by default.
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
2+
3+
4+
5+
6+
$one : #ff6e48;
7+
$two : #00fff1;
8+
$three : #ff00aa;
9+
$four : #8fd3b8;
10+
$five : #0c1012;
11+
12+
13+
.p{
14+
color: white;
15+
}
16+
17+
18+
.error{
19+
color: #e92f00
20+
}
21+
22+
.canter
23+
{
24+
25+
margin-top: 20vh;
26+
margin-left: 85vh;
27+
28+
}
29+
.fo
30+
{
31+
display: flex;
32+
justify-content: space-around;
33+
}
34+
35+
36+
37+
38+
39+
40+
// .ng-valid[required], .ng-valid.required {
41+
// border-left: 5px solid #42A948; /* green */
42+
// }
43+
44+
// .ng-invalid:not(form) {
45+
// border: 5px solid #ff0000; /* red */
46+
// }
47+
48+
// .alert div {
49+
// background-color: #fed3d3;
50+
// color: #820000;
51+
// padding: 1rem;
52+
// margin-bottom: 1rem;
53+
// }
54+
55+
// .form-group {
56+
// margin-bottom: 1rem;
57+
// }
58+
59+
// label {
60+
// display: block;
61+
// margin-bottom: .5rem;
62+
// }
63+
64+
// select {
65+
// width: 100%;
66+
// padding: .5rem;
67+
// }
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ReactiveFormComponent } from './reactive-form.component';
4+
5+
describe('ReactiveFormComponent', () => {
6+
let component: ReactiveFormComponent;
7+
let fixture: ComponentFixture<ReactiveFormComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ ReactiveFormComponent ]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(ReactiveFormComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});
Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { group } from '@angular/animations';
2+
import { NgClass } from '@angular/common';
3+
import { Component, OnInit } from '@angular/core';
4+
5+
import {
6+
FormBuilder,
7+
FormControl,
8+
FormGroup,
9+
NgForm,
10+
Validators,
11+
} from '@angular/forms';
12+
import { NgModel } from '@angular/forms';
13+
import { VirtualTimeScheduler } from 'rxjs';
14+
15+
@Component({
16+
selector: 'app-reactive-form',
17+
templateUrl: './reactive-form.component.html',
18+
styleUrls: ['./reactive-form.component.scss'],
19+
})
20+
export class ReactiveFormComponent implements OnInit {
21+
status1: boolean = false;
22+
status2: boolean = false;
23+
status3: boolean = false;
24+
status4: boolean = false;
25+
status5: boolean = false;
26+
status6: boolean = false;
27+
status7: boolean = false;
28+
status8: boolean = false;
29+
status9: boolean = false;
30+
31+
// public from: FormGroup = new FormGroup({
32+
// First_name: new FormControl(
33+
// '',
34+
// [Validators.required, Validators.maxLength(20)],
35+
// []
36+
// ),
37+
38+
// Last_name: new FormControl('', Validators.required, []),
39+
// });
40+
41+
public addForm!: FormGroup;
42+
43+
constructor(private fb: FormBuilder) {}
44+
ngOnInit(): void {
45+
this.addForm = this.fb.group({
46+
First_name: [
47+
'',
48+
[
49+
Validators.required,
50+
Validators.maxLength(10),
51+
Validators.minLength(2),
52+
],
53+
],
54+
Last_name: [
55+
'',
56+
[
57+
Validators.required,
58+
Validators.maxLength(10),
59+
Validators.minLength(2),
60+
],
61+
],
62+
Email: [
63+
'',
64+
[
65+
Validators.required,
66+
Validators.maxLength(10),
67+
Validators.minLength(2),
68+
],
69+
],
70+
Password: [
71+
'',
72+
[
73+
Validators.required,
74+
Validators.maxLength(10),
75+
Validators.minLength(2),
76+
],
77+
],
78+
Address: [
79+
'',
80+
[
81+
Validators.required,
82+
Validators.maxLength(10),
83+
Validators.minLength(2),
84+
],
85+
],
86+
Address_2: [
87+
'',
88+
[
89+
Validators.required,
90+
Validators.maxLength(10),
91+
Validators.minLength(2),
92+
],
93+
],
94+
City: [
95+
'',
96+
[
97+
Validators.required,
98+
Validators.maxLength(10),
99+
Validators.minLength(2),
100+
],
101+
],
102+
State: [
103+
'',
104+
[
105+
Validators.required,
106+
Validators.maxLength(10),
107+
Validators.minLength(2),
108+
],
109+
],
110+
Zip: [
111+
'',
112+
[
113+
Validators.required,
114+
Validators.maxLength(10),
115+
Validators.minLength(2),
116+
],
117+
],
118+
Check_me_out: [
119+
'',
120+
[
121+
Validators.required,
122+
Validators.maxLength(10),
123+
Validators.minLength(2),
124+
],
125+
],
126+
});
127+
128+
this.addForm.valueChanges.subscribe((form) => {
129+
console.log(this.addForm);
130+
});
131+
}
132+
133+
// get First_name() {
134+
// return this.porfileForm.get('First_name');
135+
// }
136+
137+
// onSubmit(): void {
138+
// console.log(this.porfileForm);
139+
// }
140+
}

0 commit comments

Comments
 (0)