Skip to content

Commit b768a38

Browse files
valerisuleovalerisuleo
committed
ctrl value accessor
1 parent cb48186 commit b768a38

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+20566
-0
lines changed

‎advanced-topic/control_value_accessor-directive/.editorconfig

Whitespace-only changes.

‎advanced-topic/control_value_accessor-directive/.gitignore

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db

‎advanced-topic/control_value_accessor-directive/.vscode/extensions.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3+
"recommendations": ["angular.ng-template"]
4+
}

‎advanced-topic/control_value_accessor-directive/.vscode/launch.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3+
"version": "0.2.0",
4+
"configurations": [
5+
{
6+
"name": "ng serve",
7+
"type": "pwa-chrome",
8+
"request": "launch",
9+
"preLaunchTask": "npm: start",
10+
"url": "http://localhost:4200/"
11+
},
12+
{
13+
"name": "ng test",
14+
"type": "chrome",
15+
"request": "launch",
16+
"preLaunchTask": "npm: test",
17+
"url": "http://localhost:9876/debug.html"
18+
}
19+
]
20+
}

‎advanced-topic/control_value_accessor-directive/.vscode/tasks.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3+
"version": "2.0.0",
4+
"tasks": [
5+
{
6+
"type": "npm",
7+
"script": "start",
8+
"isBackground": true,
9+
"problemMatcher": {
10+
"owner": "typescript",
11+
"pattern": "$tsc",
12+
"background": {
13+
"activeOnStart": true,
14+
"beginsPattern": {
15+
"regexp": "(.*?)"
16+
},
17+
"endsPattern": {
18+
"regexp": "bundle generation complete"
19+
}
20+
}
21+
}
22+
},
23+
{
24+
"type": "npm",
25+
"script": "test",
26+
"isBackground": true,
27+
"problemMatcher": {
28+
"owner": "typescript",
29+
"pattern": "$tsc",
30+
"background": {
31+
"activeOnStart": true,
32+
"beginsPattern": {
33+
"regexp": "(.*?)"
34+
},
35+
"endsPattern": {
36+
"regexp": "bundle generation complete"
37+
}
38+
}
39+
}
40+
}
41+
]
42+
}

‎advanced-topic/control_value_accessor-directive/README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# ControlValueAccessor
2+
3+
## What?
4+
5+
It's an interface in Angular that allows you to create custom form controls that can be used with Angular's `ngModel`, `formControl`, and `formControlName` directives.
6+
7+
When you create a custom form control that implements the `ControlValueAccessor` interface, you are telling Angular how to read and write the value of your control to and from the DOM. This is important because it enables the user to interact with your custom control and Angular to keep the control's value in sync with the form.
8+
9+
Here are the methods that are defined in the `ControlValueAccessor` interface:
10+
11+
1. `writeValue(obj: any): void` - This method is called by Angular when it needs to update the value of your control. It takes a value as an argument, which represents the current value of your control.
12+
2. `registerOnChange(fn: any): void` - This method is called by Angular to register a function that should be called whenever the value of your control changes. This function is typically the callback function provided by Angular's `ngModel`, `formControl`, or `formControlName` directives.
13+
3. `registerOnTouched(fn: any): void` - This method is called by Angular to register a function that should be called whenever the user interacts with your control, such as *clicking* or *typing* in it. This function is typically used to mark the control as "touched" so that Angular can display validation errors if necessary.
14+
4. `setDisabledState(isDisabled: boolean): void` - This method is called by Angular to enable or disable your control based on the disabled state of the form.
15+
16+
17+
## How?
18+
19+
Let's say you want to create a custom `checkbox` control that can be used with Angular's `ngModel` directive. Here's how you can do it:
20+
21+
1. First, create a new TypeScript file called custom-checkbox.component.ts and define your custom control component like this:

‎advanced-topic/control_value_accessor-directive/angular.json

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"composition-directive": {
7+
"projectType": "application",
8+
"schematics": {
9+
"@schematics/angular:component": {
10+
"style": "scss"
11+
}
12+
},
13+
"root": "",
14+
"sourceRoot": "src",
15+
"prefix": "app",
16+
"architect": {
17+
"build": {
18+
"builder": "@angular-devkit/build-angular:browser",
19+
"options": {
20+
"outputPath": "dist/composition-directive",
21+
"index": "src/index.html",
22+
"main": "src/main.ts",
23+
"polyfills": [
24+
"zone.js"
25+
],
26+
"tsConfig": "tsconfig.app.json",
27+
"inlineStyleLanguage": "scss",
28+
"assets": [
29+
"src/favicon.ico",
30+
"src/assets"
31+
],
32+
"styles": [
33+
"src/styles.scss"
34+
],
35+
"scripts": []
36+
},
37+
"configurations": {
38+
"production": {
39+
"budgets": [
40+
{
41+
"type": "initial",
42+
"maximumWarning": "500kb",
43+
"maximumError": "1mb"
44+
},
45+
{
46+
"type": "anyComponentStyle",
47+
"maximumWarning": "2kb",
48+
"maximumError": "4kb"
49+
}
50+
],
51+
"outputHashing": "all"
52+
},
53+
"development": {
54+
"buildOptimizer": false,
55+
"optimization": false,
56+
"vendorChunk": true,
57+
"extractLicenses": false,
58+
"sourceMap": true,
59+
"namedChunks": true
60+
}
61+
},
62+
"defaultConfiguration": "production"
63+
},
64+
"serve": {
65+
"builder": "@angular-devkit/build-angular:dev-server",
66+
"configurations": {
67+
"production": {
68+
"browserTarget": "composition-directive:build:production"
69+
},
70+
"development": {
71+
"browserTarget": "composition-directive:build:development"
72+
}
73+
},
74+
"defaultConfiguration": "development"
75+
},
76+
"extract-i18n": {
77+
"builder": "@angular-devkit/build-angular:extract-i18n",
78+
"options": {
79+
"browserTarget": "composition-directive:build"
80+
}
81+
},
82+
"test": {
83+
"builder": "@angular-devkit/build-angular:karma",
84+
"options": {
85+
"polyfills": [
86+
"zone.js",
87+
"zone.js/testing"
88+
],
89+
"tsConfig": "tsconfig.spec.json",
90+
"inlineStyleLanguage": "scss",
91+
"assets": [
92+
"src/favicon.ico",
93+
"src/assets"
94+
],
95+
"styles": [
96+
"src/styles.scss"
97+
],
98+
"scripts": []
99+
}
100+
}
101+
}
102+
}
103+
}
104+
}

0 commit comments

Comments
 (0)