conditional rendering vaadin-text-field in LitElement

Flow
1

Hello,

It seems that conditonal rendering doesn’t work correctly in vaadin-text-field
This code works :

render() {
      return html`
      <vaadin-text-field 
        id="${this.ref_id}" 
        label="${this.label}" 
        value="${this.value}"
        ?required=${this.required}
		error-message="Required value"
        minlength="${this.min_size}"
        maxlength="${this.max_size}"
        @change='${this._setValue}' 
      ></vaadin-text-field>
      `;
    }

But this one will ignore everything that follow a conditional rendering (including the conditional part) :

render() {
      return html`
      <vaadin-text-field 
        id="${this.ref_id}" 
        label="${this.label}" 
        value="${this.value}"
        ?required=${this.required}
        ${this.required ? html`error-message="Required value"` : html`error-message="Hello World"`}
        minlength="${this.min_size}"
        ${(this.max_size>0) ? html`maxlength="${this.max_size}"` : ''}
        @change='${this._setValue}' 
      ></vaadin-text-field>
      `;
    }

So maxlength won’t work anymore, but minlength neither.

Any Idea ?

Thanks

2

Conditional rendering in lit-html does not work that way. See the documentation:
https://lit-html.polymer-project.org/guide/template-reference#template-structure

“Bindings can only occur in attribute-value and text-content positions.”
“Expressions cannot appear where tag or attribute names would appear”

So, please update your snippet to look like this:

  <vaadin-text-field 
	id="${this.ref_id}" 
	label="${this.label}" 
	value="${this.value}"
	?required="${this.required}"
	error-message="${this.required ? 'Required value' : 'Hello World'}"
	minlength="${this.min_size}"
	maxlength="${this.max_size > 0 ? this.max_size : ''}"
	@change="${this._setValue}" 
  ></vaadin-text-field>
3

Ok thanks