PHP fwdays conference — Creator of PHPUnit, JetBrains, Yii & more, Kyiv | Online

Сумісність contenteditable HTML-елементів з формами Angular 4+

Якщо у Angular 4 ви спробуєте застосувати директиву [(ngModel)] у елементах з атрибутом contenteditable (тобто не у HTML-формах), наприклад так:

<p contenteditable="true" name="myControlName" [(ngModel)]="myVar"></p>

ви отримаєте приблизно таку помилку:

ERROR Error: No value accessor for form control with name: ’myControlName’

Зазвичай гугл допомагає знаходити рішення в інтернеті, але не в даному випадку. Якось є не багато інфи по цій темі, бачив якісь заплутані рішення, але щоб було «так як треба», то не знайшов швидко.

Тож прийшлось самому написати свою директиву: ng-contenteditable. Може комусь теж згодиться.

LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Ги... вже дві зірочки. Люди можуть це скопіпастити, але ще й питають про ліцензію =).

Можешь в телеграмме спрашивать, такие шутки — @angularkyiv Быстрее будет

Не совсем понятно зачем это нужно, если честно

Может пора посмотреть в сторону реактивных форм и создание кастомных форм контролов из чего угодно

Власне кажучи, я якраз шукав якесь рішення саме для реактивних форм, приклад директиви з шаблонних форм я взяв як простіший спосіб пояснити що я маю на увазі.

Реактивні форми точно так само будуть кидати помилки і не зрозуміють як отримати значення з того, що позначено, наприклад як <p contenteditable="true" formControlName="myControl"></p>

Бачив ось таке питання й «рішення» за допомогою директиви ngDefaultControl. З цією директивою Angular просто не кидає помилки, але елементи з contenteditable="true" все одно не працюють так як форми, внесені значення у них не бачить компонент.

Подписаться на комментарии