Merge pull request #5200 from dimagi/fix-case-list-property-validation

Fix case list/detail property validation
dimagi · Jan 5, 2015 · 969796b · 969796b
2 parents b26d51d + 08d30d2
commit 969796b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/corehq/apps/app_manager/static/app_manager/js/detail-screen-config.js b/corehq/apps/app_manager/static/app_manager/js/detail-screen-config.js
@@ -302,7 +302,20 @@ var DetailScreenConfig = (function () {
                 {label: "Case", value: "case"}
             ]).val(this.original.model);
             this.field = uiElement.input().val(this.original.field).setIcon(icon);
+
+            // Make it possible to observe changes to this.field
+            // note that observableVal is read only!
+            // Writing to it will not update the value of the this.field text input
+            this.field.observableVal = ko.observable(this.field.val());
+            this.field.on("change", function(){
+                that.field.observableVal(that.field.val());
+            });
+
             this.format_warning = DetailScreenConfig.field_format_warning.clone().hide();
+            this.showWarning = ko.computed(function() {
+                // True if an invalid property name warning should be displayed.
+                return this.field.observableVal() && !DetailScreenConfig.field_val_re.test(this.field.observableVal());
+            }, this);
 
             (function () {
                 var i, lang, visibleVal = "", invisibleVal = "";

diff --git a/corehq/apps/app_manager/templates/app_manager/partials/case_list_properties.html b/corehq/apps/app_manager/templates/app_manager/partials/case_list_properties.html
@@ -24,11 +24,10 @@
                 <td class="detail-screen-icon" data-bind="jqueryElement: $grip, visible: $root.edit"></td>
                 <!--ko if: !isTab -->
                     <td class="detail-screen-field control-group"
-                        data-bind="css: {error: field.value && !DetailScreenConfig.field_val_re.test(field.value)}">
+                        data-bind="css: {error: showWarning}">
                         <div data-bind="html: CC_DETAIL_SCREEN.getFieldHtml(field.val()), visible: !field.edit"></div>
                         <div data-bind="jqueryElement: field.ui, visible: field.edit"></div>
-                        <div data-bind="jqueryElement: format_warning,
-                                        visible: field.value && !DetailScreenConfig.field_val_re.test(field.value)"></div>
+                        <div data-bind="jqueryElement: format_warning, visible: showWarning"></div>
                     </td>
                     <td class="detail-screen-header" data-bind="jqueryElement: header.ui"></td>
                     <td class="detail-screen-format" data-bind="jqueryElement: $format"></td>