One-time bindings

Author: Anthropic

src/bootstrap/checkbox.html

@@ -7,7 +7,7 @@
            sf-field-model
            schema-validate="form"
            class="{{::form.fieldHtmlClass}}"
-           name="{{form.key.slice(-1)[0]}}">
+           name="{{::fieldId(true, false)}}">
     <span ng-bind-html="form.title"></span>
   </label>
   <div class="help-block" sf-message="form.description"></div>

src/bootstrap/checkboxes.html

@@ -14,7 +14,7 @@
              sf-changed="form"
              class="{{::form.fieldHtmlClass}}"
              ng-model="titleMapValues[$index]"
-             name="{{form.key.slice(-1)[0]}}">
+             name="{{::fieldId(true, false)}}">
       <span ng-bind-html="form.titleMap[$index].name"></span>
     </label>
 

src/bootstrap/default.html

@@ -1,6 +1,6 @@
 <div class="form-group {{::form.htmlClass}}"
      ng-class="{ '{{'schema-form-' + form.type}}': true, 'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess(), 'has-feedback': form.feedback !== false }">
-  <label class="control-label {{::form.labelHtmlClass}}" ng-class="{'sr-only': !showTitle()}" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
+  <label class="control-label {{::form.labelHtmlClass}}" ng-class="{'sr-only': !showTitle()}" for="{{::fieldId(true, false)}}">{{form.title}}</label>
 
   <input ng-if="!form.fieldAddonLeft && !form.fieldAddonRight"
          ng-show="::form.key"
@@ -9,12 +9,12 @@
          sf-changed="form"
          placeholder="{{::form.placeholder}}"
          class="form-control {{::form.fieldHtmlClass}}"
-         id="{{form.key.slice(-1)[0]}}"
+         id="{{::fieldId(true, false)}}"
          sf-field-model
          ng-disabled="form.readonly"
          schema-validate="form"
-         name="{{form.key.slice(-1)[0]}}"
-         aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}">
+         name="{{::fieldId(true, false)}}"
+         aria-describedby="{{::fieldId(true, true) + '-status'}}">
 
   <div ng-if="form.fieldAddonLeft || form.fieldAddonRight"
        ng-class="{'input-group': (form.fieldAddonLeft || form.fieldAddonRight)}">
@@ -27,12 +27,12 @@
            sf-changed="form"
            placeholder="{{::form.placeholder}}"
            class="form-control {{::form.fieldHtmlClass}}"
-           id="{{form.key.slice(-1)[0]}}"
+           id="{{::fieldId(true, false)}}"
            sf-field-model
            ng-disabled="form.readonly"
            schema-validate="form"
-           name="{{form.key.slice(-1)[0]}}"
-           aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}">
+           name="{{::fieldId(true, false)}}"
+           aria-describedby="{{::fieldId(true, true) + '-status'}}">
 
     <span ng-if="form.fieldAddonRight"
           class="input-group-addon"
@@ -45,7 +45,7 @@
         aria-hidden="true"></span>
 
   <span ng-if="hasError() || hasSuccess()"
-        id="{{form.key.slice(-1)[0] + 'Status'}}"
+        id="{{::fieldId(true, true) + '-status'}}"
         class="sr-only">{{ hasSuccess() ? '(success)' : '(error)' }}</span>
 
   <div class="help-block" sf-message="form.description"></div>

src/bootstrap/radio-buttons.html

@@ -15,7 +15,7 @@
              sf-field-model
              schema-validate="form"
              ng-value="item.value"
-             name="{{form.key.join('.')}}">
+             name="{{::fieldId(true)}}">
       <span ng-bind-html="item.name"></span>
     </label>
   </div>

src/bootstrap/radios-inline.html

@@ -11,7 +11,7 @@
              ng-disabled="form.readonly"
              sf-field-model
              ng-value="item.value"
-             name="{{form.key.join('.')}}">
+             name="{{::fieldId(true)}}">
       <span ng-bind-html="item.name"></span>
     </label>
   </div>

src/bootstrap/radios.html

@@ -10,7 +10,7 @@
              ng-disabled="form.readonly"
              sf-field-model
              ng-value="item.value"
-             name="{{form.key.join('.')}}">
+             name="{{::fieldId(true)}}">
       <span ng-bind-html="item.name"></span>
     </label>
   </div>

src/bootstrap/select.html

@@ -1,15 +1,16 @@
 <div class="form-group {{::form.htmlClass}} schema-form-select"
      ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess(), 'has-feedback': form.feedback !== false}">
-  <label class="control-label {{::form.labelHtmlClass}}" ng-show="showTitle()">
+  <label class="control-label {{::form.labelHtmlClass}}" ng-show="showTitle()" for="{{::fieldId(true, false)}}">
     {{form.title}}
   </label>
   <select sf-field-model
+          id="{{::fieldId(true, false)}}"
           ng-disabled="form.readonly"
           sf-changed="form"
           class="form-control {{::form.fieldHtmlClass}}"
           schema-validate="form"
           ng-options="item.value as item.name group by item.group for item in form.titleMap"
-          name="{{form.key.slice(-1)[0]}}">
+          name="{{::fieldId(true, false)}}">
   </select>
   <div class="help-block" sf-message="form.description"></div>
 </div>

src/bootstrap/textarea.html

@@ -1,29 +1,29 @@
 <div class="form-group has-feedback {{::form.htmlClass}} schema-form-textarea" ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true &&  hasSuccess()}">
-  <label class="control-label {{::form.labelHtmlClass}}" ng-class="{'sr-only': !showTitle()}" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
+  <label class="control-label {{::form.labelHtmlClass}}" ng-class="{'sr-only': !showTitle()}" for="{{::fieldId(true, false)}}">{{form.title}}</label>
 
   <textarea ng-if="!form.fieldAddonLeft && !form.fieldAddonRight"
             class="form-control {{::form.fieldHtmlClass}}"
-            id="{{form.key.slice(-1)[0]}}"
+            id="{{::fieldId(true, false)}}"
             sf-changed="form"
             ng-attr-placeholder="{{::form.placeholder}}"
             ng-disabled="form.readonly"
             sf-field-model
             schema-validate="form"
-            name="{{form.key.slice(-1)[0]}}"></textarea>
+            name="{{::fieldId(true, false)}}"></textarea>
 
   <div ng-if="form.fieldAddonLeft || form.fieldAddonRight"
        ng-class="{'input-group': (form.fieldAddonLeft || form.fieldAddonRight)}">
     <span ng-if="form.fieldAddonLeft"
           class="input-group-addon"
           ng-bind-html="form.fieldAddonLeft"></span>
     <textarea class="form-control {{::form.fieldHtmlClass}}"
-              id="{{form.key.slice(-1)[0]}}"
+              id="{{::fieldId(true, false)}}"
               sf-changed="form"
               ng-attr-placeholder="{{::form.placeholder}}"
               ng-disabled="form.readonly"
               sf-field-model
               schema-validate="form"
-              name="{{form.key.slice(-1)[0]}}"></textarea>
+              name="{{::fieldId(true, false)}}"></textarea>
     <span ng-if="form.fieldAddonRight"
           class="input-group-addon"
           ng-bind-html="form.fieldAddonRight"></span>