{"id":1595,"date":"2018-01-05T21:39:20","date_gmt":"2018-01-05T17:39:20","guid":{"rendered":"https:\/\/blog.rc21net.ru\/?p=1595"},"modified":"2022-11-19T02:30:36","modified_gmt":"2022-11-18T22:30:36","slug":"reactive-forms-angular-2","status":"publish","type":"post","link":"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/","title":{"rendered":"\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (Reactive Forms) \u0432 Angular 2+"},"content":{"rendered":"

Angular 2 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0434\u0432\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c: \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432<\/strong> (template-driven forms<\/strong>) \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b<\/strong> (reactive forms<\/strong>). \u041e\u0431\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0432\u0445\u043e\u0434\u044f\u0442 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443\u00a0@angular\/forms<\/span>\u00a0\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u043d\u0430\u0431\u043e\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u0440\u0430\u0437\u043d\u044b\u043c \u043c\u043e\u0434\u0443\u043b\u044f\u043c:\u00a0FormsModule<\/span>\u00a0\u0438\u00a0ReactiveFormsModule<\/span>\u00a0\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n

<\/p>\n

Reactive forms<\/strong>\u00a0vs. template-driven forms<\/strong><\/h2>\n

\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b<\/strong> (reactive forms<\/strong>) \u0432 Angular \u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u0441\u0442\u0438\u043b\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u044f\u0432\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0442\u043e\u043a\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u00a0\u043c\u043e\u0434\u0435\u043b\u044c\u044e \u0434\u0430\u043d\u043d\u044b\u0445<\/strong> (data model<\/strong>) \u0438 \u043c\u043e\u0434\u0435\u043b\u044c\u044e \u0444\u043e\u0440\u043c\u044b<\/strong> (form model<\/strong>), \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0439 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0438 \u0445\u0440\u0430\u043d\u044f\u0449\u0435\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n

\u0412 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0445 \u043c\u044b \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b, \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0435 \u0432 Angular, \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u0445 \u043a HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0430\u043a, \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0438\u0436\u0435. \u0422.\u0435. \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0422.\u043a. \u043a\u043b\u0430\u0441\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u0430\u043a \u043a \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445<\/em> \u0442\u0430\u043a \u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u0444\u043e\u0440\u043c\u044b<\/em>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0442\u044c \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u043a \u0431\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u0442 \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 (react) \u043d\u0430 \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n

\u0421\u043b\u0435\u0434\u0443\u044f \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044f \u0441 \u043d\u0435\u0439 \u043a\u0430\u043a \u0441 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0438\u0445 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043b\u0438 \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043f\u0440\u043e\u0434\u0435\u043b\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 \u044d\u0442\u0438\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u043e\u0432\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438.<\/p>\n

\u0424\u043e\u0440\u043c\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432<\/strong> (template-driven forms<\/strong>) \u0432 \u044d\u0442\u043e\u043c \u043f\u043b\u0430\u043d\u0435 \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u0438\u043d\u0430\u0447\u0435. \u041c\u044b \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a, <input><\/span>\u00a0\u0438\u043b\u0438 <select><\/span>) \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u0445 \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u0432\u0440\u043e\u0434\u0435\u00a0ngModel<\/span>. \u041c\u044b \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c\u00a0\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b, \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0435 \u0432 Angular. \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b Angular’\u0430 \u0434\u0435\u043b\u0430\u044e\u0442 \u044d\u0442\u043e \u0437\u0430 \u043d\u0430\u0441. \u041c\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e, Angular \u043e\u043f\u044f\u0442\u044c \u0436\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u0437\u0430 \u043d\u0430\u0441. Angular \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442.<\/p>\n

\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b<\/h2>\n

\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b:<\/p>\n

import { FormControl } from '@angular\/forms';\n\nexport class ReactiveFormComponent {\n  name = new FormControl();\n}<\/pre>\n
\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443\u00a0FormControl<\/span>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c\u00a0FormControl<\/span>.<\/p>\n
\u0412 4 \u0441\u0442\u0440\u043e\u043a\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u00a0FormControl<\/span>\u00a0\u0441 \u0438\u043c\u0435\u043d\u0435\u043c\u00a0name<\/span>. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043a HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u00a0<input><\/span>. \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u00a0FormControl<\/span> \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0442\u0440\u0438 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430: \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u043e\u0432 \u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u043e\u0432.<\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n
<input [formControl]=\"name\"><\/pre>\n
\u0417\u0434\u0435\u0441\u044c \u0447\u0442\u043e\u0431\u044b \u0441\u0432\u044f\u0437\u0430\u0442\u044c\u00a0<input><\/span>\u00a0\u0441 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c\u00a0FormControl<\/span>\u00a0\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0[formControl]=»name»<\/span>.<\/p>\n
\u0418 \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u00a0ReactiveFormsModule<\/span>\u00a0\u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n
import { NgModule }            from '@angular\/core';\nimport { BrowserModule }       from '@angular\/platform-browser';\nimport { ReactiveFormsModule } from '@angular\/forms';\n\nimport { AppComponent }        from '.\/app.component';\nimport { ReactiveFormComponent } from '.\/reactive-form.component';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    ReactiveFormsModule\n  ],\n  declarations: [\n    AppComponent,\n    ReactiveFormComponent\n  ],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule { }<\/pre>\n
\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0444\u043e\u0440\u043c<\/h2>\n
\u041a \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u0430\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0444\u043e\u0440\u043c \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043d\u0435\u0441\u0442\u0438:<\/p>\n
    \n
  • AbstractControl<\/span>\u00a0\u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u0439 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0442\u0440\u0435\u0445 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u044b\u0445:\u00a0FormControl<\/span>,\u00a0FormGroup<\/span>\u00a0\u0438\u00a0FormArray<\/span>. \u041e\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0438\u0445 \u043e\u0431\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/li>\n
  • FormControl<\/span>\u00a0\u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u041e\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a\u00a0<input><\/span>\u00a0\u0438\u043b\u0438\u00a0<select><\/span><\/li>\n
  • FormGroup<\/span>\u00a0\u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u044c \u0433\u0440\u0443\u043f\u043f\u044b \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432\u00a0AbstractControl<\/span>. \u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0433\u0440\u0443\u043f\u043f\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0444\u043e\u0440\u043c\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c\u00a0FormGroup<\/span><\/li>\n
  • FormArray<\/span>\u00a0\u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u00a0\u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432\u00a0AbstractControl<\/span><\/li>\n<\/ul>\n
    FormGroup<\/h2>\n
    \u041e\u0431\u044b\u0447\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e\u00a0FormControl<\/span>\u00a0\u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439\u00a0FormGroup<\/span>:<\/p>\n
    import { Component }              from '@angular\/core';\nimport { FormControl, FormGroup } from '@angular\/forms';\n\nexport class ReactiveFormComponent {\n  reactiveForm = new FormGroup ({\n    name: new FormControl()\n  });\n}<\/pre>\n
    \u0428\u0430\u0431\u043b\u043e\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n
    <form [formGroup]=\"reactiveForm\" novalidate>\n    <input formControlName=\"name\">\n<\/form><\/pre>\n
    \u041c\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439\u00a0<input><\/span>\u00a0\u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u00a0<form><\/span>. \u0410\u0442\u0440\u0438\u0431\u0443\u0442\u00a0novalidate<\/span>\u00a0\u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e HTML \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e.<\/p>\n
    \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430\u00a0formGroup<\/span>\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u00a0FormGroup<\/span>\u00a0\u0441 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c.<\/p>\n
    \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f: \u0435\u0441\u043b\u0438 \u0440\u0430\u043d\u044c\u0448\u0435, \u0447\u0442\u043e\u0431 \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439\u00a0<input><\/span> \u0441 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c\u00a0FormControl<\/span>, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u00a0[formControl]=»name»<\/span>, \u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u043e\u0440\u043c\u044b \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u00a0formControlName=»name»<\/span>. \u0422.\u0435. \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u00a0\u00a0[formControl]=»name»<\/span>, \u0430 \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0433\u0440\u0443\u043f\u043f\u044b (FormGroup<\/span>) —\u00a0\u00a0formControlName=»name»<\/span>.<\/p>\n
    FormBuilder<\/h2>\n
    \u041a\u043b\u0430\u0441\u0441\u00a0FormBuilder<\/span>\u00a0\u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0430\u0442\u043a\u0438\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u043e\u0440\u043c\u044b, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0441\u043d\u0438\u0437\u0438\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c.<\/p>\n
    import { Component }              from '@angular\/core';\nimport { FormBuilder, FormGroup } from '@angular\/forms';\n\nexport class ReactiveFormComponent {\n  reactiveForm: FormGroup;\n\n  constructor (private fb: FormBuilder) {\n    this.reactiveForm = this.fb.group({\n      name: ''\n    });\n  }\n}<\/pre>\n
    FormBuilder.group<\/span>\u00a0\u043c\u0435\u0442\u043e\u0434-\u0444\u0430\u0431\u0440\u0438\u043a\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0441\u043e\u0437\u0434\u0430\u0442\u044c\u00a0FormGroup<\/span>. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043b\u044e\u0447\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0438\u043c\u0435\u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432\u00a0FormControl<\/span>, \u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0445 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u043c.<\/p>\n
    \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u00a0name<\/span>\u00a0\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0435\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u0435\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u043e \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u044b \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432: \u043f\u0435\u0440\u0432\u044b\u0439 \u0435\u0433\u043e \u0447\u043b\u0435\u043d — \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0432\u0442\u043e\u0440\u043e\u0439 — \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440.<\/p>\n
    import { Component }              from '@angular\/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular\/forms';\n\nexport class ReactiveFormComponent {\n  reactiveForm: FormGroup;\n\n  constructor (private fb: FormBuilder) {\n    this.reactiveForm = this.fb.group({\n      name: ['', Validators.required ]\n    });\n  }\n}<\/pre>\n
    \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u00a0FormBuilder<\/span>\u00a0\u0437\u0430\u043c\u0435\u0442\u043d\u044b \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u043e\u0439 \u0444\u043e\u0440\u043c\u0435.<\/p>\n
    import { Component }                          from '@angular\/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular\/forms';\n\nexport class ReactiveFormComponent {\n  reactiveForm: FormGroup;\n  states = ['Russia', 'USA', 'Germany'];\n\n  constructor(private fb: FormBuilder) {\n    this.reactiveForm = this.fb.group({\n      name: ['', Validators.required ],\n      street: '',\n      city: '',\n      state: '',\n      zip: '',\n      sex: '',\n      hasChildren: ''\n    });\n  }\n}<\/pre>\n
    \u0428\u0430\u0431\u043b\u043e\u043d \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n
    <form [formGroup]=\"reactiveForm\" novalidate>\n  <input formControlName=\"name\">\n  <input formControlName=\"street\">\n  <input formControlName=\"city\">\n  <select formControlName=\"state\">\n    <option *ngFor=\"let state of states\" [value]=\"state\">{{state}}<\/option>\n  <\/select>\n  <input formControlName=\"zip\">\n  <input type=\"radio\" formControlName=\"sex\" value=\"male\">\n  <input type=\"radio\" formControlName=\"sex\" value=\"female\">\n  <input type=\"checkbox\" formControlName=\"hasChildren\">\n<\/form>\n<\/pre>\n
    \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0438\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 (text, select, radio, checkbox). \u0421\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0438\u0445 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0442\u0430\u043a \u0436\u0435 \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f.<\/p>\n
    \u041e\u0431\u044a\u0435\u043a\u0442\u044b\u00a0FormControl<\/span>\u00a0\u043c\u043e\u0436\u043d\u043e \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435\u00a0FormGroup<\/span>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u0433\u0440\u0443\u043f\u043f\u044b \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n
    import { Component }                          from '@angular\/core';\nimport { FormBuilder, FormGroup, Validators } from '@angular\/forms';\n\nexport class ReactiveFormComponent {\n  reactiveForm: FormGroup;\n  states = ['Russia', 'USA', 'Germany'];\n\n  constructor(private fb: FormBuilder) {\n    this.reactiveForm = this.fb.group({\n      name: ['', Validators.required ],\n      address: this.fb.group({\n        street: '',\n        city: '',\n        state: '',\n        zip: ''\n      }),\n      sex: '',\n      hasChildren: ''\n    });\n  }\n}<\/pre>\n
    \u0428\u0430\u0431\u043b\u043e\u043d \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438, \u043e\u0431\u0435\u0440\u043d\u0443\u0432 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, div):<\/p>\n
    <form [formGroup]=\"reactiveForm\" novalidate>\n  <input formControlName=\"name\">\n  <div formGroupName=\"address\">\n    <input formControlName=\"street\">\n    <input formControlName=\"city\">\n    <select formControlName=\"state\">\n      <option *ngFor=\"let state of states\" [value]=\"state\">{{state}}<\/option>\n    <\/select>\n    <input formControlName=\"zip\">\n  <\/div>\n  <input type=\"radio\" formControlName=\"sex\" value=\"male\">\n  <input type=\"radio\" formControlName=\"sex\" value=\"female\">\n  <input type=\"checkbox\" formControlName=\"hasChildren\">\n<\/form>\n<\/pre>\n
    \u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c\u0443\u00a0FormControl<\/span>\u00a0\u0432\u043d\u0443\u0442\u0440\u0438\u00a0FormGroup<\/span>\u00a0\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u00a0.get()<\/span>:<\/p>\n
    reactiveForm.get('name').value<\/pre>\n
    \u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u0438\u0445 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0442\u043e\u0447\u043a\u0443:<\/p>\n
    reactiveForm.get('address.street').value<\/pre>\n
    \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b\u00a0AbstractControl<\/h2>\n
    AbstractControl<\/span>\u00a0\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u0434\u043b\u044f\u00a0 FormControl<\/span>, FormGroup<\/span>\u00a0\u0438 FormArray<\/span>. \u041e\u043d \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b:<\/p>\n
      \n
    • value<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f)<\/li>\n
    • validator<\/span>\u00a0\u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/li>\n
    • asyncValidator<\/span>\u00a0\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440<\/li>\n
    • parent<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f)<\/li>\n
    • status<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0438\u0437 4 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f:\n
        \n
      • VALID: \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0448\u0435\u043b \u0432\u0441\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438<\/li>\n
      • INVALID: \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0435 \u043f\u0440\u043e\u0448\u0435\u043b \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u043d\u0443 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438<\/li>\n
      • PENDING: \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438
        \nDISABLED: \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d \u0438\u0437 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438
        \n\u0412\u0441\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u0432\u0437\u0430\u0438\u043c\u043d\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0435. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f<\/li>\n<\/ul>\n<\/li>\n
      • valid<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u00a0true<\/span>, \u0435\u0441\u043b\u0438\u00a0status === VALID<\/span>\u00a0(\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f)<\/li>\n
      • invalid<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u00a0true<\/span>, \u0435\u0441\u043b\u0438\u00a0status === INVALID<\/span>\u00a0(\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f)<\/li>\n
      • pending<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u00a0true<\/span>, \u0435\u0441\u043b\u0438\u00a0status === PENDING<\/span>\u00a0(\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f)<\/li>\n
      • disabled<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u00a0true<\/span>, \u0435\u0441\u043b\u0438\u00a0status === DISABLED<\/span>\u00a0(\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f)<\/li>\n
      • enabled<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u00a0true<\/span>, \u0435\u0441\u043b\u0438\u00a0status !== DISABLED<\/span>\u00a0(\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f)<\/li>\n
      • errors<\/span> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 (\u043e\u0431\u044a\u0435\u043a\u0442 ValidationErrors<\/span>), \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0435 \u043f\u0440\u043e\u0448\u0435\u043b \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438. \u0415\u0441\u043b\u0438 \u043e\u0448\u0438\u0431\u043e\u043a \u043d\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u00a0null<\/span>. \u0422\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f<\/li>\n
      • pristine<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u00a0true<\/span> \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0435\u0449\u0435 \u043d\u0435 \u043c\u0435\u043d\u044f\u043b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 (\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0434 \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u0442\u0443\u0441). \u0422\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f<\/li>\n
      • dirty<\/span>\u00a0\u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u00a0pristine<\/span><\/li>\n
      • touched<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u00a0true<\/span> \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u0440\u0430\u0437 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u043e \u0438 \u0442\u0435\u0440\u044f\u043b\u043e \u0444\u043e\u043a\u0443\u0441 (\u0442\u043e\u0447\u043d\u0435\u0435, \u0435\u0441\u043b\u0438 \u043d\u0430 \u043d\u0435\u043c \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u00a0blur<\/span>). \u0422\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f<\/li>\n
      • untouched<\/span>\u00a0\u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u043e\u00a0touched<\/span><\/li>\n
      • valueChanges<\/span>\u00a0(observable) \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u00a0\u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f (\u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438\u043b\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e), \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/li>\n
      • statusChanges<\/span>\u00a0(observable) \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u00a0\u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u0430\u0442\u0443\u0441 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0441\u0442\u0430\u0442\u0443\u0441<\/li>\n
      • updateOn<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043f\u043e\u0441\u043b\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c\u00a0‘change’<\/span>\u00a0(\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e),\u00a0‘blur’<\/span>\u00a0\u0438\u043b\u0438\u00a0‘submit’<\/span><\/li>\n
      • setValidators(newValidator)<\/span>\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u044f (\u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439)<\/li>\n
      • setAsyncValidators(newValidator)<\/span>\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u044b \u0434\u043b\u044f \u043f\u043e\u043b\u044f (\u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439)<\/li>\n
      • clearValidators()<\/span>\u00a0\u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u044b \u043f\u043e\u043b\u044f<\/li>\n
      • clearAsyncValidators()<\/span>\u00a0\u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0432\u0441\u0435 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u044b \u043f\u043e\u043b\u044f<\/li>\n
      • markAsTouched(opts)<\/span>\u00a0\u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0432\u0441\u0435 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b (\u043f\u0440\u0438 \u0438\u0445 \u043d\u0430\u043b\u0438\u0447\u0438\u0438) \u043a\u0430\u043a\u00a0touched<\/span>. \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u00a0opts<\/span> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0onlySelf<\/span>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0435\u0441\u043b\u0438 \u0440\u0430\u0432\u043d\u043e\u00a0true<\/span>, \u0442\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u0432\u043e\u0439 \u0441\u0442\u0430\u0442\u0443\u0441. \u041c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442.<\/li>\n
      • markAsUntouched(opts)<\/span>\u00a0\u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0432\u044b\u0448\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u043a\u00a0untouched<\/span><\/li>\n
      • markAsDirty(opts)<\/span>\u00a0\u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u043a\u00a0dirty<\/span><\/li>\n
      • markAsPristine(opts)<\/span>\u00a0\u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u043a\u00a0pristine<\/span><\/li>\n
      • markAsPending(opts)<\/span>\u00a0\u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u043a\u00a0pending<\/span><\/li>\n
      • disable(opts)<\/span>\u00a0\u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0435\u0433\u043e \u0441\u0442\u0430\u0442\u0443\u0441 \u0431\u0443\u0434\u0435\u0442\u00a0DISABLED<\/span>, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d \u0438\u0437 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438, \u0430 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u043e \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438<\/li>\n
      • enable(opts)<\/span>\u00a0\u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u00a0disable(opts)<\/span><\/li>\n
      • setParent(parent)<\/span>\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0443\u044e \u0433\u0440\u0443\u043f\u043f\u0443<\/li>\n
      • setValue(value)<\/span>\u00a0\u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/li>\n
      • patchValue(value)<\/span>\u00a0\u0432\u043d\u043e\u0441\u0438\u0442 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/li>\n
      • reset(value, options)<\/span>\u00a0\u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a. \u041e\u0431\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b<\/li>\n
      • updateValueAndValidity(opts)<\/span>\u00a0\u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0441\u0442\u0430\u0442\u0443\u0441 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u0438 \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u043a\u043e\u0432)<\/li>\n
      • setErrors(errors, opts)<\/span> \u043f\u0440\u0438 \u0440\u0443\u0447\u043d\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u0442\u0430\u043a\u0436\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0443\u0441 \u043f\u043e\u043b\u044f)<\/li>\n
      • get(path)<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432\u044b\u0448\u0435)<\/li>\n
      • getError(errorCode, path)<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435, \u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c\u00a0path<\/span> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0448\u0438\u0431\u043a\u0443 \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c\u00a0errorCode<\/span>. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u00a0null<\/span>\u00a0\u0438\u043b\u0438\u00a0undefined<\/span>. \u0415\u0441\u043b\u0438\u00a0path<\/span>\u00a0\u043d\u0435 \u0437\u0430\u0434\u0430\u043d, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/li>\n
      • hasError(errorCode, path)<\/span>\u00a0\u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0432\u044b\u0448\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u043c\u0435\u0442\u043e\u0434\u0443 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u00a0true<\/span>\u00a0\u0438\u043b\u0438\u00a0false<\/span><\/li>\n
      • root<\/span>\u00a0\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u0440\u0435\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f<\/li>\n<\/ul>\n
        \u041c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043c\u043e\u0434\u0435\u043b\u044c \u0444\u043e\u0440\u043c\u044b<\/h2>\n
        \u0421\u0432\u044f\u0437\u044c \u043c\u0435\u0436\u0434\u0443 \u043c\u043e\u0434\u0435\u043b\u044c\u044e \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043c\u043e\u0434\u0435\u043b\u044c\u044e \u0444\u043e\u0440\u043c\u044b \u0432 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u043c\u0443. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0444\u043e\u0440\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 Angular \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u043d\u043e\u0441\u0438\u043c\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u0443\u0434\u0443\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0434\u0435\u043b\u044c \u0444\u043e\u0440\u043c\u044b, \u043d\u043e \u043d\u0435 \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043c\u043e\u0434\u0435\u043b\u0438 \u0444\u043e\u0440\u043c\u044b \u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0433\u0443\u0442 \u0434\u0430\u0436\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c.<\/p>\n
        \u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0444\u043e\u0440\u043c\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e\u00a0setValue\u00a0\u0438 patchValue<\/h2>\n
        \u0417\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0438\u0445 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e \u0438 \u043f\u043e\u0437\u0436\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 setValue<\/span>\u00a0\u0438 patchValue<\/span>.<\/p>\n
        \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430\u00a0setValue<\/span>\u00a0\u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0432 \u043c\u0435\u0442\u043e\u0434 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u0438 \u0444\u043e\u0440\u043c\u044b \u0432\u043d\u0443\u0442\u0440\u0438\u00a0FormGroup<\/span>.<\/p>\n
        this.reactiveForm.setValue({\n  name:    'Vasya',\n  address: new Address()\n});<\/pre>\n
        \u041c\u0435\u0442\u043e\u0434\u00a0setValue<\/span>\u00a0\u0442\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b. \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043e\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u043e\u0439\u00a0FormGroup<\/span>\u00a0\u0438\u043b\u0438 \u0432 \u043d\u0435\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0433\u0440\u0443\u043f\u043f\u044b, \u0442\u043e \u043c\u0435\u0442\u043e\u0434\u00a0setValue<\/span>\u00a0\u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u0435\u0442\u043e\u0434 \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0438 (\u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442\u00a0patchValue<\/span>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f).<\/p>\n
        \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0430\u00a0setValue<\/span>\u00a0\u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043f\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u0430 \u043c\u043e\u0434\u0435\u043b\u0438 \u0444\u043e\u0440\u043c\u044b.<\/p>\n
        \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430\u00a0patchValue<\/span>\u00a0\u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u0435\u00a0FormGroup<\/span>, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0432 \u043c\u0435\u0442\u043e\u0434 \u043e\u0431\u044a\u0435\u043a\u0442, \u0447\u044c\u0438 \u043f\u0430\u0440\u044b \u043a\u043b\u044e\u0447\/\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c.<\/p>\n
        this.reactiveForm.patchValue({\n  name: 'Vasya'\n});<\/pre>\n
        \u041c\u0435\u0442\u043e\u0434\u00a0patchValue<\/span>\u00a0\u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u044b, \u043d\u043e \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043c\u0435\u0442\u043e\u0434\u0430\u00a0setValue<\/span>\u00a0\u043e\u043d \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0439.<\/p>\n
        \u0421\u0431\u0440\u043e\u0441 \u0444\u043e\u0440\u043c\u044b<\/h2>\n
        \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430\u00a0.reset()<\/span>\u00a0\u043c\u043e\u0436\u043d\u043e \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0444\u043e\u0440\u043c\u0443. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0447\u0438\u0449\u0430\u044e\u0442\u0441\u044f, \u0430 \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u043f\u043e\u043b\u0435\u0439 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u00a0pristine<\/span>.<\/p>\n
        this.reactiveForm.reset();<\/pre>\n
        \u0412 \u043c\u0435\u0442\u043e\u0434\u00a0.reset()<\/span>\u00a0\u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0434\u0432\u0430 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430, \u0437\u0430\u0434\u0430\u0432 \u0441 \u0438\u0445 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u044b.<\/p>\n
        FormArray<\/h2>\n
        \u0418\u043d\u043e\u0433\u0434\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0432 \u0444\u043e\u0440\u043c\u0435 \u043d\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u043f\u043e\u043b\u0435\u0439 \u0438\u043b\u0438 \u0438\u0445 \u0433\u0440\u0443\u043f\u043f. \u0422\u0430\u043a, \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0443\u043b\u044c, \u043e\u0434\u0438\u043d \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0431\u043e\u0440\u043e\u0432 \u043f\u043e\u043b\u0435\u0439, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u0430\u0434\u0440\u0435\u0441. \u041a\u043b\u0430\u0441\u0441\u00a0FormArray<\/span>\u00a0\u043a\u0430\u043a \u0440\u0430\u0437 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0432 \u0444\u043e\u0440\u043c\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u043e\u043b\u0435\u0439 \u0438\u043b\u0438 \u0438\u0445 \u0433\u0440\u0443\u043f\u043f.<\/p>\n
        import { Component, Input, OnChanges }                   from '@angular\/core';\nimport { FormArray, FormBuilder, FormGroup, Validators } from '@angular\/forms';\n\nimport { Address, Hero, states } from '..\/data-model';\n\nexport class ReactiveFormComponent {\n  reactiveForm: FormGroup;\n\n  constructor(private fb: FormBuilder) {\n    this.reactiveForm = this.fb.group({\n      name: ['', Validators.required ],\n      addresses: this.fb.array([]),\n      sex: '',\n      hasChildren: ''\n    });\n  }\n}<\/pre>\n
        \u0428\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u0435\u0442\u0435\u0440\u043f\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f:<\/p>\n
        <form [formGroup]=\"reactiveForm\" novalidate>\n  <input formControlName=\"name\">\n  <div formArrayName=\"address\">\n    <div *ngFor=\"let address of addresses.controls; let i=index\" [formGroupName]=\"i\" >\n    <input formControlName=\"street\">\n    <input formControlName=\"city\">\n    <select formControlName=\"state\">\n      <option *ngFor=\"let state of states\" [value]=\"state\">{{state}}<\/option>\n    <\/select>\n    <input formControlName=\"zip\">\n    <\/div>\n  <\/div>\n  <input type=\"radio\" formControlName=\"sex\" value=\"male\">\n  <input type=\"radio\" formControlName=\"sex\" value=\"female\">\n  <input type=\"checkbox\" formControlName=\"hasChildren\">\n<\/form>\n<\/pre>\n
        \u0417\u0434\u0435\u0441\u044c \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439\u00a0<div><\/span> \u0447\u0430\u0441\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u0430, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0443\u044e \u0430\u0434\u0440\u0435\u0441, \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a \u044d\u0442\u043e\u043c\u0443\u00a0<div><\/span>\u00a0\u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443\u00a0*ngFor<\/span>.<\/p>\n
        \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c\u00a0<div><\/span>\u00a0\u0441 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u043e\u0439\u00a0*ngFor<\/span>\u00a0\u0432 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0432\u043d\u0435\u0448\u043d\u0438\u0439<div><\/span> \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0435\u043c\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443\u00a0formArrayName<\/span>\u00a0\u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u00a0«addresses»<\/span>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u00a0FormArray<\/span>\u00a0addresses \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0435\u0439\u0441\u044f \u0447\u0430\u0441\u0442\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430.<\/p>\n
        \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0430\u0434\u0440\u0435\u0441\u043e\u0432 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0435\u00a0*ngFor<\/span>\u00a0\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0addresses.controls<\/span>, \u0430 \u043d\u0435 \u0441\u0430\u043c\u00a0addresses<\/span>. \u0418\u043c\u0435\u043d\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u00a0controls<\/span>\u00a0\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430 \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u043e\u043b\u0435\u0439.<\/p>\n
        \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u043c\u044b\u0439\u00a0FormGroup<\/span>\u00a0\u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b\u00a0formGroupName<\/span>\u00a0, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0438\u043d\u0434\u0435\u043a\u0441 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435.<\/p>\n
        \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u00a0FormArray<\/span>\u00a0\u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u043e\u0432\u00a0.push(control)<\/span>\u00a0(\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043a\u043e\u043d\u0435\u0446 \u043c\u0430\u0441\u0441\u0438\u0432\u0430) \u0438\u00a0.insert(index, control)<\/span>\u00a0(\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043f\u043e\u0437\u0438\u0446\u0438\u044e, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0438\u043d\u0434\u0435\u043a\u0441\u0443). \u041c\u0435\u0442\u043e\u0434 .removeAt(index)<\/span>\u00a0\u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u043c.<\/p>\n
        \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439<\/h2>\n
        \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u0444\u043e\u0440\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u00a0valueChanges<\/span>. \u041e\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 RxJS\u00a0Observable<\/span>.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Angular 2 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0434\u0432\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c: \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 (template-driven forms) \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (reactive forms). \u041e\u0431\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0432\u0445\u043e\u0434\u044f\u0442 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443\u00a0@angular\/forms\u00a0\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u043d\u0430\u0431\u043e\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u0440\u0430\u0437\u043d\u044b\u043c \u043c\u043e\u0434\u0443\u043b\u044f\u043c:\u00a0FormsModule\u00a0\u0438\u00a0ReactiveFormsModule\u00a0\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[18,19],"yoast_head":"\n\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (Reactive Forms) \u0432 Angular 2+ | devKazakov.com<\/title>\n<meta name=\"description\" content=\"Angular \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u0432\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c: \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 (template-driven forms) \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (reactive forms).\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/\" \/>\n<meta property=\"og:locale\" content=\"ru_RU\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (Reactive Forms) \u0432 Angular 2+ | devKazakov.com\" \/>\n<meta property=\"og:description\" content=\"Angular \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u0432\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c: \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 (template-driven forms) \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (reactive forms).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/\" \/>\n<meta property=\"og:site_name\" content=\"devKazakov.com\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-05T17:39:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-18T22:30:36+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0430\u0432\u0442\u043e\u0440\u043e\u043c\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roman Kazakov\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 \u043c\u0438\u043d\u0443\u0442\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devkazakov.com\/ru\/#website\",\"url\":\"https:\/\/devkazakov.com\/ru\/\",\"name\":\"devKazakov.com\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/devkazakov.com\/ru\/#\/schema\/person\/b3f48bf8438d7d5354ee81e92dc477c3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devkazakov.com\/ru\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ru-RU\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/#webpage\",\"url\":\"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/\",\"name\":\"\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (Reactive Forms) \u0432 Angular 2+ | devKazakov.com\",\"isPartOf\":{\"@id\":\"https:\/\/devkazakov.com\/ru\/#website\"},\"datePublished\":\"2018-01-05T17:39:20+00:00\",\"dateModified\":\"2022-11-18T22:30:36+00:00\",\"description\":\"Angular \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u0432\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c: \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 (template-driven forms) \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (reactive forms).\",\"breadcrumb\":{\"@id\":\"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/#breadcrumb\"},\"inLanguage\":\"ru-RU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devkazakov.com\/ru\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (Reactive Forms) \u0432 Angular 2+\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/#webpage\"},\"author\":{\"@id\":\"https:\/\/devkazakov.com\/ru\/#\/schema\/person\/b3f48bf8438d7d5354ee81e92dc477c3\"},\"headline\":\"\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (Reactive Forms) \u0432 Angular 2+\",\"datePublished\":\"2018-01-05T17:39:20+00:00\",\"dateModified\":\"2022-11-18T22:30:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/#webpage\"},\"wordCount\":297,\"publisher\":{\"@id\":\"https:\/\/devkazakov.com\/ru\/#\/schema\/person\/b3f48bf8438d7d5354ee81e92dc477c3\"},\"keywords\":[\"Angular\",\"Angular 2\"],\"inLanguage\":\"ru-RU\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/devkazakov.com\/ru\/#\/schema\/person\/b3f48bf8438d7d5354ee81e92dc477c3\",\"name\":\"Roman Kazakov\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/devkazakov.com\/ru\/#personlogo\",\"inLanguage\":\"ru-RU\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d99e1eb55cb87629fd1b4c80a24ea831?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d99e1eb55cb87629fd1b4c80a24ea831?s=96&d=mm&r=g\",\"caption\":\"Roman Kazakov\"},\"logo\":{\"@id\":\"https:\/\/devkazakov.com\/ru\/#personlogo\"},\"sameAs\":[\"https:\/\/devkazakov.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (Reactive Forms) \u0432 Angular 2+ | devKazakov.com","description":"Angular \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u0432\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c: \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 (template-driven forms) \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (reactive forms).","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/","og_locale":"ru_RU","og_type":"article","og_title":"\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (Reactive Forms) \u0432 Angular 2+ | devKazakov.com","og_description":"Angular \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u0432\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c: \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 (template-driven forms) \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (reactive forms).","og_url":"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/","og_site_name":"devKazakov.com","article_published_time":"2018-01-05T17:39:20+00:00","article_modified_time":"2022-11-18T22:30:36+00:00","twitter_card":"summary_large_image","twitter_misc":{"\u041d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0430\u0432\u0442\u043e\u0440\u043e\u043c":"Roman Kazakov","\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f":"12 \u043c\u0438\u043d\u0443\u0442"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/devkazakov.com\/ru\/#website","url":"https:\/\/devkazakov.com\/ru\/","name":"devKazakov.com","description":"","publisher":{"@id":"https:\/\/devkazakov.com\/ru\/#\/schema\/person\/b3f48bf8438d7d5354ee81e92dc477c3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devkazakov.com\/ru\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"ru-RU"},{"@type":"WebPage","@id":"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/#webpage","url":"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/","name":"\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (Reactive Forms) \u0432 Angular 2+ | devKazakov.com","isPartOf":{"@id":"https:\/\/devkazakov.com\/ru\/#website"},"datePublished":"2018-01-05T17:39:20+00:00","dateModified":"2022-11-18T22:30:36+00:00","description":"Angular \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u0432\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c: \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 (template-driven forms) \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (reactive forms).","breadcrumb":{"@id":"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/#breadcrumb"},"inLanguage":"ru-RU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devkazakov.com\/ru\/"},{"@type":"ListItem","position":2,"name":"\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (Reactive Forms) \u0432 Angular 2+"}]},{"@type":"Article","@id":"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/#article","isPartOf":{"@id":"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/#webpage"},"author":{"@id":"https:\/\/devkazakov.com\/ru\/#\/schema\/person\/b3f48bf8438d7d5354ee81e92dc477c3"},"headline":"\u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b (Reactive Forms) \u0432 Angular 2+","datePublished":"2018-01-05T17:39:20+00:00","dateModified":"2022-11-18T22:30:36+00:00","mainEntityOfPage":{"@id":"https:\/\/devkazakov.com\/ru\/blog\/reactive-forms-angular-2\/#webpage"},"wordCount":297,"publisher":{"@id":"https:\/\/devkazakov.com\/ru\/#\/schema\/person\/b3f48bf8438d7d5354ee81e92dc477c3"},"keywords":["Angular","Angular 2"],"inLanguage":"ru-RU"},{"@type":["Person","Organization"],"@id":"https:\/\/devkazakov.com\/ru\/#\/schema\/person\/b3f48bf8438d7d5354ee81e92dc477c3","name":"Roman Kazakov","image":{"@type":"ImageObject","@id":"https:\/\/devkazakov.com\/ru\/#personlogo","inLanguage":"ru-RU","url":"https:\/\/secure.gravatar.com\/avatar\/d99e1eb55cb87629fd1b4c80a24ea831?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d99e1eb55cb87629fd1b4c80a24ea831?s=96&d=mm&r=g","caption":"Roman Kazakov"},"logo":{"@id":"https:\/\/devkazakov.com\/ru\/#personlogo"},"sameAs":["https:\/\/devkazakov.com"]}]}},"_links":{"self":[{"href":"https:\/\/devkazakov.com\/ru\/wp-json\/wp\/v2\/posts\/1595"}],"collection":[{"href":"https:\/\/devkazakov.com\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devkazakov.com\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devkazakov.com\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devkazakov.com\/ru\/wp-json\/wp\/v2\/comments?post=1595"}],"version-history":[{"count":4,"href":"https:\/\/devkazakov.com\/ru\/wp-json\/wp\/v2\/posts\/1595\/revisions"}],"predecessor-version":[{"id":2173,"href":"https:\/\/devkazakov.com\/ru\/wp-json\/wp\/v2\/posts\/1595\/revisions\/2173"}],"wp:attachment":[{"href":"https:\/\/devkazakov.com\/ru\/wp-json\/wp\/v2\/media?parent=1595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devkazakov.com\/ru\/wp-json\/wp\/v2\/categories?post=1595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devkazakov.com\/ru\/wp-json\/wp\/v2\/tags?post=1595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}