{"id":296184,"date":"2019-12-21T15:00:20","date_gmt":"2019-12-21T15:00:20","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=296184"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=296184","title":{"rendered":"\u0421\u0432\u043e\u0438 Custom Controls \u0432 Angular"},"content":{"rendered":"\n
\n

\u041f\u0440\u043e\u043b\u043e\u0433<\/h3>\n

\u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0445 \u0432 angular, \u0443\u0437\u043d\u0430\u0435\u043c \u0437\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b, \u043a\u0430\u043a \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0421\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0447\u0442\u043e \u0432\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c angular, \u043d\u043e \u0445\u043e\u0442\u0438\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u0435\u0451 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0443. \u0425\u043e\u0440\u043e\u0448\u0435\u0435 \u0436\u0435\u043b\u0430\u043d\u0438\u0435, \u043d\u0430\u0447\u043d\u0435\u043c.
<\/a> <\/p>\n

Reactive \u0438 Template Driven\u00a0\u0444\u043e\u0440\u043c\u044b<\/h3>\n

\u041f\u0430\u0440\u0430 \u0441\u043b\u043e\u0432 to be sure we are on the same page. \u0410\u043d\u0433\u0443\u043b\u044f\u0440 \u0438\u043c\u0435\u0435\u0442 \u0434\u0432\u0430 \u0442\u0438\u043f\u0430 \u0444\u043e\u0440\u043c: Template Driven Forms<\/i> \u0438 Reactive Forms<\/i>.<\/p>\n

Template Driven Forms<\/i> \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u044b \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 two-way binding<\/i> (\u043f\u0440\u0438\u0432\u0435\u0442, angularjs). \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0435 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, username), \u0432 html \u0443 \u0442\u0435\u0433\u0430 input \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c [(value)]=\u00abusername\u00bb, \u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u043f\u0443\u0442\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 username. \u0412 2011 \u0433\u043e\u0434\u0443 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0447\u0435\u0440\u0442\u043e\u0432\u043e\u0439 \u043c\u0430\u0433\u0438\u0435\u0439! \u041e\u043a\u0435\u0439, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441. \u0422\u0430\u043a\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b \u0431\u0443\u0434\u0435\u0442\u2026 \u0441\u043b\u043e\u0436\u043d\u043e.<\/p>\n

Reactive Forms<\/i> \u044d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0444\u043e\u0440\u043c. \u041e\u043d\u0438 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043d\u0430\u043c \u00ab\u0441\u043e\u0437\u0434\u0430\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u0444\u043e\u0440\u043c\u044b (FormGroup<\/i>), \u043f\u0435\u0440\u0435\u0434\u0430\u0439 \u0435\u043c\u0443 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 (FormControl<\/i>) \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u0434\u0430\u0439 \u044d\u0442\u043e \u0432 html, \u0430 \u044f \u0441\u0434\u0435\u043b\u0430\u044e \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435\u00bb. \u041e\u043a\u0435\u0439, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c:<\/p>\n

class UsefullComponent {  public control = new FormControl('');  public formG = new FormGroup({username: control}); } <\/code><\/pre>\n
  <\/p>\n
<form [formGroup]="formG">  <input type="text" formControlName="username"> <\/form> <\/code><\/pre>\n
  \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443, \u0441 \u0431\u043b\u044d\u043a\u0434\u0436\u0435\u043a\u043e\u043c \u0438\u2026 \u043d\u0443 \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438, \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0441\u0442\u044f\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, formG.valueChanges<\/i> \u0434\u0430\u0441\u0442 \u043d\u0430\u043c Observable (\u043f\u043e\u0442\u043e\u043a) \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0444\u043e\u0440\u043c\u044b. \u0422\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b, \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435, \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438, \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u044b (formG.value<\/i>) \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435. \u0418 \u0432\u0441\u0435 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044f \u0441 \u043e\u0434\u043d\u0438\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c formG<\/i>.<\/p>\n
  \u0410 \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 angular’\u0430 \u0434\u0430\u043b\u0438 \u043d\u0430\u043c \u0443\u0434\u043e\u0431\u043d\u044b\u0439 FormBuilder<\/i> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a:<\/p>\n
