AngularJS with Breeze - Highlight textarea when required

Question

I am building a SPA with AngularJs and Breeze using VS 2013 project based on John Papa's HotTowel.

We have all the latest nuget packages for Angular, Breeze and BootStrap. One of my requirements is to highlight a text area when the field is invalid (in our case required). This functionality has been implemented with many other fields in the app (primarily input and select fields) and works just fine. However, when I try to apply the data-ng-required directive to the textarea, I do not get the red outline around the textarea.

After some digging I found a fix for this by modifying the breeze.directives.css file:

Before:

input:invalid,
select:invalid {
    border: red solid 1px !important;
    border-left: 5px solid red !important;
}
span.z-decorator span.invalid,
input:invalid + .z-decorator > .invalid,
select:invalid + .z-decorator > .invalid {
    visibility: visible;
    display: inline-block;
    background-color: rgb(189, 54, 47);
    margin: 0.3em 0 0 1em;
    padding: 4px 10px;
    -ms-border-radius: 3px 3px 3px 3px !important;
    border-radius: 3px 3px 3px 3px !important;
    background-position: 15px center;
    background-repeat: no-repeat;
    -webkit-box-shadow: 0 0 12px #999999;
    -ms-box-shadow: 0 0 12px #999999;
    box-shadow: 0 0 12px #999999;
    color: #ffffff;
    -ms-opacity: 0.8;
    opacity: 0.8;
    z-index: 20;
}

select:invalid + .z-decorator > .invalid {
    margin: 0.1em 0 0 1em;
}

After:

input:invalid,
textarea:invalid,
select:invalid {
     border: red solid 1px !important;
     border-left: 5px solid red !important;
}
span.z-decorator span.invalid,
input:invalid + .z-decorator > .invalid,
textarea:invalid + .z-decorator > .invalid,
select:invalid + .z-decorator > .invalid {
    visibility: visible;
    display: inline-block;
    background-color: rgb(189, 54, 47);
    margin: 0.3em 0 0 1em;
    padding: 4px 10px;
    -ms-border-radius: 3px 3px 3px 3px !important;
    border-radius: 3px 3px 3px 3px !important;
    background-position: 15px center;
    background-repeat: no-repeat;
    -webkit-box-shadow: 0 0 12px #999999;
    -ms-box-shadow: 0 0 12px #999999;
    box-shadow: 0 0 12px #999999;
    color: #ffffff;
    -ms-opacity: 0.8;
    opacity: 0.8;
    z-index: 20;
}

select:invalid + .z-decorator > .invalid {
    margin: 0.1em 0 0 1em;
}

I simply inserted the following: "textarea:invalid," in the definition of each class

This gives the results I was expecting, however, I really did not want to modify the breeze.directives.css file as this could get over-written the next time we update the breeze files.

To prevent this, I copied the both sections of the css to the bottom of our custometheme.css file where we add customizations then modified them to only point to the textarea:invalid.

My questions is, does anybody know of a reason they left this functionality out? Might this cause problems later?

I did some fairly extensive research to find the solution to this problem and was not able to find any references to other people running into this.

Anyone else run into this?

Answer 1

I'm afraid the breeze directives are more of a proof of concept. That's one reason they are in Breeze Labs.

That said, we take pull requests and I have no objection to adding a textarea selector.