The document contains multiple Angular component implementations that define reactive forms, focusing on validations and HTTP interactions. It includes form group and form control definitions, validation checks, error handling mechanisms, and interaction logic for UI components. Additionally, there are examples of form submissions and error handling in response to validation failures.

15. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
</form>`})
class ProductComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}
console.log(form.value);
/*
{
name: " "
}
*/

16. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
</form>`})
class ProductComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}
console.log(form.value);
/*
{
name: " "
}
*/

17. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
</form>`})
class ProductComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}
if (form.valid) {
this.http.post(
'/api/product',
form.value
).subscribe(res => {
alert(' !');
});
}

18. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
<div formGroupName="discount">
<input type="text" formControlName="price" />
<input type="text" formControlName="period" />
</div>
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl('', Validators.required),
discount: new FormGroup({
price: new FormControl(''),
period: new FormControl(''),
})
});
}

19. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
<div formGroupName="discount">
<input type="text" formControlName="price" />
<input type="text" formControlName="period" />
</div>
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl('', Validators.required),
discount: new FormGroup({
price: new FormControl(''),
period: new FormControl(''),
})
});
}

20. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<app-discount
formControlName="discount" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(''),
discount: new FormControl(),
});
}
@Component({
selector: 'app-discount',
template: `
<form [formGroup]="discount">
<!-- ... -->
</div> `})
class DiscountComponent {
discount = new FormGroup({
price: new FormControl(''),
period: new FormControl(''),
});
}

21. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<app-discount
formControlName="discount" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(''),
discount: new FormControl(),
});
}
@Component({
selector: 'app-discount',
template: `
<form [formGroup]="discount">
<!-- ... -->
</div> `})
class DiscountComponent {
discount = new FormGroup({
price: new FormControl(''),
period: new FormControl(''),
});
}

22. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<app-discount
formControlName="discount" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(''),
discount: new FormControl(),
});
}
@Component({
selector: 'app-discount',
template: `
<form [formGroup]="discount">
<!-- ... -->
</div> `})
class DiscountComponent {
discount = new FormGroup({
price: new FormControl(''),
period: new FormControl(''),
});
}

23. @Component({
template: `
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<app-discount
formControlName="discount" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(''),
discount: new FormControl(),
});
}
@Component({
selector: 'app-discount',
template: `
<form [formGroup]="discount">
<!-- ... -->
</div> `})
class DiscountComponent {
discount = new FormGroup({
price: new FormControl(''),
period: new FormControl(''),
});
}

26. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
<span *ngIf="form.get('name')?.errors?.required">
</span>
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}

27. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
<span *ngIf="form.get('name')?.errors?.required">
</span>
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}

28. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
<span *ngIf="form.get('name')?.errors?.required">
</span>
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}
function required(ctrl) {
if (!ctrl.value) {
return {required: true};
}
return null;
}

29. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
<span *ngIf="form.get('name')?.errors?.required">
</span>
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
Validators.required
),
});
}
function required(ctrl) {
if (!ctrl.value) {
return {required: true};
}
return null;
}

30. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
ctrl => '' === ctrl.value ? {required: true} : null,
),
},
form => isEmpty(form.value) ? {error: true} : null
);
}

31. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
ctrl => '' === ctrl.value ? {required: true} : null,
),
},
form => isEmpty(form.value) ? {error: true} : null
);
}

32. @Component({
template: `
<form [formGroup]="form">
<input type="text" formControlName="name" />
</form>`})
class ExampleComponent {
form = new FormGroup({
name: new FormControl(
'',
ctrl => '' === ctrl.value ? {required: true} : null,
),
},
form => isEmpty(form.value) ? {error: true} : null
);
}