class UsefullComponent {  public formG: FormGroup;   constructor(private fb: FormBuilder) {   this.formG = fb.group({    name: '' \/\/ \u043d\u0438\u043a\u0430\u043a\u0438\u0445 new FormControl() !!   })  }  } <\/code><\/pre>\n
  <\/p>\n
Custom Controls<\/h3>\n
  \u0410\u043d\u0433\u0443\u043b\u044f\u0440 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043d\u0430\u043c \u00ab\u0431\u0440\u043e, \u0435\u0441\u043b\u0438 \u0442\u0435\u0431\u0435 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 (input, date, number \u0438 \u0434\u0440\u0443\u0433\u0438\u0435), \u0438\u043b\u0438 \u043e\u043d\u0438 \u0442\u0435\u0431\u0435 \u0432\u0434\u0440\u0443\u0433 \u0447\u0435\u043c \u0442\u043e \u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0438\u0441\u044c, \u0432\u043e\u0442 \u0442\u0435\u0431\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445\u00bb. \u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u043e\u0442\u044c \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438, \u0445\u043e\u0442\u044c \u0441 template-driven \u0444\u043e\u0440\u043c\u0430\u043c\u0438, \u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 (\u0443\u0434\u0438\u0432\u0438\u043b\u0438!). \u0417\u043d\u0430\u044f \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044d\u0442\u043e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c (\u0442\u043e \u0447\u0442\u043e \u043d\u0430\u0434\u043e), \u043d\u0430\u043f\u0438\u0448\u0435\u043c:<\/p>\n
import { Component, Input } from '@angular\/core';  @Component({  selector: 'counter-control',  template: `   <button (click)="down()">Down<\/button>    {{ value }}   <button (click)="up()">Up<\/button>  ` }) class CounterControlComponent {   @Input()   value = 0;    up() {   this.value++;  }    down() {   this.value - ;  } } <\/code><\/pre>\n
  \u041a\u0430\u043a \u0438 \u043b\u044e\u0431\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443, \u044d\u0442\u0443 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043c\u043e\u0434\u0443\u043b\u0435 (\u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043b\u0430\u0441\u044c, \u0442\u0430\u043a\u0438\u0435 \u043d\u044e\u0430\u043d\u0441\u044b \u043e\u043f\u0443\u0441\u0442\u0438\u043c).<\/p>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443:<\/p>\n
import { Component } from '@angular\/core';  @Component({  selector: 'parent-component',  template: `   <counter-control><\/counter-control>  ` }) class ParentComponent {} <\/code><\/pre>\n
  \u042d\u0442\u043e \u0432\u0441\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u0433\u0434\u0435 \u0444\u043e\u0440\u043c\u044b?! \u0425\u043e\u0442\u044f \u0431\u044b template-driven\u2026.
  \u0411\u0435\u0437 \u043f\u0430\u043d\u0438\u043a\u0438, \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442, \u043f\u043e\u0441\u043b\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430 \u0441 ControlValueAccessor<\/i>.<\/p>\n
