https://dokuwiki.webmastermsk.ru/ 2026-08-12T14:06:04+0000 https://dokuwiki.webmastermsk.ru/ https://dokuwiki.webmastermsk.ru/lib/tpl/dokuwiki/images/favicon.ico text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:forms:custom_validator&rev=1673515089&do=diff Создание валидатора Для создания валидатора можно в компоненте создать обычный метод и передать туда параметр с типом FormControl checkForLength(control: FormControl){ console.log(control); if(control.value.length <= this.charLength && control.value.length > 0){ return { 'lengthError': true } } return null; } text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:forms:formsmodule_i_direktiva_ngmodel&rev=1673515089&do=diff Модуль FormsModule и директива NgModel Для взаимодействия с пользователем в веб-приложениях, как правило применяются формы. В Angular прежде чем использовать формы в компонентах, нам надо импортировать в главном модуле AppModule модуль FormsModule, который позволяет работать с формами: text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:forms:ngmodelgroup&rev=1673515089&do=diff NgModelGroup NgModelGroup - Создает и привязывает экземпляр FormGroup к элементу DOM. Эта директива может использоваться только как дочерний элемент NgForm (в тегах формы). text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:forms:patchvalue_i_setvalue&rev=1673515089&do=diff patchValue() и setValue() Для программного задания форме значений используются методы patchValue() и setValue(). setValue Методу setValue() должен передаваться объект, полностью повторяющий структуру описанной модели формы text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:forms:reactive_forms&rev=1673515089&do=diff Reactive Forms В прошлых темах был описан подход Template-Driven, который концентрировался вокруг шаблона компонента: для работы с формой и ее элементами в шаблоне компонента к элементам html применялись директивы NgModel и NgForm, правила валидации задавались в тегах элементов с помощью атрибутов required и pattern. Но есть альтернативный подход - использование реактивных форм (Reactive Forms). Рассмотрим, в чем он заключается.… text/html 2023-01-12T09:18:09+0000 Anonymous (anonymous@undisclosed.example.com) https://dokuwiki.webmastermsk.ru/doku.php?id=angular:angular2:forms:validacija&rev=1673515089&do=diff валидация Состояние модели Применение директивы ngModel не только устанавливает привязку данных, но и позволяет отслеживать состояние элемента ввода. Для установки состояния Angular применяет к элементам ввода специальные классы