34. // POST: /product/8022881030
// Response 400
{
error_code: -10003,
validations: {
"name": [" "],
"discountA.period":
[" 0
"]
}
}
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<input type="text"
formControlName="price" />
<div formGroupName="discountA">
<input type="text"
formControlName="period" />
</div>
</form>

35. // POST: /product/8022881030
// Response 400
{
error_code: -10003,
validations: {
"name": [" "],
"discountA.period":
[" 0
"]
}
}
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<input type="text"
formControlName="price" />
<div formGroupName="discountA">
<input type="text"
formControlName="period" />
</div>
</form>

36. // POST: /product/8022881030
// Response 400
{
error_code: -10003,
validations: {
"name": [" "],
"discountA.period":
[" 0
"]
}
}
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<input type="text"
formControlName="price" />
<div formGroupName="discountA">
<input type="text"
formControlName="period" />
</div>
</form>
<app-error> </app-error>

37. // POST: /product/8022881030
// Response 400
{
error_code: -10003,
validations: {
"name": [" "],
"discountA.period":
[" 0
"]
}
}
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<input type="text"
formControlName="price" />
<div formGroupName="discountA">
<input type="text"
formControlName="period" />
</div>
</form>
<app-error> </app-error>

38. // POST: /product/8022881030
// Response 400
{
error_code: -10003,
validations: {
"name": [" "],
"discountA.period":
[" 0
"]
}
}
<form [formGroup]="form">
<input type="text"
formControlName="name" />
<input type="text"
formControlName="price" />
<div formGroupName="discountA">
<input type="text"
formControlName="period" />
</div>
</form>
<app-error> </app-error>
<app-error> ...</app-error>

39. <div *ngIf="name.invalid && (name.dirty || name.touched)"
class="alert alert-danger">
<div *ngIf="name.errors.required">
.
</div>
<div *ngIf="name.errors.minlength">
4 .
</div>
<div *ngIf="name.errors.forbiddenName">
.
</div>
</div>
<input id="name" class="form-control" formControlName="name" />

40. <input id="name" class="form-control" formControlName="name" />

41. import { Component } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
@Component({
selector: "my-app",
template: `
<form [formGroup]="form">
<input formControlName="name" />
</form>
<pre><code>{{form.value | json}}</code></pre>
`
})
export class AppComponent {
form = new FormGroup({
name: new FormControl("", Validators.required)
});
}

42. import { Component } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
@Component({
selector: "my-app",
template: `
<form [formGroup]="form">
<input formControlName="name" />
</form>
<pre><code>{{form.value | json}}</code></pre>
`
})
export class AppComponent {
form = new FormGroup({
name: new FormControl("", Validators.required)
});
}

53. @Component({
selector: 'app-product-list',
template: `
<div>
click count: {{count}}
<button type="button" (click)="onClick()">click</button>
</div>
`
})
export class ProductListComponent {
count = 0;
onClick() {
this.count += 1;
}
}

54. @Component({
selector: 'app-product-list',
template: `
<div>
click count: {{count}}
<button type="button" (click)="onClick()">click</button>
</div>
`
})
export class ProductListComponent {
count = 0;
onClick() {
this.count += 1;
}
}

57. const origin = window.setTimeout;
window.setTimeout = function(...args) {
origin(...args);
ngZone.runChangeDetection();
}
// window.clearTimeout
// ...

61. @NgModule({
imports: [
RouterModule.forRoot([
{
path: '/product',
loadChildren: () =>
import('./product/product.module')
.then(mod => mod.ProductModule)
},
{
path: '/delivery',
loadChildren: () =>
import('./delivery/delivery.module')
.then(mod => mod.DeliveryModule)
}
])
]
})
class EntryModule {}

62. @NgModule({
imports: [
RouterModule.forRoot([
{
path: '/product',
loadChildren: () =>
import('./product/product.module')
.then(mod => mod.ProductModule)
},
{
path: '/delivery',
loadChildren: () =>
import('./delivery/delivery.module')
.then(mod => mod.DeliveryModule)
}
], {preloadingStrategy: PreloadAllModules})
]
})
class EntryModule {}

63. @NgModule({
imports: [
RouterModule.forRoot([
{
path: '/product',
loadChildren: () =>
import('./product/product.module')
.then(mod => mod.ProductModule)
},
{
path: '/delivery',
loadChildren: () =>
import('./delivery/delivery.module')
.then(mod => mod.DeliveryModule)
}
], {preloadingStrategy: PreloadAllModules})
]
})
class EntryModule {}

68. @NgModule({
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: ApiPrefixInterceptorService,
multi: true,
},
{
provide: HTTP_INTERCEPTORS,
useClass: HttpErrorHandlerInterceptor,
multi: true,
},
{
provide: HTTP_INTERCEPTORS,
useClass: DistinctRequest,
multi: true,
}]
})
export class AppModule {}

70. router.events
.pipe(
filter(e => e instanceof NavigationEnd)
)
.subscribe(e => {
console.log(e); // NavigationEnd ('/product')
});

71. router.events
.pipe(
filter(e => e instanceof NavigationEnd),
pairwise()
)
.subscribe(e => {
console.log(e); // NavigationEnd ('/product')
});

72. router.events
.pipe(
filter(e => e instanceof NavigationEnd),
pairwise()
)
.subscribe(e => {
console.log(e); // NavigationEnd ('/product')
});

73. const subscription = activatedRoute.queryParams.pipe(
switchMap(queryParams => httpClient.get('/api/product', queryParams)
).subscribe();

84. curl -F 'data=@path/to/local/a.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/b.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/c.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/d.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/e.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/f.js' UPLOAD_ADDRESS
# ...

85. curl -F 'data=@path/to/local/a.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/b.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/c.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/d.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/e.js' UPLOAD_ADDRESS
curl -F 'data=@path/to/local/f.js' UPLOAD_ADDRESS
# ...
import {uploadFilesToKakaoCDN} from '@commerce-ui/deploy-toolkit'
(async () => {
const cdnUrl = await uploadFilesToKakaoCDN({
path: 'dist/'
});
})();