Control Value\u00a0Accessor<\/h3>\n
  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b angular’\u0430 \u043c\u043e\u0433\u043b\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0432\u0430\u0448\u0438\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u043c, \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u042d\u0442\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f ControlValueAccessor<\/i>. \u042d\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043b\u0438\u043c\u043e\u0440\u0444\u0438\u0437\u043c\u0430 \u0438\u0437 \u041e\u041e\u041f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0448 \u043e\u0431\u044a\u0435\u043a\u0442 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u043d\u0442\u0440\u043e\u043b) \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b (\u0444\u043e\u0440\u043c\u044b \u0430\u043d\u0433\u0443\u043b\u044f\u0440\u0430) \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441 \u043d\u0430\u0448\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c.<\/p>\n
  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f ControlValueAccessor<\/i> \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0435\u0434\u0438\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043a\u0441\u0442\u0430\u0442\u0438 \u0433\u043e\u0432\u043e\u0440\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432. Angular \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0442\u0430\u043a \u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u044d\u0442\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0414\u043b\u044f \u0447\u0435\u0433\u043e? \u0410 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043a \u0435\u0434\u0438\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 input \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 value, \u0443 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 checked. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439 ControlValueAccessor: DefaultValueAccessor<\/i>\u200a-\u200a\u0434\u043b\u044f input’\u043e\u0432 \u0438 textarea, CheckboxControlValueAccessor<\/i>\u200a-\u200a\u0434\u043b\u044f \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432, RadioControlValueAccessor<\/i> \u0434\u043b\u044f \u0440\u0430\u0434\u0438\u043e\u043a\u043d\u043e\u043f\u043e\u043a \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/p>\n
  \u041d\u043e \u0447\u0442\u043e angular \u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f ControlValueAccessor<\/i>? \u0412\u0441\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432 DOM (view), \u0430 \u0442\u0430\u043a \u0436\u0435 \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430 \u0434\u043e FormGroup<\/i> \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432.<\/p>\n
  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u0437\u043d\u0430\u043b\u0438 \u043f\u0440\u043e ControlValueAccessor<\/i>, \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0443.<\/p>\n
  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441:<\/p>\n
interface ControlValueAccessor {   writeValue(value: any): void   registerOnChange(fn: any): void   registerOnTouched(fn: any): void } <\/code><\/pre>\n
  writeValue(value: any)<\/i> \u2014 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u0434\u0430\u043d\u0438\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e (new FormControl(‘I am default value’)<\/i>) \u0438\u043b\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u0435\u0440\u0445\u0443 control.setValue(‘I am setted value’)<\/i>.<\/p>\n
  registerOnChange(fn: any)<\/i> \u2014 \u043c\u0435\u0442\u043e\u0434 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432\u044b\u0437\u0432\u0430\u043d \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (fn \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f callback’\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0432\u0435\u0434\u043e\u043c\u0438\u0442 \u0444\u043e\u0440\u043c\u0443 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435).<\/p>\n
  registerOnTouched(fn: any)\u200a<\/i> \u2014 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e registerOnChange, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430 touch-\u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/p>\n
import { Component, Input } from '@angular\/core'; import { ControlValueAccessor } from '@angular\/forms';  @Component({  selector: 'counter-control',  template: `   <button (click)="down()">Down<\/button>    {{ value }}   <button (click)="up()">Up<\/button>  ` }) class CounterControlComponent implements ControlValueAccessor {  @Input()  value = 0;   onChange(_: any) {}   up() {   this.value++;  }   down() {   this.value - ;  }   writeValue(value: any) {   this.value = value;  }   registerOnChange(fn) {   this.onChange = fn;  }   registerOnTouched() {} } <\/code><\/pre>\n
  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0437\u043d\u0430\u043b\u0430 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 onChange<\/i> \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f value. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u044b\u0437\u043e\u0432 onChange<\/i> \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435 (up \u0438 down), \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u043e\u043b\u0435 value \u0447\u0435\u0440\u0435\u0437 \u0433\u0435\u0442\u0442\u0435\u0440\u044b \u0438 \u0441\u0435\u0442\u0442\u0435\u0440\u044b:<\/p>\n
\/\/ \u2026 class CounterControlComponent implements ControlValueAccessor {  private _value;   get value() {   return this._value;  }   @Input()  set value(val) {   this._value = val;   this.onChange(this._value);  }   onChange(_: any) {}    up() {   this.value++;  }    down() {   this.value - ;  }  \/\/ \u2026 } <\/code><\/pre>\n
  \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0430\u043d\u0433\u0443\u043b\u044f\u0440 \u043d\u0435 \u043a\u0443\u0440\u0441\u0435, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 ControlValueAccessor<\/i> \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b, \u0441\u043a\u0430\u0436\u0435\u043c \u0435\u043c\u0443 \u043e\u0431 \u044d\u0442\u043e\u043c:<\/p>\n
