Problem

Steps to reproduce:

• Open the Plunker demo
• Enter some data in the field and notice that the description "Enter your name" appears under the field when it is valid
• Clear the contents of the field such that it becomes invalid, and notice that the error message is displayed twice: once in the expected <div> and once in the <div> which is supposed to show the description

This demo uses the latest 1.0.0-alpha.5 code. I've changed the default field template by making the following change to angular-schema-form-bootstap.js on line 125

var path = '/bootstrap/default.html'; var html = '<div class="form-group schema-form-{{form.type}} {{form.htmlClass}}"' + ' ng-class="{\'has-error\': hasError(), \'has-success\': hasSuccess() }">' + ' <label class="control-label" for="{{form.key.join(\'.\')}}"> ' + ' {{form.title}}' + ' </label>' + ' <input ng-show="form.key"' + ' type="{{form.type}}"' + ' sf-changed="form"' + ' placeholder="{{form.placeholder}}"' + ' class="form-control {{form.fieldHtmlClass}}"' + ' id="{{form.key.join(\'.\')}}"' + ' sf-field-model' + ' ng-disabled="form.readonly"' + ' schema-validate="form"' + ' name="{{form.key.join(\'.\')}}">' + ' <div class="help-block" ng-show="(hasError() && errorMessage(schemaError()))"' + ' ng-bind-html="(hasError() && errorMessage(schemaError()))"></div>' + ' <div class="help-block success" ng-show="form.description" sf-message="form.description"></div>' + '</div>';

When using version 0.8.3 this template works as expected, i.e. when a field is valid only the description is shown under the field, and when a field is invalid both the validation message and description are shown under the field.

My Solution

I replaced the following

<div class="help-block" aria-live='assertive' ng-show="(hasError() && errorMessage(schemaError()))" ng-bind-html="(hasError() && errorMessage(schemaError()))"></div> <div class="help-block success" ng-show="form.description" sf-message="form.description"></div>

with:

<div class="help-block" aria-live='assertive' ng-show="(hasError() && errorMessage(schemaError()))" ng-bind-html="(hasError() && errorMessage(schemaError()))"></div> <div class="help-block success" ng-show="form.description" ng-bind-html="form.description"></div>

After making this change, I see both the description and the error message when a field is in an invalid state.

Conclusion

It seems the behaviour of sf-message="form.description" has changed in the two versions, i.e. in 0.8.3 it always returns the description, but in 1.0.0-alpha.5 it returns the error message if the field is in an invalid state.

If this change is retained, it should be documented in an upgrade guide.

Usability (aside)

Personally, I think always showing the field description is preferable from a usability point of view. Typically, the field description provides some hints to the user about how to complete a field, so if a field is invalid, that's likely when it is most useful, so I dislike hiding the description when the field is invalid.

@json-schema-form/angular-schema-form-lead