maxlength/minlength attribute broke 2-way databinding

[rolandocc]

I had this code:

<textarea ui-tinymce="{trusted: true}" id="tinymceEmailCuerpo"
   aria-label="Cuerpo"
  maxlength="100"
   ng-model="plantillaCorreo.entidad.Cuerpo"></textarea>

This cause the model var "plantillaCorreo.entidad.Cuerpo" becomes undefined, also printing {{plantillaCorreo.entidad.Cuerpo}} displays nothing and of course the 2-way databinding stops working.

I was trying to figure it out the reason without success.

[andresmatasuarez]

+1. Had the same problem, ended up removing ng-maxlength directive and implementing a custom one that does exactly the same. Not cool.

[deeg]

Please update issue with a Plunker or Fiddle. I am happy to look into fixing it.

[deeg]

Adding Plunker for good measure.

It is still an issue with the latest release (v.0.0.10). I will continue looking into fixing it.

[lommez]

Is there a workaround for using ng-maxlength or maxlength?

[andresmatasuarez]

I am using the following directive as a workaround, without specifying the maxlength attribute. I know it's not perfect, I didn't have the time to delve deeper into Angular formatters and its edge cases, but I think it do the work.

Usage

<textarea ui-tinymce="..." plain-text-max-length="100" />

Directive. Basically, it performs a maxlength validation on the text with its HTML tags ROUGHLY stripped.

'use strict'

app = angular.module 'dashboard'

stripHtmlTags = v -> String(v).replace /<[^>]+>/gm, ''

app.directive 'plainTextMaxLength', ($filter) ->
  restrict: 'A'
  require: 'ngModel'

  link: (scope, element, attributes, ngModel) ->

    validPlainTextLength = (v) ->
      return true if !v
      stripHtmlTags(v).length <= maxLength

    maxLength = undefined

    scope.$watch attributes.plainTextMaxLength, (newValue, oldValue) ->
      if maxLength != newValue
        maxLength = newValue
        ngModel.$validate()

    ngModel.$validators['plainTextMaxLength'] = (modelValue, viewValue) ->
      if viewValue.$$unwrapTrustedValue
        validPlainTextLength viewValue.$$unwrapTrustedValue()
      else
        validPlainTextLength viewValue

[rodneyjoyce]

I can confirm that this bug is still an issue (Cannot use Min/Max lengths in angular with TinyMCe

[sameerinfodb]

@andresmatasuarez can you share the plunker link with your solution because have tried solution but plain text max length directive was getting strip out of markup.

[andresmatasuarez]

@sameerinfodb sorry for the late response, but here is the plunkr with my custom directive to make length validation work: http://plnkr.co/edit/oAZcHZAmCXYOTckJCPcs?p=preview

[naXa777]

Here's a related discussion on Stack Overflow.