Реактивные формы (reactive forms) Angular 5 (2+) Часть 1

[shuron]

В чем таки достоинства Reactive forms в сравнении с Template-driven?
Template-driven вариант мне кажется более интуитивным и простым. Может быть это связано с тем что я не видел каких-то особых ситуаций ( Я во фронтэнде только набегами, раз в пятилетку, на ангуляре первый серьезный проект)? Мог-бы кто-то пролить свет на это?

[klimentRu]

В официальной документации написано, что это просто 2 разных подхода со своими плюсами и минусами. Можно прочитать ne.

При работе с большими и сложными формами реактивный подход удобнее по следующим причинам:

• Не нужно создавать для каждого контрола свойство. Все находится в дереве формы;
• Вся логика содержится в одном компоненте. Нет «размытия» по шаблону;
• Легче производить манипуляции с контролами за счет встроенных методов;
• Подписка на изменение контрола происходит не через обработчик превязанный к шаблону, а через подписку(subscribe);
• Легче тестировать.

[Vadem]

Не нужно создавать для каждого контрола свойство. Все находится в дереве формы;

Разве в случае Template-driven подхода обязательно создавать для каждого контрола свойство?
Там же тоже можно получить доступ к свойству value у FormGroup.
Например, если у вас в шаблоне есть форма:

<form #myForm="ngForm">
  <input name="firstName" ngModel />
</form>

То в компоненте можно писать так:

@ViewChild('myForm') myForm: NgForm;

someMethod() {
  console.log(this.myForm.form.value.firstName);
}

[klimentRu]

Template-driven вариант мне кажется более интуитивным и простым.

По моему получение формы через ViewChild менее удобный и точно менее понятный способ, чем описание в компоненте всй формы с валидациями. Особенно если форма большая.

Из официальной документации:

Neither is «better». They're two different architectural paradigms, with their own strengths and weaknesses. Choose the approach that works best for you. You may decide to use both in the same application.

Так что не стоит холиварить. В некоторых ситуациях использование template-driven forms может быть удобнее чем reactive forms.

[Vadem]

Спасибо за ответ.
Тоже считаю, что получение формы через ViewChild неудобный и неочевидный способ.
Я не холивара ради, а понимания для.

[dreamseeker92]

автор забыл упомянуть, что можно создавать группы внутри групп. Это важно для компонетизации на мой взгляд. Так же для новичков лучше засветить ControlValueAccessor. В целом статья информативная

[klimentRu]

Про вложенные группы и другие более сложные кейсы напишу во второй части. Тут хотелось на простом примере показать как начать работать с реактивными формами.

[kentov]

на vue.js понятней и меньше писать ))

[klimentRu]

Сомневаюсь, что в работе со сложными формами vue обладает нужными инструментами. Такими как: динамические валидации, динамическое добавление контролов, и прочее…
Если можно, то пример в студию)

[MOTORIST]

Не обязательно гонять все поля формы на ошибки, можно просто заблокировать кнопку отправки:
<button type=«submit» [disabled]="!reactiveForm.valid">

[klimentRu]

Согласен, но в моей практике был кейс, когда надо было делать именно подсветку не валидных контролов.
Подумал, что это более интересный вариант.

[Vadem]

Часто вижу, что пишут именно так:

[disabled]="!reactiveForm.valid"

Хотя кажется, что проще писать вот так:

[disabled]="reactiveForm.invalid"

Есть какие-то плюсы у первого подхода?

[klimentRu]

Разницы в работе нет. Только удобство чтения.

[Druu]

disabled не рекомендуется использовать с reactive forms

[pharrell]

Почему?

[klimentRu]

Потому-что лучше дизейблить в классе компонента.

this.myForm.get("myControl").disable();

[zvrks]

Template-driven не подойдет, если требуется взять данные из группы инпутов и записать их как массив, придется создавать для каждого инпута отдельную переменную. В Случае с FormBuilder определение формы делается в одной функции и все поля, включая вложенную структуру, хранятся в одной переменной, что удобно для отправки на сервер.