import { Component, Input, forwardRef } from '@angular\/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular\/forms';  @Component({  \u2026  providers: [{    provide: NG_VALUE_ACCESSOR,   useExisting: forwardRef(() => CounterControlComponent),   multi: true  }] }) class CounterControlComponent implements ControlValueAccessor {  \u2026 } <\/code><\/pre>\n
  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0443\u0447\u0430\u0441\u0442\u043a\u0435 \u043a\u043e\u0434\u0430 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0430\u043d\u0433\u0443\u043b\u044f\u0440\u0443 \u00ab\u044f \u0445\u043e\u0447\u0443 \u0437\u0430\u0440\u0435\u0433\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b (provide: NG_VALUE_ACCESSOR<\/i>), \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439 \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 (\u043d\u0430 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0448\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439) \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (useExisting: forwardRef(() => CounterControlComponent)<\/i>)\u00bb.\u00a0<\/p>\n
  multi: true<\/i> \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c \u0447\u0442\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0441 \u0442\u0430\u043a\u0438\u043c \u0442\u043e\u043a\u0435\u043d\u043e\u043c (NG_VALUE_ACCESSOR<\/i>) \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e.<\/p>\n
\u041d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0436 \u0442\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438<\/h3>\n
  \u0421\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u044e\u0437\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b. \u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c FormsModule \/ ReactiveFormsModule <\/i>\u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u043c\u043e\u0434\u0443\u043b\u044f \u0433\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b.<\/p>\n
\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 Template Driven\u00a0\u0444\u043e\u0440\u043c\u0430\u0445<\/h4>\n
  \u0422\u0443\u0442 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u0432\u0443\u0445\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0435 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 ngModel<\/i> \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 view \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442:<\/p>\n
import { Component } from '@angular\/core';  @Component({  selector: 'parent-component',  template: `   <counter-control [(ngModel)]="controlValue"><\/counter-control>  ` }) class ParentComponent {  controlValue = 10; } <\/code><\/pre>\n
  <\/p>\n
\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 Reactive\u00a0Forms<\/h4>\n
  \u041a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438, \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u0447\u0435\u0440\u0435\u0437 FormBuilder<\/i>, \u043e\u0442\u0434\u0430\u0435\u043c \u0432 html \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435:<\/p>\n
import { Component, OnInit } from '@angular\/core'; import { FormBuilder } from '@angular\/forms';  @Component({  selector: 'parent-component',  template: `   <form [formGroup]="form">    <counter-control formControlName="counter"><\/counter-control>   <\/form>  ` }) class ParentComponent implements OnInit {  form: FormGroup;   constructor(private fb: FormBuilder) {}   ngOnInit() {   this.form = this.fb.group({    counter: 5   });  } } <\/code><\/pre>\n
  \u0422\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0441 \u043d\u0430\u0448\u0438\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u043c, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0441\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u043c\u0438 (\u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u043f\u0440\u043e \u043f\u043e\u043b\u0438\u043c\u043e\u0440\u0444\u0438\u0437\u043c?). \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043d\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e, \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0437\u0430 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n
  \u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b:<\/p>\n
  \u0421\u0442\u0430\u0442\u044c\u044f<\/a> \u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u0445 \u043e\u0442 Pascal Precht.
  \u041e\u0444 \u0434\u043e\u043a\u0438<\/a> \u0444\u043e\u0440\u043c \u0432 \u0430\u043d\u0433\u0443\u043b\u044f\u0440\u0435.
  \u0421\u0435\u0440\u0438\u044f \u0441\u0442\u0430\u0442\u0435\u0439<\/a> \u043e rxjs.<\/div>\n