# Optional bound attributes

**URL:** <https://discourse.aurelia.io/t/optional-bound-attributes/4386>\
**Category:** Best Practices\
**Created:** [August 27, 2021, 7:13am UTC](https://discourse.aurelia.io/t/optional-bound-attributes/4386 "2021-08-27T07:13:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mreiche](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mreiche/32/1912_2.png) [@mreiche](https://discourse.aurelia.io/u/mreiche)\
**Post date:** [August 27, 2021, 7:13am UTC](https://discourse.aurelia.io/t/optional-bound-attributes/4386/1 "2021-08-27T07:13:03Z")

</div>

Is it possible to bind attributes when it’s is !null or !undefined only?

Example: I have an input element with a pattern attribute.

```auto
<input pattern.bind="_pattern"/>

```

But when `_pattern` is null or empty, the resulting HTML looks like

```auto
<input pattern="null"/>

```

which is not the same as

```auto
<input/>

```

My solution would be

```auto
pattern="${_pattern?_pattern:'.*'}"

```

but that feels wrong to me so I ask for better approaches.

Best,  
Mike

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [August 27, 2021, 8:04am UTC](https://discourse.aurelia.io/t/optional-bound-attributes/4386/2 "2021-08-27T08:04:45Z")

</div>

Aurelia generally, and `.bind` specifically, by default works with property, so `null/undefined` will be assigned as-is to the property `pattern` of an `<input/>` element. You can have the above effect if you tell Aurelia to treat it as an attribute binding, via either following syntax:

```auto
<input pattern.attr="_pattern"/>

<input pattern.bind="_pattern & attr"/>

```

---

<div class="post-metadata">

**Author:** ![avrahamcool](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/avrahamcool/32/368_2.png) [@avrahamcool](https://discourse.aurelia.io/u/avrahamcool)\
**Post date:** [August 27, 2021, 8:31am UTC](https://discourse.aurelia.io/t/optional-bound-attributes/4386/3 "2021-08-27T08:31:19Z")

</div>

is this au1 or au2? or both?  
where is this documented?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [August 27, 2021, 9:36am UTC](https://discourse.aurelia.io/t/optional-bound-attributes/4386/4 "2021-08-27T09:36:51Z")

</div>

`& attr` is for both version. `.attr` is only for v2. In v1, you can have a look at it in this GH issue [Support assignment of attribute litterals via interpolation · Issue #106 · aurelia/templating-binding · GitHub](https://github.com/aurelia/templating-binding/issues/106)  
The implementation in v2 is different with the code example there, and is also better.

For the doc, I think it’s not doc’d properly in both versions. Will add it 👍

---

<div class="post-metadata">

**Author:** ![mreiche](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mreiche/32/1912_2.png) [@mreiche](https://discourse.aurelia.io/u/mreiche)\
**Post date:** [August 27, 2021, 10:05am UTC](https://discourse.aurelia.io/t/optional-bound-attributes/4386/5 "2021-08-27T10:05:33Z")

</div>

For some reason, this doesn’t work for me.

```auto
<input pattern.bind="definition.scheme.textRegex & attr"/>

```

still produces

```auto
<input pattern/>

```

![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/9/943b547f3ab9ab5337179373c64920dfb4305d88.png)

Edit: Fixed. I had to reset the value to `null` before.

```auto
bind() {
        if (this.definition.scheme.textRegex?.length === 0) {
            this.definition.scheme.textRegex = null;
        }
}

```

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [August 27, 2021, 10:12am UTC](https://discourse.aurelia.io/t/optional-bound-attributes/4386/6 "2021-08-27T10:12:38Z")

</div>

Glad you got it working. A simple repro here in case you need to verify anything [https://gist.dumber.app/?gist=e90b288be1629f308a020e33982af478](https://gist.dumber.app/?gist=e90b288be1629f308a020e33982af478)