{"id":389413,"date":"2024-06-29T08:35:08","date_gmt":"2024-06-29T08:35:08","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=389413"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=389413","title":{"rendered":"<span>\u0414\u0435\u043b\u0430\u0439 \u0442\u0430\u043a, \u0438 \u0442\u0432\u043e\u0439 \u0430\u0434\u0430\u043f\u0442\u0438\u0432 \u0431\u043e\u043b\u0435\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0430\u0434\u0430\u043f\u0442\u0438\u0432 &#8212; \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0432\u0430\u0436\u043d\u0443\u044e \u0442\u0435\u043c\u0443 \u0432 \u043c\u0438\u0440\u0435 Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412\u0435\u0434\u044c \u043a\u0430\u043a \u0431\u044b \u043d\u0438 \u0431\u044b\u043b\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0443\u0434\u0435\u0441\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c, \u0438 \u043a\u0430\u043a\u043e\u0439 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0439 \u0438 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043c\u0438\u0440 \u043d\u0435 \u0442\u0430\u0438\u043b\u043e \u0431\u044b \u043e\u043d\u043e \u0432 \u0441\u0435\u0431\u0435, \u0430 \u043f\u0435\u0440\u0432\u043e\u0435, \u0441 \u0447\u0435\u043c \u0441\u0442\u043e\u043b\u043a\u043d\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u044d\u0442\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/2c1\/15b\/51d\/2c115b51d98c5c6cdd09ef1edec59eca.jpg\" width=\"3072\" height=\"1733\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2c1\/15b\/51d\/2c115b51d98c5c6cdd09ef1edec59eca.jpg\" data-blurred=\"true\"\/><\/figure>\n<h3>\u041e \u0447\u0435\u043c \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c<\/h3>\n<p>\u0414\u0430\u0436\u0435 \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435, \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0432\u0438\u0434\u0438\u0442 \u043e\u0431\u043b\u043e\u0436\u043a\u0443, \u0434\u0438\u0437\u0430\u0439\u043d \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e\u0431 \u044d\u043a\u0440\u0430\u043d\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 \u0438\u043b\u0438 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0430, \u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0441\u043b\u043e\u0436\u043d\u043e: \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439, \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u0438 \u0443\u0434\u043e\u0431\u043d\u043e. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u0443\u043c\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u0445, \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e\u0449\u0438\u0445 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u0438\u0445 \u043f\u0440\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f\u0445 \u2014 \u0437\u043d\u0430\u0447\u0438\u0442 \u043b\u0438\u0448\u0430\u0442\u044c \u0441\u0435\u0431\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438.<\/p>\n<p>\u041d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0442\u0440\u0430\u0444\u0438\u043a\u0430 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u0438 \u043a\u0442\u043e-\u0442\u043e \u0440\u0435\u0448\u0438\u043b \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0430 \u043a\u0442\u043e-\u0442\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b \u043f\u043e\u0434 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u044b \u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437.<\/p>\n<p>\u0422\u0435\u043a\u0441\u0442 \u0441\u0442\u0430\u0442\u044c\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u0434\u043e\u0432\u0430\u044f \u0431\u0430\u0437\u0430, \u0431\u0443\u0434\u0443\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 Angular, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u043c \u0432 \u043f\u0430\u0440\u0435 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 PrimeNg, \u043a\u043e\u0442\u043e\u0440\u0430\u044f, \u043f\u043e \u043c\u043e\u0435\u043c\u0443 \u043c\u043d\u0435\u043d\u0438\u044e, \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u0430\u043c\u044b\u043c\u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0438 \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a Angular. <\/p>\n<h3>\u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043d\u0430\u0441\u0443\u0449\u043d\u043e\u043c<\/h3>\n<p>\u041e\u0437\u0432\u0443\u0447\u0435\u043d\u043d\u0430\u044f \u0440\u0430\u043d\u0435\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0435 \u043d\u043e\u0432\u0430, \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0441\u043c\u0435\u043b\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0441 \u043d\u0435\u0440\u0435\u0448\u0430\u0435\u043c\u043e\u0439 \u0434\u0438\u043b\u0435\u043c\u043c\u043e\u0439, \u043f\u043e\u0447\u0435\u043c\u0443? \u0421\u0435\u0439\u0447\u0430\u0441 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443.<\/p>\n<h4>\u0421 \u0447\u0435\u0433\u043e \u0432\u0441\u0451 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f <\/h4>\n<p>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0438\u0437\u043e\u0431\u0438\u043b\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u0440\u0430\u0437\u0432\u044f\u0437\u0430\u043b\u0438 \u0440\u0443\u043a\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u044e\u0442\u0441\u044f \u043e\u0442 \u0434\u0443\u0448\u0438 \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0418\u0445 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0432\u0438\u043d\u0438\u0442\u044c, \u0432\u0435\u0434\u044c \u0432\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0442\u0440\u0443\u0434\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0439 \u0446\u0435\u043b\u0438.<\/p>\n<p>\u0418, \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435, \u0435\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430.<\/p>\n<p>\u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0430\u0447\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u043a\u0435 \u0438 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0435, \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0432 \u0440\u0430\u0437\u043d\u0438\u0446\u044b, \u0442\u043e \u0442\u0443\u0442 \u0443\u0436\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441\u044b. \u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432 \u0441\u0430\u043c\u0430 \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u0430 \u043f\u043e\u043b\u043e\u043c\u0430\u0442\u044c \u0433\u043e\u043b\u043e\u0432\u0443 \u043d\u0430\u0434 \u0442\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u044d\u0442\u043e \u0441\u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u0430\u0442\u044c. \u0412\u0435\u0434\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u0430 \u043a\u043e\u043c\u043d\u0430\u0442\u0435, \u0433\u0434\u0435 \u0441\u0442\u0435\u043d\u044b \u0441\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f, \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0432\u0441\u0451 \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430. \u0418 \u0447\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430, \u0442\u0435\u043c \u0442\u044f\u0436\u0435\u043b\u0435\u0435 \u0442\u0430\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u0443\u0436\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0442\u043f\u0430\u0434\u0430\u0435\u0442 \u0438\u0437 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. <\/p>\n<p>\u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0438\u043b\u0435\u043c\u043c\u0443 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u0440\u0438 \u0442\u0430\u043a\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e, \u0438 \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u043d\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043b\u043e\u0441\u044c \u0432 \u043a\u0430\u0448\u0443.<\/p>\n<p>\u041d\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0432\u0435\u0434\u044c \u043f\u043e\u0442\u043e\u043c \u0432\u0441\u0451 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043a frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c.<\/p>\n<h4>\u0412\u0441\u0435 \u0445\u043e\u0442\u044f\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c\u0438<\/h4>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u043d\u0435 \u0443\u0441\u0442\u0443\u043f\u0430\u044e\u0449\u0443\u044e, \u0430 \u0438\u043d\u043e\u0433\u0434\u0430 \u0438 \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u044f\u0449\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u0442\u0430\u043b\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432 \u043f\u0440\u044f\u043c\u043e\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430, \u0430 \u043d\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u043b\u0438 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0442\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u043b\u043e \u043d\u0430 \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0435\u0451 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n<p>\u042d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0435\u0440\u0435\u0448\u043b\u0430 \u0432 \u0440\u0443\u043a\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u041e\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u044b \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u043c: \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u0442\u0440\u0443\u0434\u0430, \u043f\u0443\u0441\u043a\u0430\u0439 \u0432\u0441\u0451 \u0441\u0434\u0435\u043b\u0430\u044e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0420\u0435\u0448\u0438\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u044d\u0442\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<h3>\u041a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u043d\u043e \u043c\u043d\u043e\u0433\u0438\u0435 \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u044e\u0442<\/h3>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0433\u0434\u0430 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0439\u0442\u0438 \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u0440\u0430\u0437\u0443 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b PrimeNg, \u043e\u0434\u043d\u0430\u043a\u043e \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442, \u0432\u0435\u0434\u044c \u0432\u0441\u044f \u0441\u0443\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0432 \u0434\u0440\u0443\u0433\u043e\u043c.<\/p>\n<pre><code class=\"xml\">&lt;p-panel>    &lt;ng-template pTemplate=\"header\">     &lt;div class=\"text24 mb24 text-medium color-grey-13\">\u041b\u0438\u0447\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f&lt;\/div>   &lt;\/ng-template>     &lt;ng-template pTemplate=\"content\">     &lt;form [formGroup]=\"personalData\" class=\"\">        &lt;div class=\"p-fluid p-grid\">         &lt;div class=\"p-field p-col\">           &lt;label>\u0424\u0430\u043c\u0438\u043b\u0438\u044f&lt;\/label>           &lt;div>             &lt;input type=\"text\" pInputText formControlName=\"secondName\">             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'secondName'}\">&lt;\/ng-container> &lt;!--            &lt;ng-container *ngIf=\"getFormField('firstName').touched || getFormField('firstName').dirty\">--> &lt;!--              &lt;div class=\"text14 color-danger width-100\" *ngIf=\"getFormField('firstName').errors?.required\">--> &lt;!--                \u041f\u043e\u043b\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e--> &lt;!--              &lt;\/div>--> &lt;!--            &lt;\/ng-container>-->           &lt;\/div>         &lt;\/div>         &lt;div class=\"p-field p-col-fixed-500\">           &lt;label>\u0418\u043c\u044f&lt;\/label>           &lt;div>             &lt;input type=\"text\" pInputText formControlName=\"firstName\">             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'firstName'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>         &lt;div class=\"p-field p-col-fixed-500\">           &lt;label>\u041e\u0442\u0447\u0435\u0441\u0442\u0432\u043e&lt;\/label>           &lt;div>             &lt;input type=\"text\" pInputText formControlName=\"patronymic\">             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'patronymic'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-formgroup-inline\">         &lt;div class=\"p-field-radiobutton\">           &lt;p-radioButton formControlName=\"isFullNameChanged\" label=\"\u041d\u0435 \u043c\u0435\u043d\u044f\u043b(\u0430)\" [value]=\"false\">&lt;\/p-radioButton>         &lt;\/div>         &lt;div class=\"p-field-radiobutton\">           &lt;p-radioButton formControlName=\"isFullNameChanged\" label=\"\u041c\u0435\u043d\u044f\u043b(\u0430)\" [value]=\"true\">&lt;\/p-radioButton>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-field width-100\" *ngIf=\"(isChangedFio$ |async) || changeValue\">          &lt;p-panel class=\"editable-panel\" [styleClass]=\"'bordered-panel'\">           &lt;ng-template pTemplate=\"header\">             &lt;div class=\"editable-panel__header text16\">               \u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0444\u0430\u043c\u0438\u043b\u0438\u044e, \u0438\u043c\u044f \u0438 \u043e\u0442\u0447\u0435\u0441\u0442\u0432\u043e, \u043a\u043e\u0433\u0434\u0430 \u0438 \u043f\u043e \u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438             &lt;\/div>           &lt;\/ng-template>              &lt;div formArrayName=\"previousFullNames\">               &lt;div *ngFor=\"let fio of previousFullNames.controls; let i = index\" class=\"editable-row\">                 &lt;div [formGroupName]=\"i\" class=\"flex ai-center\">                   &lt;div class=\"width-100\" style=\"flex: 20\">                     &lt;div class=\"flex width-100 ai-start jc-between\">                       &lt;div class=\"p-field\" style=\"padding: 0.5em; flex: 1\">                         &lt;label>\u0424\u0430\u043c\u0438\u043b\u0438\u044f&lt;\/label>                         &lt;div>                           &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"lastName\"\/>                           &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'lastName', formArrayItem: fio}\">&lt;\/ng-container>                         &lt;\/div>                       &lt;\/div>                       &lt;div class=\"p-field\" style=\"padding: 0.5em; flex: 1\">                         &lt;label>\u0418\u043c\u044f&lt;\/label>                         &lt;div>                           &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"firstName\" \/>                           &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'firstName', formArrayItem: fio}\">&lt;\/ng-container>                         &lt;\/div>                        &lt;\/div>                       &lt;div class=\"p-field\" style=\"padding: 0.5em; flex: 1\">                         &lt;label>\u041e\u0442\u0447\u0435\u0441\u0442\u0432\u043e&lt;\/label>                         &lt;div>                           &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"patronymic\" \/>                           &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'patronymic', formArrayItem: fio}\">&lt;\/ng-container>                         &lt;\/div>                       &lt;\/div>                     &lt;\/div>                     &lt;div>                       &lt;div class=\"p-field width-100\" style=\"padding: 0.5em;\">                         &lt;label>\u0413\u0434\u0435 \u0438 \u043f\u043e \u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438&lt;\/label>                         &lt;div>                           &lt;textarea class=\"width-100 pt8 pb8 pl16 pr16\"                                     style=\"line-height: 20px\"                                     type=\"text\"                                     formControlName=\"description\"                                     pInputTextarea                                     [autoResize]=\"true\"                                     [rows]=\"5\"                           >&lt;\/textarea>                           &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'description', formArrayItem: fio}\">&lt;\/ng-container>                         &lt;\/div>                       &lt;\/div>                     &lt;\/div>                   &lt;\/div>                    &lt;button pButton                           style=\"flex: 1\"                           type=\"button\"                           class=\"text18 mt24 color-black\"                           icon=\"mi mi-trash\"                           (click)=\"deleteChangedFio(i)\"                           [disabled]=\"previousFullNames.controls.length === 1\"                   >&lt;\/button>                 &lt;\/div>               &lt;\/div>             &lt;\/div>            &lt;ng-template pTemplate=\"footer\">             &lt;div class=\"inline\">               &lt;button pButton                       type=\"button\"                       label=\"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c\"                       class=\"btn-link-secondary\"                       icon=\"mi mi-plus\"                       (click)=\"addChangedFio()\"               >&lt;\/button>             &lt;\/div>           &lt;\/ng-template>          &lt;\/p-panel>        &lt;\/div>        &lt;div class=\"p-fluid p-grid\">         &lt;div class=\"p-field p-col-fixed-400\">           &lt;label>\u0427\u0438\u0441\u043b\u043e, \u043c\u0435\u0441\u044f\u0446 \u0438 \u0433\u043e\u0434 \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f&lt;\/label>           &lt;div>             &lt;p-calendar [firstDayOfWeek]=\"1\"                         [monthNavigator]=\"true\"                         [showIcon]=\"true\"                         [yearNavigator]=\"true\"                         yearRange=\"1961:2030\"                         dateFormat=\"dd.mm.yy\"                         appendTo=\"body\"                         formControlName=\"dateOfBirth\"             >&lt;\/p-calendar>             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'dateOfBirth'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-fluid p-grid\">         &lt;div class=\"p-field p-col\">           &lt;label>\u041c\u0435\u0441\u0442\u043e \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f (\u0441\u0435\u043b\u043e, \u0434\u0435\u0440\u0435\u0432\u043d\u044f, \u0433\u043e\u0440\u043e\u0434, \u0440\u0430\u0439\u043e\u043d, \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u043a\u0440\u0430\u0439, \u0440\u0435\u0441\u043f\u0443\u0431\u043b\u0438\u043a\u0430)&lt;\/label>           &lt;div>             &lt;input type=\"text\" pInputText formControlName=\"placeOfBirth\">             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'placeOfBirth'}\">&lt;\/ng-container>           &lt;\/div>           &lt;div class=\"text-muted-light text14\">\u0417\u0434\u0435\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0412\u0430\u0448\u0435\u0433\u043e \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043f\u043e \u043f\u0430\u0441\u043f\u043e\u0440\u0442\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u00ab\u0433. \u0416\u0435\u043b\u0435\u0437\u043d\u043e\u0433\u043e\u0440\u0441\u043a, \u041a\u0443\u0440\u0441\u043a\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u00bb&lt;\/div>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-fluid p-grid\">         &lt;div class=\"p-field p-col\">           &lt;label>\u041f\u0430\u0441\u043f\u043e\u0440\u0442 (\u0441\u0435\u0440\u0438\u044f, \u043d\u043e\u043c\u0435\u0440, \u043a\u0435\u043c \u0432\u044b\u0434\u0430\u043d, \u043a\u043e\u0434 \u043f\u043e\u0434\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f, \u0434\u0430\u0442\u0430 \u0432\u044b\u0434\u0430\u0447\u0438)&lt;\/label>           &lt;div>             &lt;textarea type=\"text\" pInputTextarea formControlName=\"passport\">&lt;\/textarea>             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'passport'}\">&lt;\/ng-container>           &lt;\/div>           &lt;div class=\"text-muted-light text14\">\u0414\u0430\u043d\u043d\u044b\u0435 \u043f\u0430\u0441\u043f\u043e\u0440\u0442\u0430 \u0432\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u0432 \u0432\u043e\u043f\u0440\u043e\u0441\u0435:             \u00ab\u0441\u0435\u0440\u0438\u044f 45 07 \u2116 259647, \u0432\u044b\u0434\u0430\u043d \u041e\u0412\u0414 \u0433. \u0416\u0435\u043b\u0435\u0437\u043d\u043e\u0433\u043e\u0440\u0441\u043a\u0430, \u043a\u043e\u0434 \u043f\u043e\u0434\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f 770-663, \u0434\u0430\u0442\u0430 \u0432\u044b\u0434\u0430\u0447\u0438 20.11.1999\u00bb           &lt;\/div>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-fluid p-grid\">         &lt;div class=\"p-field p-col-6\">           &lt;label>\u0418\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u043e\u043c\u0435\u0440 \u043d\u0430\u043b\u043e\u0433\u043e\u043f\u043b\u0430\u0442\u0435\u043b\u044c\u0449\u0438\u043a\u0430 (\u0418\u041d\u041d)&lt;\/label>           &lt;div>             &lt;p-inputMask type=\"text\" formControlName=\"inn\" mask=\"9999999999\">&lt;\/p-inputMask>             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'inn'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>         &lt;div class=\"p-field p-col-6\">&lt;\/div>       &lt;\/div>        &lt;div class=\"p-fluid p-grid\">         &lt;div class=\"p-field p-col-6\">           &lt;label>\u041d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438&lt;\/label>           &lt;div>             &lt;p-inputMask type=\"text\" formControlName=\"phone\" mask=\"+7(999) 999-99 99\">&lt;\/p-inputMask>             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'phone'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>         &lt;div class=\"p-field p-col-6\">           &lt;label>\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u0447\u0442\u0430 &lt;\/label>           &lt;div>             &lt;input type=\"text\" pInputText formControlName=\"email\">             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'email'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-fluid p-grid\">         &lt;div class=\"p-field p-col\">           &lt;label>\u0414\u0430\u043d\u043d\u044b\u0435 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u043e\u0432 \u0432 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u044f\u0445&lt;\/label>           &lt;div>             &lt;textarea type=\"text\" pInputTextarea formControlName=\"socialMedia\">&lt;\/textarea>           &lt;\/div>         &lt;\/div>       &lt;\/div>      &lt;\/form>   &lt;\/ng-template>  &lt;\/p-panel>          <\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443, \u0442\u043e \u0432 \u0433\u043b\u0430\u0437\u0430 \u0431\u0440\u043e\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043e\u0431\u0449\u0435\u0433\u043e \u0441\u0442\u0438\u043b\u044f. \u0413\u0434\u0435-\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438\u0437 PrimeNg, \u0433\u0434\u0435-\u0442\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043d\u0435\u0441\u043e\u0441\u0442\u044b\u043a\u043e\u0432\u043a\u0438 \u0443\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0433\u0434\u0435-\u0442\u043e \u0444\u043b\u0435\u043a\u0441\u044b, \u0433\u0434\u0435-\u0442\u043e \u0433\u0440\u0438\u0434\u044b. \u0422\u0430\u043a\u043e\u0435 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043a\u043e\u0433\u0434\u0430 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043a\u043e\u0440\u0435\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430\u0434 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043b\u043e\u0433\u0438\u043a\u0438 \u0438\u043b\u0438 \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0435 \u0441\u043e\u043e\u0431\u0449\u0430, \u043d\u0435 \u0432\u044b\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044f \u043e\u0431\u0449\u0435\u0433\u043e \u0441\u0442\u0438\u043b\u044f, \u0435\u0441\u043b\u0438 \u043e\u043d \u0432\u043e\u043e\u0431\u0449\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442. \u041d\u043e \u0434\u0430\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0435\u0442\u0443 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0438 \u0437\u0430\u0434\u0430\u0447\u0438. \u0410 \u0435\u0441\u043b\u0438, \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043f\u0440\u0438\u0434\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0438\u043b\u0438 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u0442 \u0432 \u043d\u043e\u0432\u044b\u0435 \u0440\u0443\u043a\u0438, \u0432 \u043a\u0430\u043a\u0443\u044e \u0441\u0432\u0430\u043b\u043a\u0443 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u044d\u0442\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0430? <\/p>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u043c\u043d\u043e\u0433\u0438\u0435 \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u044e\u0442?<\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439, \u0442\u043e \u043b\u0435\u043d\u044c \u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c \u043f\u043e\u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u043d\u0435 \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u044f, \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u044e\u0442 \u0441\u0435\u0431\u044f \u043f\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0443.<\/p>\n<p>\u041e\u043d\u043e \u0432\u0435\u0434\u044c \u043d\u0438 \u043d\u0430 \u0447\u0442\u043e \u043d\u0435 \u043f\u043e\u0432\u043b\u0438\u044f\u0435\u0442: \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u0442\u0430\u043f\u0430\u0445 \u043b\u0435\u0433\u043a\u043e, \u043f\u0430\u043c\u044f\u0442\u044c \u0441\u0432\u0435\u0436\u0430, \u0434\u0430 \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u0441 \u044d\u0442\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u043e\u0439 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. \u0411\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u043a\u0438\u0434\u0430\u043b\u0438, \u0438 \u0433\u043e\u0442\u043e\u0432\u043e.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 \u044d\u0442\u043e:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a13\/18d\/544\/a1318d5442ef8877255e5b84e95e023e.png\" width=\"1649\" height=\"1743\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a13\/18d\/544\/a1318d5442ef8877255e5b84e95e023e.png\"\/><\/figure>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0432\u0441\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0434\u0430\u0436\u0435 \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u043e, \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432 \u043d\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u0442\u0441\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2f7\/0f7\/f99\/2f70f7f993fb745e3c8a0f0bee3e7267.png\" width=\"1040\" height=\"1609\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2f7\/0f7\/f99\/2f70f7f993fb745e3c8a0f0bee3e7267.png\"\/><\/figure>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0432\u0441\u0435 \u0438\u0437\u044a\u044f\u043d\u044b \u0432\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u0441\u0451 \u043f\u043e\u0435\u0445\u0430\u043b\u043e, \u0432\u044b\u043b\u0430\u0437\u0438\u0442 \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u0412 \u043e\u0431\u0449\u0435\u043c, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<h3>\u041a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u043e, \u043d\u043e \u043c\u0430\u043b\u043e \u043a\u0442\u043e \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0435\u0442<\/h3>\n<h4>\u0410\u0434\u0430\u043f\u0442\u0438\u0432 \u0432\u0441\u0435\u043c\u0443 \u0433\u043e\u043b\u043e\u0432\u0430<\/h4>\n<p>\u0422\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f, \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0442\u0438 \u0434\u0430\u0436\u0435 \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043c\u0435\u043d\u0430 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430, \u0430 \u0442\u0430\u043a\u043e\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u043e. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u0445 \u043a \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0443 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u2014 \u044d\u0442\u043e \u0442\u0430\u043a\u0430\u044f \u0436\u0435 \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b, \u043a\u0430\u043a \u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 API \u0438\u043b\u0438 \u0436\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0435\u0434\u0438\u043d\u043e\u043c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435, \u0431\u0435\u0437 \u0438\u0437\u0431\u044b\u0442\u043a\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0431\u0435\u0437 \u0438\u0437\u043e\u0431\u0438\u043b\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 div-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u043b\u044e\u0431\u043e\u043c\u0443 \u043f\u043e\u0432\u043e\u0434\u0443. \u0412\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u0437\u043e\u0440 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0441\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432. \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0441\u043f\u0438\u0442\u0430\u0442\u044c \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d\u0443 \u043a\u043e\u0434\u0430 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043d\u0430\u043f\u0435\u0440\u0435\u0434 \u0448\u0430\u0433\u0438 \u043f\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0435\u0431\u0435 \u0432\u043e\u043f\u0440\u043e\u0441: \u00ab\u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c, \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043b\u0438 \u043c\u043e\u0451 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c?\u00bb<\/p>\n<p>\u0422\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043a \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0439 \u043f\u043e \u0441\u0442\u0438\u043b\u044e, \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0439 \u0438 \u043d\u0435 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442. \u0422\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u0430\u043c \u0437\u0430\u0433\u043e\u043d\u0438\u0442 \u0441\u0435\u0431\u044f \u0432 \u0440\u0430\u043c\u043a\u0438. \u041e\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0431\u0443\u0434\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0438 \u043f\u043b\u044e\u0441\u044b.<\/p>\n<h4>\u041d\u0443\u0436\u043d\u044b \u0432\u0441\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u043e \u0432\u0441\u0435\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0441\u043a\u0438\u0435 \u043c\u0430\u043a\u0435\u0442\u044b \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043f\u043e\u0434 2-3 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0430 \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438, \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0441\u0430\u043c\u043e \u043f\u043e \u0441\u0435\u0431\u0435. <\/p>\n<p>\u042d\u043a\u0440\u0430\u043d\u044b \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b, \u043e\u043d\u0438 \u043d\u0435 \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0442\u0435 \u043d\u043e\u0440\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u043c\u0430\u043a\u0435\u0442\u0430\u0445. \u041d\u043e \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0435\u0434\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u0441\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441 \u0448\u0430\u0433\u043e\u043c \u0432 \u043e\u0434\u0438\u043d \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u2014 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043d\u0435 \u0432\u044b\u0445\u043e\u0434. \u041a\u0430\u043a \u0443\u0436\u0435 \u0441\u043a\u0430\u0437\u0430\u043d\u043e, \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0441\u0430\u043c\u043e \u043f\u043e \u0441\u0435\u0431\u0435, \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0448\u0438\u0440\u0438\u043d\u0443 \u044d\u043a\u0440\u0430\u043d\u0430, \u0438 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u043e. \u041a\u0430\u043a \u0440\u0430\u0437-\u0442\u0430\u043a\u0438 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 PrimeNg.<\/p>\n<h4>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 PrimeNg<\/h4>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 PrimeNg \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u0435\u0439, \u043f\u0430\u043d\u0435\u043b\u0435\u0439, \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u043e\u043a\u043e\u043d \u0438 \u0442.\u0434. \u041e\u043d\u0438 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0445 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u041a \u0441\u043b\u043e\u0432\u0443 \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 \u0432 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u043f\u043e\u0434 \u0440\u0435\u0448\u0430\u0435\u043c\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0432 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0437\u0440\u043e\u0441\u043b\u0430\u0441\u044c \u0443\u0436\u0435 \u0434\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0442\u0435\u043c. \u0414\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 PrimeNg. <a href=\"mailto:https:\/\/habr.com\/ru\/companies\/nspk\/articles\/673898\/\">\u0421\u043e\u0432\u0435\u0442\u0443\u044e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u043e \u043d\u0435\u0439 \u0432 \u043d\u0430\u0448\u0435\u043c \u0431\u043b\u043e\u0433\u0435<\/a>.<\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u044e \u0441\u0435\u0442\u043a\u0443 \u0438\u0437 12 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043d\u0430\u0441 \u043a \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0446\u0435\u043b\u044f\u043c \u0441 \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u043e\u043c \u0437\u0430\u0442\u0440\u0430\u0442.<\/p>\n<h4>\u041c\u0430\u043a\u0435\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/h4>\n<p>\u0418\u0442\u0430\u043a, \u0442\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043c\u0430\u043a\u0435\u0442\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0422\u0443\u0442 \u043f\u043e\u043a\u0430\u0436\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0435\u043d\u0430 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439.<\/p>\n<p>\u0414\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b7f\/c9c\/3c1\/b7fc9c3c152c82370b399df9aa124d7d.png\" alt=\"\u0414\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\" title=\"\u0414\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\" width=\"2289\" height=\"2951\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b7f\/c9c\/3c1\/b7fc9c3c152c82370b399df9aa124d7d.png\"\/><\/p>\n<div><figcaption>\u0414\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/figcaption><\/div>\n<\/figure>\n<p>\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/951\/93b\/dc5\/95193bdc5c84fcb965233c30d6806048.png\" alt=\"\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\" title=\"\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\" width=\"461\" height=\"2283\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/951\/93b\/dc5\/95193bdc5c84fcb965233c30d6806048.png\"\/><\/p>\n<div><figcaption>\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/figcaption><\/div>\n<\/figure>\n<h3>\u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0434\u0435\u043b\u0443<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c. \u041f\u0440\u043e Angular \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443, \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b, \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043d\u0430 PrimeNg.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442:<\/p>\n<pre><code>npm install primeflex@2.0.0 --save<\/code><\/pre>\n<p>\u0410 \u0442\u0430\u043a\u0436\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 angular.json \u0432 \u0441\u0430\u043c\u044b\u0439 \u043a\u043e\u043d\u0435\u0446 \u043f\u043e\u043b\u044f styles \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 <\/p>\n<pre><code>   \"node_modules\/primeflex\/primeflex.css\"<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"typescript\">\"styles\": [    \"src\/styles.scss\", \u2026\u2026 \/\/ \u2026\u2026.    \"node_modules\/primeflex\/primeflex.css\" ], <\/code><\/pre>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 PrimeNg<\/h4>\n<p>\u042d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432.<\/p>\n<p>\u0422\u044d\u0433\u0438 \u043f\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f, \u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u2018p-\u2018.<\/p>\n<p>\u0412 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u0438, \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430, \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u0438 \u0442.\u0434. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e \u043a\u043b\u0430\u0441\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442.<\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0440\u0430\u0432\u0430. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 class \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 p-mr- \u0438 \u0443\u043a\u0430\u0436\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0438\u0442\u044c p-mr-16. <\/p>\n<p>\u0410 \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u0442\u0430\u043b \u0444\u043b\u0435\u043a\u0441\u043e\u043c, \u0438 \u043f\u043e\u043f\u0443\u0442\u043d\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0432\u0441\u0451 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435? \u041f\u043e \u0442\u043e\u0439 \u0436\u0435 \u043b\u043e\u0433\u0438\u043a\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u044b p-d-flex (d \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 display), p-jc-center, p-ai-between, \u0438 \u0433\u043e\u0442\u043e\u0432\u043e: \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u0442\u0430\u043b \u0444\u043b\u0435\u043a\u0441\u043e\u043c \u0438 \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u043b \u0432\u0441\u0451 \u043f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435. <\/p>\n<p>\u042d\u0442\u043e \u043b\u0438\u0448\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u044d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0438 \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043a\u0430\u043a \u0441 \u044d\u0442\u0438\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c. \u0412\u0441\u0451 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u043b\u043e\u0433\u0438\u043a\u0430 \u0442\u0430\u043a\u0430\u044f \u0436\u0435, \u043a\u0430\u043a \u0438 \u0443 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0431\u0443\u0442\u0441\u0442\u0440\u0430\u043f\u0430.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0431\u043b\u0438\u0436\u0435 \u043a \u0441\u0443\u0442\u0438.<\/p>\n<p>PrimeNg \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0435\u0442\u043a\u0443 \u0438\u0437 12 \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u043e\u043f\u0438\u0440\u0430\u044f\u0441\u044c \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043b\u044e\u0431\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u043b\u0438 \u0432 \u0431\u043b\u043e\u043a\u0435 \u043d\u0430\u0447\u0430\u043b\u0438 \u043e\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u0451, \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0438\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441 p-grid.<\/p>\n<p>\u0412 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0435\u0433\u043e \u00ab\u0434\u0435\u0442\u044f\u043c\u00bb \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 p-col- \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f:<\/p>\n<pre><code class=\"xml\">&lt;div class=\"p-grid\">   &lt;div class=\"p-field p-col-6\">     &lt;label>\u041d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438&lt;\/label>     &lt;div>       &lt;p-inputMask type=\"text\" formControlName=\"phone\" mask=\"+7(999) 999-99 99\">&lt;\/p-inputMask>     &lt;\/div>   &lt;\/div>   &lt;div class=\"p-field p-col-6\">     &lt;label>\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u0447\u0442\u0430 &lt;\/label>     &lt;div>       &lt;input type=\"text\" pInputText formControlName=\"email\">     &lt;\/div>   &lt;\/div> &lt;\/div> <\/code><\/pre>\n<p>\u0415\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c p-grid, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0432\u0430 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 (\u043a\u0441\u0442\u0430\u0442\u0438, \u0442\u043e\u0436\u0435 \u0432\u0437\u044f\u0442\u044b\u0435 \u0438\u0437 PrimeNg), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u043f\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u0441\u0435\u0442\u043a\u0438. \u041e\u043d\u0438 \u0443\u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d\u044b, \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0434 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430, \u0438 \u0432\u0441\u0451 \u044d\u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0432, \u0438 \u0441 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c \u0441\u0442\u0430\u043d\u0435\u0442 \u0442\u0435\u0441\u043d\u043e \u0434\u0430\u0436\u0435 \u043d\u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u0432\u0441\u0435\u0439 \u0441\u0435\u0442\u043a\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0441\u043b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0430\u0442\u044c \u0438\u043c \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0435\u0442\u043a\u0438, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e 12 \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u0410 \u0435\u0441\u043b\u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435, \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0435\u0442 12, \u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0434\u0440\u0443\u0433 \u043f\u043e\u0434 \u0434\u0440\u0443\u0433\u043e\u043c \u0432\u043e \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/p>\n<p>\u0412 \u0441\u0435\u0442\u043a\u0435 PrimeNg \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0443\u0436\u0435 \u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u0434 \u0440\u0430\u0437\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443:<\/p>\n<ul>\n<li>\n<p>sm: 576px<\/p>\n<\/li>\n<li>\n<p>md: 768px<\/p>\n<\/li>\n<li>\n<p>lg: 992px<\/p>\n<\/li>\n<li>\n<p>xl: 1200px<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0435\u0439, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043b\u0435\u0433\u043a\u043e<\/p>\n<pre><code class=\"xml\">&lt;div class=\"p-grid\">   &lt;div class=\"p-field p-col-12 p-lg-6\">     &lt;label>\u041d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438&lt;\/label>     &lt;div>       &lt;p-inputMask type=\"text\" formControlName=\"phone\" mask=\"+7(999) 999-99 99\">&lt;\/p-inputMask>     &lt;\/div>   &lt;\/div>   &lt;div class=\"p-field p-col-12 p-lg-6\">     &lt;label>\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u0447\u0442\u0430 &lt;\/label>     &lt;div>       &lt;input type=\"text\" pInputText formControlName=\"email\">     &lt;\/div>   &lt;\/div> &lt;\/div> <\/code><\/pre>\n<p>\u0422\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0432\u0441\u0435\u0433\u043e \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0443 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043e\u0434\u043d\u0430\u043a\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043a\u043b\u0430\u0441\u0441 p-lg-6 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043a\u043b\u0430\u0441\u0441 p-col-12 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u0430: \u0435\u0441\u043b\u0438 \u043f\u0440\u0438 \u0448\u0438\u0440\u0438\u043d\u0435 \u0434\u043e 992px \u0434\u0432\u0430 \u0438\u043d\u043f\u0443\u0442\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043f\u043e\u0434 \u0434\u0440\u0443\u0433\u043e\u043c, \u0442\u043e \u043d\u0430 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u043f\u043e\u0441\u043b\u0435 992px \u043e\u043d\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u044f\u0442\u0441\u044f \u0438 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u043f\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u0441\u0435\u0442\u043a\u0438. \u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 4 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430, \u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0447\u0435\u0440\u0435\u0437 p-col- , \u0430 \u0437\u0430\u0442\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0442\u043a\u0443, \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443, \u043f\u043e\u0441\u043b\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 p-lg- \u043f\u043e\u043a\u0440\u043e\u0435\u0442 \u0438 lg, \u0438 xl \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438, \u0430 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 p-col- \u043f\u043e\u043a\u0440\u043e\u0435\u0442 sm \u0438 md \u0440\u0430\u0437\u043c\u0435\u0440\u044b.<\/p>\n<p>\u00a0\u0421\u0435\u0442\u043a\u0430 PrimeNg \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043f\u0435\u043a\u0442\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0444\u043b\u0435\u043a\u0441\u044b, \u0433\u0440\u0438\u0434\u044b, \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0442\u043e\u043d\u043a\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0442\u043a\u0438. \u0415\u0441\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0447\u0442\u043e\u0431\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u043b \u043d\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0435, \u0430, \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043d\u0430 \u0442\u0440\u0435\u0442\u044c\u0435\u0439, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 p-offset- \u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u043e\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0435\u0442\u043a\u0438, \u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0435\u0440\u0432\u044b\u0439.<\/p>\n<p>\u0421 \u0441\u0435\u0442\u043a\u043e\u0439 \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043d\u044f\u0442\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0418\u043d\u043e\u0433\u0434\u0430 \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u0435 \u0431\u043e\u043a\u043e\u0432\u044b\u0435 \u043c\u0435\u043d\u044e \u0438\u043b\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0442\u043e\u0432\u0430\u0440\u0430 \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430, \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0445 \u0441\u043a\u0440\u044b\u0442\u044c.<\/p>\n<pre><code class=\"xml\">&lt;div class=\"p-fluid p-grid\">   &lt;div class=\"p-field p-col\">     &lt;label>\u041c\u0435\u0441\u0442\u043e \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f (\u0441\u0435\u043b\u043e, \u0434\u0435\u0440\u0435\u0432\u043d\u044f, \u0433\u043e\u0440\u043e\u0434, \u0440\u0430\u0439\u043e\u043d, \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u043a\u0440\u0430\u0439, \u0440\u0435\u0441\u043f\u0443\u0431\u043b\u0438\u043a\u0430)&lt;\/label>     &lt;div>       &lt;input type=\"text\" pInputText formControlName=\"placeOfBirth\">     &lt;\/div>     &lt;div class=\"text-muted-light text14\">\u0417\u0434\u0435\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0412\u0430\u0448\u0435\u0433\u043e \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043f\u043e \u043f\u0430\u0441\u043f\u043e\u0440\u0442\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u00ab\u0433. \u0416\u0435\u043b\u0435\u0437\u043d\u043e\u0433\u043e\u0440\u0441\u043a, \u041a\u0443\u0440\u0441\u043a\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u00bb&lt;\/div>   &lt;\/div> &lt;\/div> <\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0442\u0430\u043a\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f: \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043f\u0430\u0441\u043f\u043e\u0440\u0442\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u043e \u043e\u0431\u044a\u0435\u043c\u0443 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u0437\u0430\u0439\u043c\u0435\u0442 \u0432\u0441\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u044d\u043a\u0440\u0430\u043d\u0430. \u0412\u044b\u0445\u043e\u0434 &#8212; \u043f\u043e\u0441\u043b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438.<\/p>\n<pre><code class=\"xml\">&lt;div class=\"p-grid\">   &lt;div class=\"p-field p-col-12\">     &lt;label>\u041c\u0435\u0441\u0442\u043e \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f (\u0441\u0435\u043b\u043e, \u0434\u0435\u0440\u0435\u0432\u043d\u044f, \u0433\u043e\u0440\u043e\u0434, \u0440\u0430\u0439\u043e\u043d, \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u043a\u0440\u0430\u0439, \u0440\u0435\u0441\u043f\u0443\u0431\u043b\u0438\u043a\u0430)&lt;\/label>     &lt;div>       &lt;input type=\"text\" pInputText formControlName=\"placeOfBirth\">     &lt;\/div>     &lt;div class=\"p-d-block p-d-lg-none mt8 mb24\">       &lt;button pButton         type=\"button\"         label=\"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\"         class=\"btn-icon text14 text-muted-light flex ai-center\"         icon=\"{{placeOfBirthToolTipVisible? 'mi mi-caret-up-2' : 'mi mi-caret-down-2'}}\"         iconPos=\"right\"         (click)=\"placeOfBirthToolTipVisible = !placeOfBirthToolTipVisible\"        >&lt;\/button>       &lt;div *ngIf=\"placeOfBirthToolTipVisible\" class=\"text-muted-light text14 mt8\">         \u0417\u0434\u0435\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0412\u0430\u0448\u0435\u0433\u043e \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043f\u043e \u043f\u0430\u0441\u043f\u043e\u0440\u0442\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u00ab\u0433. \u0416\u0435\u043b\u0435\u0437\u043d\u043e\u0433\u043e\u0440\u0441\u043a, \u041a\u0443\u0440\u0441\u043a\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u00bb       &lt;\/div>     &lt;\/div>     &lt;div class=\"text-muted-light text14 p-d-none p-d-lg-block mt8 mb24\">       \u0417\u0434\u0435\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0412\u0430\u0448\u0435\u0433\u043e \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043f\u043e \u043f\u0430\u0441\u043f\u043e\u0440\u0442\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u00ab\u0433. \u0416\u0435\u043b\u0435\u0437\u043d\u043e\u0433\u043e\u0440\u0441\u043a, \u041a\u0443\u0440\u0441\u043a\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u00bb     &lt;\/div>   &lt;\/div> &lt;\/div> <\/code><\/pre>\n<p>\u0418\u0442\u0430\u043a, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438. \u041a\u043b\u0430\u0441\u0441\u044b p-d-none, p-d-lg-block \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u0441\u0435\u0442\u043a\u043e\u0439, \u0442\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043a\u043b\u0430\u0441\u0441 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u043e\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0442\u0438\u043f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a block \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u043f\u043e\u0441\u043b\u0435 992px, \u0430 \u043a\u043e\u0433\u0434\u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435, \u0442\u043e \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e display \u0431\u0443\u0434\u0435\u0442 none. \u041e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0441 \u044d\u0442\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u0434\u043e \u0448\u0438\u0440\u0438\u043d\u044b 992px \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f, \u0430 \u043f\u043e\u0441\u043b\u0435 \u0438\u0441\u0447\u0435\u0437\u0430\u0442\u044c. \u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0438\u0435 \u0436\u0435, \u043a\u0430\u043a \u0438 \u0441 \u0441\u0435\u0442\u043a\u043e\u0439. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/039\/08c\/cdc\/03908ccdc52e19fb17d2cea69c4c6385.png\" width=\"974\" height=\"304\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/039\/08c\/cdc\/03908ccdc52e19fb17d2cea69c4c6385.png\"\/><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3a6\/db0\/e75\/3a6db0e751bdaec59d0281cbc1c02d31.png\" width=\"974\" height=\"432\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3a6\/db0\/e75\/3a6db0e751bdaec59d0281cbc1c02d31.png\"\/><\/figure>\n<p>\u041d\u0430 \u043c\u0435\u043d\u044c\u0448\u0438\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u0432\u0435\u0441\u044c \u0442\u0435\u043a\u0441\u0442 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438.<\/p>\n<p>\u0415\u0441\u0442\u044c \u043f\u043e\u043b\u0435 input, \u043e\u043d\u043e \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0435, \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0445\u043e\u0431\u0431\u0438, \u0438 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e. \u041d\u043e \u043f\u0440\u0438 \u0441\u0443\u0436\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432\u0441\u0451 \u043c\u0435\u043d\u044c\u0448\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0435\u043c, \u0438 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u043c\u0443\u0447\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u0440\u043e\u043c\u043e\u0442\u0430\u0442\u044c \u0432 \u043a\u043e\u043d\u0435\u0446 \u0441\u0442\u0440\u043e\u043a\u0438. \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043d\u0430 \u043d\u0438\u0437\u043a\u0438\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445, \u0437\u0430\u043c\u0435\u043d\u0438\u043c input \u043d\u0430 textarea, \u0432 \u043d\u0435\u043c \u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u043e\u043a, \u0438 \u0432\u0435\u0441\u044c \u0442\u0435\u043a\u0441\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u043d.<\/p>\n<pre><code>&lt;input type=\"text\"   class=\"width-100 p-d-none p-d-md-block\"   pInputText   [formControl]=\"getFormField(fieldName, formArrayItem)\" \/> &lt;textarea class=\"width-100 pt8 pb8 pl16 pr16 p-d-block p-d-md-none\"   style=\"line-height: 20px\"   type=\"text\"   [formControl]=\"getFormField(fieldName, formArrayItem)\"   pInputTextarea   [autoResize]=\"true\"   [rows]=\"5\" >&lt;\/textarea><\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u044b, \u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0434\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f 768px \u043e\u0442\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f textarea, \u0430 \u043f\u043e\u0441\u043b\u0435 \u0443\u0436\u0435 input. \u0422\u0435\u043a\u0441\u0442 \u043d\u0435 \u043f\u043e\u0442\u0435\u0440\u044f\u043d, \u0444\u043e\u0440\u043c\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0443\u0434\u043e\u0431\u043d\u043e. \u0415\u0441\u0442\u044c \u043b\u0438\u0448\u044c \u043d\u044e\u0430\u043d\u0441: \u0435\u0441\u043b\u0438 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u043e\u0439 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u043e \u0442\u0435\u043a\u0441\u0442, \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u0432 input, \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 textarea, \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438 \u043f\u0440\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0441\u0442\u0430\u0432\u0438\u0442 \u0441\u0435\u0431\u0435 \u0446\u0435\u043b\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043b\u0438\u0431\u043e \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u0441 \u043c\u0435\u043d\u044c\u0448\u0438\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c, \u043b\u0438\u0431\u043e \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a75\/ffd\/b76\/a75ffdb761610e822abe718645dcb34d.png\" width=\"981\" height=\"93\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a75\/ffd\/b76\/a75ffdb761610e822abe718645dcb34d.png\"\/><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/304\/5bd\/a35\/3045bda3545ba3a1f74f2109bd164524.png\" width=\"952\" height=\"242\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/304\/5bd\/a35\/3045bda3545ba3a1f74f2109bd164524.png\"\/><\/figure>\n<p>\u041d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u0445 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u0432\u0438\u0434\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0448\u0438\u0440\u043e\u043a\u043e\u0435, \u0438 \u043c\u0430\u043b\u043e\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0430 \u043d\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u043e\u0433\u043e, \u0447\u0442\u043e \u043e\u043d \u0441\u0442\u0430\u043d\u0435\u0442 \u043d\u0435\u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c \u0438 \u0441\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0437\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043f\u043e\u043b\u044f, \u0442\u043e \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043c\u0435\u0441\u0442\u0430 \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u0443\u0434\u0430 \u043c\u0435\u043d\u044c\u0448\u0435 \u0438 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430.<\/p>\n<p>\u041f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u0441 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0434\u043d\u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435, \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0430\u043c\u0438 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<h4>\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u0430\u043c\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h4>\n<p>PrimeNg \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0442\u043a\u043e\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u0448\u0438\u0445 \u0446\u0435\u043b\u0435\u0439. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0431\u044b\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u0438 \u043d\u0430 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0435, \u0438 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u043a\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0443\u0436\u0435 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438. \u0422\u0430\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 touchUI \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441<\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f:<\/p>\n<pre><code>&lt;p-calendar [firstDayOfWeek]=\"1\"             [monthNavigator]=\"true\"             [showIcon]=\"true\"             [yearNavigator]=\"true\"             [readonlyInput]=\"true\"             dataType=\"string\"             class=\"p-d-none p-d-md-block\"             yearRange=\"1961:2030\"             dateFormat=\"yy-mm-dd\"             appendTo=\"body\"             [formControl]=\"getFormField(fieldName)\" >&lt;\/p-calendar> &lt;p-calendar [firstDayOfWeek]=\"1\"             [monthNavigator]=\"true\"             [showIcon]=\"true\"             [yearNavigator]=\"true\"             [readonlyInput]=\"true\"             [touchUI]=\"true\"             dataType=\"string\"             class=\"p-d-block p-d-md-none\"             yearRange=\"1961:2030\"             dateFormat=\"yy-mm-dd\"             appendTo=\"body\"             [formControl]=\"getFormField(fieldName)\" >&lt;\/p-calendar> <\/code><\/pre>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u043f\u043e\u0434\u043c\u0435\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0418\u0442\u0430\u043a, \u0442\u0443\u0442 \u0434\u0432\u0430 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f, \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u043a\u0438 \u0438 \u0434\u043b\u044f \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430, \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c touchUI. \u0414\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u043e\u043a \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043e, \u0430 \u0434\u043b\u044f \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0432\u044b\u0448\u0435 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u043d\u043e \u0440\u0430\u0432\u043d\u043e false.<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/de2\/a88\/143\/de2a881435416c3a1760fcff475fea9e.png\" width=\"734\" height=\"531\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/de2\/a88\/143\/de2a881435416c3a1760fcff475fea9e.png\"\/><\/figure>\n<p>\u0414\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0435 \u043c\u0435\u043d\u044e \u0443 \u0438\u043d\u043f\u0443\u0442\u0430, \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430, \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0435\u0441\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u043e \u0432\u044b\u0431\u043e\u0440\u0443 \u0434\u0430\u0442\u044b.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/980\/c8f\/16c\/980c8f16cbcad86057e7faa4d664e244.png\" width=\"700\" height=\"725\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/980\/c8f\/16c\/980c8f16cbcad86057e7faa4d664e244.png\"\/><\/figure>\n<p>\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430 \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0434 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435: \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430, \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/p>\n<p>\u0422\u0430\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043d\u043e\u0433\u043e, \u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u0433\u0434\u0435 \u043d\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043f\u0430\u043d\u0435\u043b\u044f\u0445 \u0438 \u043a\u043d\u043e\u043f\u043a\u0430\u0445, \u044d\u0442\u043e \u043d\u0435 \u0438\u0433\u0440\u0430\u0435\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0440\u043e\u043b\u0438. <\/p>\n<p>\u0422\u0443\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0435 \u043a\u0430\u043a \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0442\u0430\u043a \u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432 \u0446\u0435\u043b\u043e\u043c. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430. \u0415\u0441\u043b\u0438 \u0438\u0445 \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0435\u0440\u043f\u043d\u0443\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432. <\/p>\n<h3>\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h3>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"xml\">&lt;div *ngIf=\"!isLouder\" class=\"spinner\">   &lt;p-progressSpinner strokeWidth=\"4\">&lt;\/p-progressSpinner> &lt;\/div>  &lt;p-panel *ngIf=\"isLouder\">   &lt;ng-template pTemplate=\"header\">     &lt;div class=\"page-header text24 mb24 text-medium color-grey-13\">\u041b\u0438\u0447\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f&lt;\/div>   &lt;\/ng-template>    &lt;!--  \u0428\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u044f (required)-->   &lt;ng-template #validationRequired let-fieldName=\"fieldName\" let-formArrayItem=\"formArrayItem\">     &lt;ng-container *ngIf=\"getFormField(fieldName, formArrayItem).touched || getFormField(fieldName, formArrayItem).dirty\">       &lt;div class=\"text14 color-danger width-100 mb8\" *ngIf=\"getFormField(fieldName, formArrayItem).errors?.required\">         \u041f\u043e\u043b\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e       &lt;\/div>     &lt;\/ng-container>   &lt;\/ng-template>    &lt;!--  \u0428\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f \u0432 \u0434\u0432\u0443\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445\u0416 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u043e\u043c-->   &lt;ng-template #calendar let-fieldName=\"fieldName\">     &lt;p-calendar [firstDayOfWeek]=\"1\"                 [monthNavigator]=\"true\"                 [showIcon]=\"true\"                 [yearNavigator]=\"true\"                 [readonlyInput]=\"true\"                 dataType=\"string\"                 class=\"p-d-none p-d-md-block\"                 yearRange=\"1961:2030\"                 dateFormat=\"yy-mm-dd\"                 appendTo=\"body\"                 [formControl]=\"getFormField(fieldName)\"     >&lt;\/p-calendar>     &lt;p-calendar [firstDayOfWeek]=\"1\"                 [monthNavigator]=\"true\"                 [showIcon]=\"true\"                 [yearNavigator]=\"true\"                 [readonlyInput]=\"true\"                 [touchUI]=\"true\"                 dataType=\"string\"                 class=\"p-d-block p-d-md-none\"                 yearRange=\"1961:2030\"                 dateFormat=\"yy-mm-dd\"                 appendTo=\"body\"                 [formControl]=\"getFormField(fieldName)\"     >&lt;\/p-calendar>   &lt;\/ng-template>    &lt;!--  \u0428\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0434\u0432\u0443\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445\u0416 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c(textarea) \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u043e\u043c(input)-->   &lt;ng-template #adaptiveInput let-fieldName=\"fieldName\" let-formArrayItem=\"formArrayItem\">     &lt;input type=\"text\"            class=\"width-100 p-d-none p-d-md-block\"            pInputText            [formControl]=\"getFormField(fieldName, formArrayItem)\"     \/>     &lt;textarea class=\"width-100 pt8 pb8 pl16 pr16 p-d-block p-d-md-none\"               style=\"line-height: 20px\"               type=\"text\"               [formControl]=\"getFormField(fieldName, formArrayItem)\"               pInputTextarea               [autoResize]=\"true\"               [rows]=\"5\"     >&lt;\/textarea>   &lt;\/ng-template>    &lt;ng-template pTemplate=\"content\">     &lt;form [formGroup]=\"personalData\" class=\"\">       &lt;div class=\"p-grid\">         &lt;div class=\"p-field p-col-12 p-lg-4\">           &lt;label>\u0424\u0430\u043c\u0438\u043b\u0438\u044f&lt;\/label>           &lt;div>             &lt;input type=\"text\" pInputText formControlName=\"lastName\">             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'lastName'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>         &lt;div class=\"p-field p-col-12 p-lg-4\">           &lt;label>\u0418\u043c\u044f&lt;\/label>           &lt;div>             &lt;input type=\"text\" pInputText formControlName=\"firstName\">             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'firstName'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>         &lt;div class=\"p-field p-col-12 p-lg-4\">           &lt;label>\u041e\u0442\u0447\u0435\u0441\u0442\u0432\u043e&lt;\/label>           &lt;div>             &lt;input type=\"text\" pInputText formControlName=\"patronymic\">           &lt;\/div>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-field\">         &lt;label>           \u0415\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u043b\u0438 \u0444\u0430\u043c\u0438\u043b\u0438\u044e, \u0438\u043c\u044f \u0438\u043b\u0438 \u043e\u0442\u0447\u0435\u0441\u0442\u0432\u043e, \u0442\u043e \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0438\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u0433\u0434\u0430, \u0433\u0434\u0435 \u0438 \u043f\u043e \u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435         &lt;\/label>         &lt;div class=\"p-formgroup-inline mt8\">           &lt;div class=\"p-field-radiobutton\">             &lt;p-radioButton formControlName=\"isFullNameChanged\" label=\"\u041d\u0435 \u043c\u0435\u043d\u044f\u043b(\u0430)\" [value]=\"false\">&lt;\/p-radioButton>           &lt;\/div>           &lt;div class=\"p-field-radiobutton\">             &lt;p-radioButton formControlName=\"isFullNameChanged\" label=\"\u041c\u0435\u043d\u044f\u043b(\u0430)\" [value]=\"true\">&lt;\/p-radioButton>           &lt;\/div>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-field width-100\" *ngIf=\"(isChangedFio$ |async) || changeValue\">          &lt;p-panel class=\"editable-panel\" [styleClass]=\"'bordered-panel'\">           &lt;ng-template pTemplate=\"header\">             &lt;div class=\"editable-panel__header text16\">               \u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0444\u0430\u043c\u0438\u043b\u0438\u044e, \u0438\u043c\u044f \u0438 \u043e\u0442\u0447\u0435\u0441\u0442\u0432\u043e, \u043a\u043e\u0433\u0434\u0430 \u0438 \u043f\u043e \u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438             &lt;\/div>           &lt;\/ng-template>              &lt;div formArrayName=\"previousFullNames\">               &lt;div *ngFor=\"let fio of previousFullNames.controls; let i = index\" class=\"editable-row\">                 &lt;div [formGroupName]=\"i\" class=\"p-grid p-grid--no-margin\">                   &lt;div class=\"p-col-12 p-d-flex p-d-lg-none ai-center jc-between editable-row__index\">                     &lt;span>{{i+1}}&lt;\/span>                     &lt;button pButton                             type=\"button\"                             icon=\"mi mi-close\"                             (click)=\"deleteChangedFio(i)\"                             [disabled]=\"previousFullNames.controls.length === 1\"                     >&lt;\/button>                   &lt;\/div>                   &lt;div class=\"p-grid p-col-12 p-lg-11 editable-row__controls\">                     &lt;div class=\"p-grid p-col-12\">                       &lt;div class=\"p-field p-col-12 p-lg-4\" >                         &lt;label>\u0424\u0430\u043c\u0438\u043b\u0438\u044f&lt;\/label>                         &lt;div>                           &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"lastName\"\/>                           &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'lastName', formArrayItem: fio}\">&lt;\/ng-container>                         &lt;\/div>                       &lt;\/div>                       &lt;div class=\"p-field p-col-12 p-lg-4\">                         &lt;label>\u0418\u043c\u044f&lt;\/label>                         &lt;div>                           &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"firstName\" \/>                           &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'firstName', formArrayItem: fio}\">&lt;\/ng-container>                         &lt;\/div>                       &lt;\/div>                       &lt;div class=\"p-field p-col-12 p-lg-4\">                         &lt;label>\u041e\u0442\u0447\u0435\u0441\u0442\u0432\u043e&lt;\/label>                         &lt;div>                           &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"patronymic\" \/>                           &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'patronymic', formArrayItem: fio}\">&lt;\/ng-container>                         &lt;\/div>                       &lt;\/div>                     &lt;\/div>                     &lt;div class=\"p-grid p-col-12\">                       &lt;div class=\"p-field p-col-12\">                         &lt;label>\u0413\u0434\u0435 \u0438 \u043f\u043e \u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438&lt;\/label>                         &lt;div>                           &lt;textarea class=\"width-100 pt8 pb8 pl16 pr16\"                                     style=\"line-height: 20px\"                                     type=\"text\"                                     formControlName=\"description\"                                     pInputTextarea                                     [autoResize]=\"true\"                                     [rows]=\"5\"                           >&lt;\/textarea>                           &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'description', formArrayItem: fio}\">&lt;\/ng-container>                         &lt;\/div>                       &lt;\/div>                     &lt;\/div>                   &lt;\/div>                   &lt;button pButton                           type=\"button\"                           class=\"text18 color-black p-d-none p-lg-1 p-d-lg-flex ai-start mt56\"                           icon=\"mi mi-trash\"                           (click)=\"deleteChangedFio(i)\"                           [disabled]=\"previousFullNames.controls.length === 1\"                   >&lt;\/button>                 &lt;\/div>               &lt;\/div>             &lt;\/div>            &lt;ng-template pTemplate=\"footer\">             &lt;div class=\"inline\">               &lt;button pButton                       type=\"button\"                       label=\"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c\"                       class=\"btn-link-secondary\"                       icon=\"mi mi-plus\"                       [disabled]=\"previousFullNames.controls.length === config.MAX_LIMIT_SIZE_LIST\"                       (click)=\"addChangedFio()\"               >&lt;\/button>             &lt;\/div>           &lt;\/ng-template>          &lt;\/p-panel>        &lt;\/div>        &lt;div class=\"p-grid\">         &lt;div class=\"p-field p-col-12 p-lg-4\">           &lt;label>\u0427\u0438\u0441\u043b\u043e, \u043c\u0435\u0441\u044f\u0446 \u0438 \u0433\u043e\u0434 \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f&lt;\/label>           &lt;div>             &lt;ng-container [ngTemplateOutlet]=\"calendar\" [ngTemplateOutletContext]=\"{fieldName: 'dateOfBirth'}\">&lt;\/ng-container>             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'dateOfBirth'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-grid\">         &lt;div class=\"p-field p-col-12\">           &lt;label>\u041c\u0435\u0441\u0442\u043e \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f (\u0441\u0435\u043b\u043e, \u0434\u0435\u0440\u0435\u0432\u043d\u044f, \u0433\u043e\u0440\u043e\u0434, \u0440\u0430\u0439\u043e\u043d, \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u043a\u0440\u0430\u0439, \u0440\u0435\u0441\u043f\u0443\u0431\u043b\u0438\u043a\u0430)&lt;\/label>           &lt;div>             &lt;ng-container [ngTemplateOutlet]=\"adaptiveInput\" [ngTemplateOutletContext]=\"{fieldName: 'placeOfBirth'}\">&lt;\/ng-container>             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'placeOfBirth'}\">&lt;\/ng-container>           &lt;\/div>           &lt;div class=\"p-d-block p-d-lg-none mt8 mb24\">             &lt;button pButton                     type=\"button\"                     label=\"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\"                     class=\"btn-icon text14 text-muted-light flex ai-center\"                     icon=\"{{placeOfBirthToolTipVisible? 'mi mi-caret-up-2' : 'mi mi-caret-down-2'}}\"                     iconPos=\"right\"                     (click)=\"placeOfBirthToolTipVisible = !placeOfBirthToolTipVisible\"             >&lt;\/button>             &lt;div *ngIf=\"placeOfBirthToolTipVisible\" class=\"text-muted-light text14 mt8\">               \u0417\u0434\u0435\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0412\u0430\u0448\u0435\u0433\u043e \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043f\u043e \u043f\u0430\u0441\u043f\u043e\u0440\u0442\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u00ab\u0433. \u0416\u0435\u043b\u0435\u0437\u043d\u043e\u0433\u043e\u0440\u0441\u043a, \u041a\u0443\u0440\u0441\u043a\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u00bb             &lt;\/div>           &lt;\/div>           &lt;div class=\"text-muted-light text14 p-d-none p-d-lg-block mt8 mb24\">             \u0417\u0434\u0435\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0412\u0430\u0448\u0435\u0433\u043e \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043f\u043e \u043f\u0430\u0441\u043f\u043e\u0440\u0442\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u00ab\u0433. \u0416\u0435\u043b\u0435\u0437\u043d\u043e\u0433\u043e\u0440\u0441\u043a, \u041a\u0443\u0440\u0441\u043a\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u00bb           &lt;\/div>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-field width-100\">         &lt;p-panel class=\"editable-panel\" [styleClass]=\"'bordered-panel'\">           &lt;ng-template pTemplate=\"header\">             &lt;div class=\"editable-panel__header text16 text-medium\">               \u041f\u0430\u0441\u043f\u043e\u0440\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435             &lt;\/div>           &lt;\/ng-template>                &lt;div class=\"p-grid p-grid--no-margin\">                 &lt;div class=\"p-grid p-col-12 editable-row__controls\">                   &lt;div class=\"p-grid p-col-12\">                     &lt;div class=\"p-field p-col-4 p-lg-3\" >                       &lt;label>\u0421\u0435\u0440\u0438\u044f&lt;\/label>                       &lt;div>                         &lt;p-inputMask class=\"width-100\" type=\"text\" formControlName=\"passportSeries\" mask=\"9999\">&lt;\/p-inputMask> &lt;!--                        &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"passportSeries\"\/>-->                         &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'passportSeries'}\">&lt;\/ng-container>                       &lt;\/div>                     &lt;\/div>                     &lt;div class=\"p-field p-col-8 p-lg-3\">                       &lt;label>\u041d\u043e\u043c\u0435\u0440&lt;\/label>                       &lt;div>                         &lt;p-inputMask class=\"width-100\" type=\"text\" formControlName=\"passportNumber\" mask=\"999999\">&lt;\/p-inputMask> &lt;!--                        &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"passportNumber\" \/>-->                         &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'passportNumber'}\">&lt;\/ng-container>                       &lt;\/div>                     &lt;\/div>                     &lt;div class=\"p-field p-col-12 p-lg-3\">                       &lt;label>\u0414\u0430\u0442\u0430 \u0432\u044b\u0434\u0430\u0447\u0438&lt;\/label>                       &lt;div>                         &lt;ng-container [ngTemplateOutlet]=\"calendar\" [ngTemplateOutletContext]=\"{fieldName: 'passportDateOfIssue'}\">&lt;\/ng-container>                         &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'passportDateOfIssue'}\">&lt;\/ng-container>                       &lt;\/div>                     &lt;\/div>                     &lt;div class=\"p-field p-col-12 p-lg-3\">                       &lt;label>\u041a\u043e\u0434 \u043f\u043e\u0434\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f&lt;\/label>                       &lt;div>                         &lt;p-inputMask class=\"width-100\" type=\"text\" formControlName=\"passportUnitCode\" mask=\"999-999\">&lt;\/p-inputMask> &lt;!--                        &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"passportUnitCode\" \/>-->                         &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'passportUnitCode'}\">&lt;\/ng-container>                       &lt;\/div>                     &lt;\/div>                   &lt;\/div>                   &lt;div class=\"p-grid p-col-12\">                     &lt;div class=\"p-field p-col-12\">                       &lt;label>\u041a\u0435\u043c \u0432\u044b\u0434\u0430\u043d&lt;\/label>                       &lt;div>                         &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"passportWhoIssued\" \/>                         &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'passportWhoIssued'}\">&lt;\/ng-container>                       &lt;\/div>                     &lt;\/div>                   &lt;\/div>                 &lt;\/div>               &lt;\/div>         &lt;\/p-panel>       &lt;\/div>        &lt;div class=\"p-grid\">         &lt;div class=\"p-field p-col-12 p-lg-6\">           &lt;label>\u0418\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u043e\u043c\u0435\u0440 \u043d\u0430\u043b\u043e\u0433\u043e\u043f\u043b\u0430\u0442\u0435\u043b\u044c\u0449\u0438\u043a\u0430 (\u0418\u041d\u041d)&lt;\/label>           &lt;div>             &lt;p-inputMask type=\"text\" formControlName=\"inn\" mask=\"9999999999\">&lt;\/p-inputMask>             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'inn'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-grid\">         &lt;div class=\"p-field p-col-12 p-lg-6\">           &lt;label>\u041d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438&lt;\/label>           &lt;div>             &lt;p-inputMask type=\"text\" formControlName=\"phone\" mask=\"+7(999) 999-99 99\">&lt;\/p-inputMask>             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'phone'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>         &lt;div class=\"p-field p-col-12 p-lg-6\">           &lt;label>\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u0430\u044f \u043f\u043e\u0447\u0442\u0430 &lt;\/label>           &lt;div>             &lt;input type=\"text\" pInputText formControlName=\"email\">             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'email'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-grid\">         &lt;div class=\"p-field p-col\">           &lt;label>\u0414\u0430\u043d\u043d\u044b\u0435 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u043e\u0432 \u0432 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u044f\u0445&lt;\/label>           &lt;div>             &lt;textarea type=\"text\" pInputTextarea formControlName=\"socialMedia\">&lt;\/textarea>           &lt;\/div>         &lt;\/div>       &lt;\/div>      &lt;\/form>   &lt;\/ng-template>  &lt;\/p-panel> <\/code><\/pre>\n<h3>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u0441\u044f \u043a \u043d\u0430\u0447\u0430\u043b\u0443 \u043a\u043e\u0434\u0430, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u043b\u043e\u043a\u043e\u0432 ng-template, \u0430 \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u0434\u0435 ng-container \u0441 \u0438\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438. \u0414\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0441\u0435 \u043f\u0430\u0440\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442, \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u044b \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u0442\u0430\u043a \u0436\u0435 \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0438 \u0441 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u043c\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<pre><code class=\"xml\">  &lt;ng-template #adaptiveInput let-fieldName=\"fieldName\" let-formArrayItem=\"formArrayItem\">     &lt;input type=\"text\"            class=\"width-100 p-d-none p-d-md-block\"            pInputText            [formControl]=\"getFormField(fieldName, formArrayItem)\"     \/>     &lt;textarea class=\"width-100 pt8 pb8 pl16 pr16 p-d-block p-d-md-none\"               style=\"line-height: 20px\"               type=\"text\"               [formControl]=\"getFormField(fieldName, formArrayItem)\"               pInputTextarea               [autoResize]=\"true\"               [rows]=\"5\"     >&lt;\/textarea>   &lt;\/ng-template> <\/code><\/pre>\n<p>\u0422\u0443\u0442 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043a\u0430\u043a \u0440\u0430\u0437 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u043f\u043e\u043b\u044e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d.<\/p>\n<pre><code class=\"xml\">&lt;ng-container    [ngTemplateOutlet]=\"adaptiveInput\"    [ngTemplateOutletContext]=\"{fieldName: 'placeOfBirth'}\" >&lt;\/ng-container><\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0432 \u043b\u044e\u0431\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u042d\u0442\u043e \u0432\u0441\u0451 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 Angular, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0441\u043e\u0431\u043e\u0439 \u043d\u0430\u0443\u043a\u0438 \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442, \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0443\u0434\u043e\u0431\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u0430\u044f, \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0435\u0435\u0442 \u043e\u0434\u0438\u043d \u0441\u0442\u0438\u043b\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f, \u0431\u0435\u0437 \u043a\u043e\u0441\u0442\u044b\u043b\u0435\u0439.<\/p>\n<p>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u043b\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5e3\/ca3\/6b4\/5e3ca36b49241d20cba87acb32671d83.gif\" width=\"702\" height=\"382\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5e3\/ca3\/6b4\/5e3ca36b49241d20cba87acb32671d83.gif\"\/><\/figure>\n<p>\u0425\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043d\u043e\u0433\u043e \u0443 \u0432\u0430\u0441 \u0441\u043b\u043e\u0436\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u0432\u0430\u0436\u043d\u043e\u0441\u0442\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043f\u0440\u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0410 \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u0436\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442, \u0442\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0441 \u043f\u0440\u0438\u0446\u0435\u043b\u043e\u043c \u043d\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0438\u0441\u0442\u044b\u0439, \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043b\u044e\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u0438 \u0445\u043e\u0442\u0435\u043b\u043e\u043a \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0441\u0442\u044b\u043a\u0443\u0435\u0442\u0441\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u0442\u0435\u043a\u043e\u043c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439.<\/p>\n<p>\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u043d\u0430\u043f\u0430\u0440\u043d\u0438\u043a\u043e\u043c \u0432 \u044d\u0442\u043e\u043c \u0441\u043c\u044b\u0441\u043b\u0435 \u0434\u043b\u044f Angular \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f PrimeNg, \u0432\u0441\u0435 \u0434\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u044d\u0442\u043e\u0433\u043e &#8212; \u043e\u0431\u0438\u043b\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0437\u0430\u0442\u043e\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u0434 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0433\u043e, \u0447\u0442\u043e \u0432 \u043d\u0435\u0439 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0441\u0435\u0442\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0440\u0430\u0441\u0442\u0443\u0442, \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043a\u0440\u0430\u0441\u0438\u0432\u0435\u0435, \u0438 \u043f\u0440\u0438\u044f\u0442\u043d\u0435\u0435 \u0434\u043b\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041a\u0430\u043a \u0431\u044b \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c, \u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043a \u044d\u0442\u043e\u043c\u0443 \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0438 \u0437\u0430\u043f\u0430\u0441\u0430\u0442\u044c\u0441\u044f \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438 \u0438 \u043d\u0430\u0432\u044b\u043a\u0430\u043c\u0438 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u0445, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u0445 \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430, \u0430 \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0435\u0433\u043e.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/750970\/\"> https:\/\/habr.com\/ru\/articles\/750970\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043e\u0431\u0441\u0443\u0434\u0438\u043c \u0430\u0434\u0430\u043f\u0442\u0438\u0432 &#8212; \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0432\u0430\u0436\u043d\u0443\u044e \u0442\u0435\u043c\u0443 \u0432 \u043c\u0438\u0440\u0435 Frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0412\u0435\u0434\u044c \u043a\u0430\u043a \u0431\u044b \u043d\u0438 \u0431\u044b\u043b\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0443\u0434\u0435\u0441\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c, \u0438 \u043a\u0430\u043a\u043e\u0439 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0439 \u0438 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043c\u0438\u0440 \u043d\u0435 \u0442\u0430\u0438\u043b\u043e \u0431\u044b \u043e\u043d\u043e \u0432 \u0441\u0435\u0431\u0435, \u0430 \u043f\u0435\u0440\u0432\u043e\u0435, \u0441 \u0447\u0435\u043c \u0441\u0442\u043e\u043b\u043a\u043d\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u044d\u0442\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434. <\/p>\n<figure class=\"full-width\"><\/figure>\n<h3>\u041e \u0447\u0435\u043c \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c<\/h3>\n<p>\u0414\u0430\u0436\u0435 \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435, \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0432\u0438\u0434\u0438\u0442 \u043e\u0431\u043b\u043e\u0436\u043a\u0443, \u0434\u0438\u0437\u0430\u0439\u043d \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e\u0431 \u044d\u043a\u0440\u0430\u043d\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 \u0438\u043b\u0438 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0430, \u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0441\u043b\u043e\u0436\u043d\u043e: \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439, \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u0438 \u0443\u0434\u043e\u0431\u043d\u043e. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u0443\u043c\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u0445, \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e\u0449\u0438\u0445 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u0438\u0445 \u043f\u0440\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f\u0445 \u2014 \u0437\u043d\u0430\u0447\u0438\u0442 \u043b\u0438\u0448\u0430\u0442\u044c \u0441\u0435\u0431\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438.<\/p>\n<p>\u041d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0442\u0440\u0430\u0444\u0438\u043a\u0430 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u0447\u0435\u0440\u0435\u0437 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u0438 \u043a\u0442\u043e-\u0442\u043e \u0440\u0435\u0448\u0438\u043b \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0430 \u043a\u0442\u043e-\u0442\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b \u043f\u043e\u0434 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u044b \u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437.<\/p>\n<p>\u0422\u0435\u043a\u0441\u0442 \u0441\u0442\u0430\u0442\u044c\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u0434\u043e\u0432\u0430\u044f \u0431\u0430\u0437\u0430, \u0431\u0443\u0434\u0443\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 Angular, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u043c \u0432 \u043f\u0430\u0440\u0435 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 PrimeNg, \u043a\u043e\u0442\u043e\u0440\u0430\u044f, \u043f\u043e \u043c\u043e\u0435\u043c\u0443 \u043c\u043d\u0435\u043d\u0438\u044e, \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u0430\u043c\u044b\u043c\u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0438 \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a Angular. <\/p>\n<h3>\u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043d\u0430\u0441\u0443\u0449\u043d\u043e\u043c<\/h3>\n<p>\u041e\u0437\u0432\u0443\u0447\u0435\u043d\u043d\u0430\u044f \u0440\u0430\u043d\u0435\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0435 \u043d\u043e\u0432\u0430, \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0441\u043c\u0435\u043b\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0441 \u043d\u0435\u0440\u0435\u0448\u0430\u0435\u043c\u043e\u0439 \u0434\u0438\u043b\u0435\u043c\u043c\u043e\u0439, \u043f\u043e\u0447\u0435\u043c\u0443? \u0421\u0435\u0439\u0447\u0430\u0441 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443.<\/p>\n<h4>\u0421 \u0447\u0435\u0433\u043e \u0432\u0441\u0451 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f <\/h4>\n<p>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0438\u0437\u043e\u0431\u0438\u043b\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u0440\u0430\u0437\u0432\u044f\u0437\u0430\u043b\u0438 \u0440\u0443\u043a\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u044e\u0442\u0441\u044f \u043e\u0442 \u0434\u0443\u0448\u0438 \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0418\u0445 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0432\u0438\u043d\u0438\u0442\u044c, \u0432\u0435\u0434\u044c \u0432\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0442\u0440\u0443\u0434\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0439 \u0446\u0435\u043b\u0438.<\/p>\n<p>\u0418, \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435, \u0435\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430.<\/p>\n<p>\u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0430\u0447\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u043a\u0435 \u0438 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0435, \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0432 \u0440\u0430\u0437\u043d\u0438\u0446\u044b, \u0442\u043e \u0442\u0443\u0442 \u0443\u0436\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441\u044b. \u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432 \u0441\u0430\u043c\u0430 \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u0430 \u043f\u043e\u043b\u043e\u043c\u0430\u0442\u044c \u0433\u043e\u043b\u043e\u0432\u0443 \u043d\u0430\u0434 \u0442\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u044d\u0442\u043e \u0441\u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u0430\u0442\u044c. \u0412\u0435\u0434\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u0430 \u043a\u043e\u043c\u043d\u0430\u0442\u0435, \u0433\u0434\u0435 \u0441\u0442\u0435\u043d\u044b \u0441\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f, \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0432\u0441\u0451 \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430. \u0418 \u0447\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430, \u0442\u0435\u043c \u0442\u044f\u0436\u0435\u043b\u0435\u0435 \u0442\u0430\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u0443\u0436\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0442\u043f\u0430\u0434\u0430\u0435\u0442 \u0438\u0437 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. <\/p>\n<p>\u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0438\u043b\u0435\u043c\u043c\u0443 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u0440\u0438 \u0442\u0430\u043a\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e, \u0438 \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u043d\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043b\u043e\u0441\u044c \u0432 \u043a\u0430\u0448\u0443.<\/p>\n<p>\u041d\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0432\u0435\u0434\u044c \u043f\u043e\u0442\u043e\u043c \u0432\u0441\u0451 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043a frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c.<\/p>\n<h4>\u0412\u0441\u0435 \u0445\u043e\u0442\u044f\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c\u0438<\/h4>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u043d\u0435 \u0443\u0441\u0442\u0443\u043f\u0430\u044e\u0449\u0443\u044e, \u0430 \u0438\u043d\u043e\u0433\u0434\u0430 \u0438 \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u044f\u0449\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u0442\u0430\u043b\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432 \u043f\u0440\u044f\u043c\u043e\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430, \u0430 \u043d\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u043b\u0438 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0442\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u043b\u043e \u043d\u0430 \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0435\u0451 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n<p>\u042d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0435\u0440\u0435\u0448\u043b\u0430 \u0432 \u0440\u0443\u043a\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u041e\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u044b \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u043c: \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u0442\u0440\u0443\u0434\u0430, \u043f\u0443\u0441\u043a\u0430\u0439 \u0432\u0441\u0451 \u0441\u0434\u0435\u043b\u0430\u044e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0420\u0435\u0448\u0438\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u044d\u0442\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<h3>\u041a\u0430\u043a \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u043d\u043e \u043c\u043d\u043e\u0433\u0438\u0435 \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u044e\u0442<\/h3>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0433\u0434\u0430 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0439\u0442\u0438 \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u0440\u0430\u0437\u0443 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b PrimeNg, \u043e\u0434\u043d\u0430\u043a\u043e \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442, \u0432\u0435\u0434\u044c \u0432\u0441\u044f \u0441\u0443\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0432 \u0434\u0440\u0443\u0433\u043e\u043c.<\/p>\n<pre><code class=\"xml\">&lt;p-panel>    &lt;ng-template pTemplate=\"header\">     &lt;div class=\"text24 mb24 text-medium color-grey-13\">\u041b\u0438\u0447\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f&lt;\/div>   &lt;\/ng-template>     &lt;ng-template pTemplate=\"content\">     &lt;form [formGroup]=\"personalData\" class=\"\">        &lt;div class=\"p-fluid p-grid\">         &lt;div class=\"p-field p-col\">           &lt;label>\u0424\u0430\u043c\u0438\u043b\u0438\u044f&lt;\/label>           &lt;div>             &lt;input type=\"text\" pInputText formControlName=\"secondName\">             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'secondName'}\">&lt;\/ng-container> &lt;!--            &lt;ng-container *ngIf=\"getFormField('firstName').touched || getFormField('firstName').dirty\">--> &lt;!--              &lt;div class=\"text14 color-danger width-100\" *ngIf=\"getFormField('firstName').errors?.required\">--> &lt;!--                \u041f\u043e\u043b\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e--> &lt;!--              &lt;\/div>--> &lt;!--            &lt;\/ng-container>-->           &lt;\/div>         &lt;\/div>         &lt;div class=\"p-field p-col-fixed-500\">           &lt;label>\u0418\u043c\u044f&lt;\/label>           &lt;div>             &lt;input type=\"text\" pInputText formControlName=\"firstName\">             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'firstName'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>         &lt;div class=\"p-field p-col-fixed-500\">           &lt;label>\u041e\u0442\u0447\u0435\u0441\u0442\u0432\u043e&lt;\/label>           &lt;div>             &lt;input type=\"text\" pInputText formControlName=\"patronymic\">             &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'patronymic'}\">&lt;\/ng-container>           &lt;\/div>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-formgroup-inline\">         &lt;div class=\"p-field-radiobutton\">           &lt;p-radioButton formControlName=\"isFullNameChanged\" label=\"\u041d\u0435 \u043c\u0435\u043d\u044f\u043b(\u0430)\" [value]=\"false\">&lt;\/p-radioButton>         &lt;\/div>         &lt;div class=\"p-field-radiobutton\">           &lt;p-radioButton formControlName=\"isFullNameChanged\" label=\"\u041c\u0435\u043d\u044f\u043b(\u0430)\" [value]=\"true\">&lt;\/p-radioButton>         &lt;\/div>       &lt;\/div>        &lt;div class=\"p-field width-100\" *ngIf=\"(isChangedFio$ |async) || changeValue\">          &lt;p-panel class=\"editable-panel\" [styleClass]=\"'bordered-panel'\">           &lt;ng-template pTemplate=\"header\">             &lt;div class=\"editable-panel__header text16\">               \u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0444\u0430\u043c\u0438\u043b\u0438\u044e, \u0438\u043c\u044f \u0438 \u043e\u0442\u0447\u0435\u0441\u0442\u0432\u043e, \u043a\u043e\u0433\u0434\u0430 \u0438 \u043f\u043e \u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438             &lt;\/div>           &lt;\/ng-template>              &lt;div formArrayName=\"previousFullNames\">               &lt;div *ngFor=\"let fio of previousFullNames.controls; let i = index\" class=\"editable-row\">                 &lt;div [formGroupName]=\"i\" class=\"flex ai-center\">                   &lt;div class=\"width-100\" style=\"flex: 20\">                     &lt;div class=\"flex width-100 ai-start jc-between\">                       &lt;div class=\"p-field\" style=\"padding: 0.5em; flex: 1\">                         &lt;label>\u0424\u0430\u043c\u0438\u043b\u0438\u044f&lt;\/label>                         &lt;div>                           &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"lastName\"\/>                           &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'lastName', formArrayItem: fio}\">&lt;\/ng-container>                         &lt;\/div>                       &lt;\/div>                       &lt;div class=\"p-field\" style=\"padding: 0.5em; flex: 1\">                         &lt;label>\u0418\u043c\u044f&lt;\/label>                         &lt;div>                           &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"firstName\" \/>                           &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'firstName', formArrayItem: fio}\">&lt;\/ng-container>                         &lt;\/div>                        &lt;\/div>                       &lt;div class=\"p-field\" style=\"padding: 0.5em; flex: 1\">                         &lt;label>\u041e\u0442\u0447\u0435\u0441\u0442\u0432\u043e&lt;\/label>                         &lt;div>                           &lt;input class=\"width-100\" type=\"text\" pInputText formControlName=\"patronymic\" \/>                           &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'patronymic', formArrayItem: fio}\">&lt;\/ng-container>                         &lt;\/div>                       &lt;\/div>                     &lt;\/div>                     &lt;div>                       &lt;div class=\"p-field width-100\" style=\"padding: 0.5em;\">                         &lt;label>\u0413\u0434\u0435 \u0438 \u043f\u043e \u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438&lt;\/label>                         &lt;div>                           &lt;textarea class=\"width-100 pt8 pb8 pl16 pr16\"                                     style=\"line-height: 20px\"                                     type=\"text\"                                     formControlName=\"description\"                                     pInputTextarea                                     [autoResize]=\"true\"                                     [rows]=\"5\"                           >&lt;\/textarea>                           &lt;ng-container [ngTemplateOutlet]=\"validationRequired\" [ngTemplateOutletContext]=\"{fieldName: 'description', formArrayItem: fio}\">&lt;\/ng-container>                         &lt;\/div>                       &lt;\/div>                     &lt;\/div>                   &lt;\/div>                    &lt;button pButton                           style=\"flex: 1\"                           type=\"button\"                           class=\"text18 mt24 color-black\"                           icon=\"mi mi-trash\"                           (click)=\"deleteChangedFio(i)\"                           [disabled]=\"previousFullNames.controls.length === 1\"                   >&lt;\/button>                 &lt;\/div>               &lt;\/div>             &lt;\/div>            &lt;ng-template pTemplate=\"footer\">             &lt;div class=\"inline\">               &lt;button pButton                       type=\"button\"                       label=\"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c\"                       class=\"btn-link-secondary\"                       icon=\"mi mi-plus\"                       (click)=\"addChangedFio()\"               >&lt;\/button>             &lt;\/div>           &lt;\/ng-template>          &lt;\/p-panel>        &lt;\/div>        &lt;div class=\"p-fluid p-grid\">         &lt;div class=\"p-field p-col-fixed-400\">           &lt;label>\u0427\u0438\u0441\u043b\u043e, \u043c\u0435\u0441\u044f\u0446 \u0438 \u0433\u043e\u0434 \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f&lt;\/label>           &lt;div>             &lt;p-calendar [firstDayOfWeek]=\"1\"                         [monthNavigator]=\"true\"                         [showIcon]=\"true\"                         [yearNavigator]=\"true\"                         yearRange=\"1961:2030\"                         dateFormat=\"dd.mm.yy\"                    <\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-389413","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/389413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=389413"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/389413\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=389413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=389413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=389413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}