New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

maxlength/minlength attribute broke 2-way databinding #145

Open
rolandocc opened this Issue Jun 19, 2015 · 8 comments

Comments

Projects
None yet
6 participants
@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

This comment has been minimized.

Show comment
Hide comment
@andresmatasuarez

andresmatasuarez Aug 20, 2015

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

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

@deeg

This comment has been minimized.

Show comment
Hide comment
@deeg

deeg Oct 16, 2015

Member

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

Member

deeg commented Oct 16, 2015

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

@deeg

This comment has been minimized.

Show comment
Hide comment
@deeg

deeg Oct 20, 2015

Member

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.

Member

deeg commented Oct 20, 2015

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.

@deeg deeg changed the title from maxlength attribute broke 2-way databinding to maxlength/minlength attribute broke 2-way databinding Oct 20, 2015

@deeg deeg self-assigned this Oct 20, 2015

@deeg deeg added this to the 0.0.11 milestone Oct 20, 2015

@deeg deeg modified the milestones: 0.0.13, 0.0.12 Dec 21, 2015

@deeg deeg removed their assignment Jan 10, 2016

@deeg deeg added the PRs please! label Jan 10, 2016

@deeg deeg modified the milestones: 0.0.13, 0.0.14 Jan 10, 2016

@deeg deeg modified the milestones: 0.0.14, 0.0.15 Feb 17, 2016

@lommez

This comment has been minimized.

Show comment
Hide comment
@lommez

lommez Apr 29, 2016

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

lommez commented Apr 29, 2016

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

@andresmatasuarez

This comment has been minimized.

Show comment
Hide comment
@andresmatasuarez

andresmatasuarez May 3, 2016

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

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

This comment has been minimized.

Show comment
Hide comment
@rodneyjoyce

rodneyjoyce Sep 24, 2016

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

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

@sameerinfodb

This comment has been minimized.

Show comment
Hide comment
@sameerinfodb

sameerinfodb Oct 15, 2016

@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 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

This comment has been minimized.

Show comment
Hide comment
@andresmatasuarez

andresmatasuarez Nov 10, 2016

@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

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment