Формы и кастомные поля ввода в Angular 2+

[neoxack]

<form #formDir="ngForm"
      (ngSubmit)="submit($event)">
  ...
</form>

Страшновато выглядит по сравнению с простым и лаконичным описанием React компонентов

[raveclassic]

Бросьте, вас тут заклюют

[jbubsk]

уже началось

[klerick]

ну-ну)

[sy0]

Если вам не нужно получать экземпляр NgForm в переменную formDir, можно записать даже так:

<form (ngSubmit)="submit($event)">
  ...
</form>

Что может быть лаконичнее?:)

[nitso]

Синтаксис первой версии лаконичнее ;)

<form ng-submit="submit($event)">
    ...
</form>

[skoropadas]

А как на счет динамического disabled? Если биндить свойство disabled за какую нибудь из переменных или даже если просто передать значение disabled прямиком в тег, можно словить warning в консоли. Есть даже тема в официальном репозитории, где команда ангуляра предложило грязное решение этой проблемы.
К примеру у нас есть два связанных выпадающих списка, пока не выбрано значение в первом, второй остается disabled.
Я так понимаю единственное правильно решение данной проблемы будет, подписаться на изменение первого выпадающего списка, и вызывать функцию disable/enable исходя из условия?

[Arta]

https://github.com/angular/angular/issues/11271#issuecomment-289806196?

[aalexeev]

ControlValueAccessor содердит функцию setDisabledState, которая вызывается при изменении disabled статуса.
В реактивных формах разумно вызывать disable() и enable() из модели, а не передавать это атрибутами в шаблон.

export interface ControlValueAccessor {
    /**
     * This function is called when the control status changes to or from "DISABLED".
     * Depending on the value, it will enable or disable the appropriate DOM element.
     *
     * @param isDisabled
     */
    setDisabledState?(isDisabled: boolean): void;
}

[sy0]

Нужно различать атрибут disabled у элемента и статус DISABLED у контрола. Статус DISABLED исключает контрол из валидации, а также из значения его родителя (группы или массива) если таковой имеется. При установке или снятии этого статуса как раз и вызывается метод setDisabledState у ControlValueAccessor. Этот метод, как я написал (правда, не углубляясь в статусы — тему следующей статьи), устанавливает атрибут disabled (или другим путём блокирует для пользователя изменение значения).

Если у вас шаблонная форма, то за статусами контролов следить не нужно, нужно управлять атрибутами. Если же реактивная — следует управлять статусами. Для этого есть упомянутые вами методы disable() и enable(), а также возможность указать значение для метода setValue() в формате {value: 'Значение', disabled: true}.

[x07]

Подскажите, пожалуйста, как менять валидаторы на лету? Например, если в селектлисте выбран Автомобиль, то поле Марка должно стать обязательным. При выборе значения делаю this.myform.setValidators([Validators.maxLength(100), Validators.required]); Ошибок никаких нет, но валидатор почему то не меняется.

[sy0]

Валидатор меняется, а статус — нет, потому что метод setValidators делает простое присваивание. Для изменения статуса должно произойти изменение значения или ручное обновление через метод updateValueAndValidity().

Я сделал для вашего кейса небольшую песочницу.

[x07]

Спасибо!