adopted-ember-addons / ember-paper

The Ember approach to Material Design.
https://ember-paper.netlify.app/
MIT License
888 stars 333 forks source link

Fix PaperSelect error message #1164

Open wukongrita opened 4 years ago

wukongrita commented 4 years ago

Hi @miguelcobain , This will add the error message to show on PaperSelect component ( issue #1158 ) So the error message will appear at the bottom of the PaperSelect, like so: image

miguelcobain commented 4 years ago

Thank you, @wukongrita. The problem with this is that it just renders the passed in errors.

You should use this.validationErrorMessages instead, that contains the manually passed in errors as well as other custom validation errors. This was indeed a regression. Here is how it looked like before the refactor: https://github.com/miguelcobain/ember-paper/blob/v1.0.0-beta.1/addon/templates/components/paper-select.hbs#L51-L67

Can you please update this PR?

wukongrita commented 4 years ago

Something like adding:

.
.
.
    @noMatchesMessageComponent="paper-select/no-matches-message"
    @searchMessageComponent="paper-select/search-message"
    @onClose={{this.close}}
    @onOpen={{this.open}}
    @onFocus={{this.focus}}
    @onBlur={{this.blur}}
    as |opt term|>
    {{yield opt term}}
  </PowerSelect>

  {{#unless hideAllMessages}}
    <div class="md-errors-spacer">
      {{#if maxlength}}
        <div class="md-char-counter">{{renderCharCount}}</div>
      {{/if}}
    </div>
    {{#if isInvalidAndTouched}}
      <div class="md-input-messages-animation md-auto-hide" ng-messages>
        {{#each validationErrorMessages as |error index|}}
          <div id="error-{{inputElementId}}-{{index}}"
          class="paper-input-error ng-enter ng-enter-active" ng-message>
            {{error.message}}
          </div>
        {{/each}}
      </div>
    {{/if}}
  {{/unless}}

</md-input-container>

at the addon/components/paper-select/template.hbs ?

wukongrita commented 4 years ago

Thank you, @wukongrita. The problem with this is that it just renders the passed in errors.

You should use this.validationErrorMessages instead, that contains the manually passed in errors as well as other custom validation errors. This was indeed a regression. Here is how it looked like before the refactor: https://github.com/miguelcobain/ember-paper/blob/v1.0.0-beta.1/addon/templates/components/paper-select.hbs#L51-L67

Can you please update this PR?

@miguelcobain , is the updated PR ( https://github.com/miguelcobain/ember-paper/pull/1164/commits/dd42c15a21e6acc4ca06dbccf5b742d7bba538ae ) is what you meant?

wukongrita commented 4 years ago

@miguelcobain any other things that missing from the updated PR?

wukongrita commented 4 years ago

@miguelcobain done, removed the charCount div section...