CRM-21335 - crmUi - Allow forcing the required `*` flag
authorTim Otten <totten@civicrm.org>
Mon, 23 Oct 2017 21:28:48 +0000 (14:28 -0700)
committerTim Otten <totten@civicrm.org>
Mon, 23 Oct 2017 21:28:48 +0000 (14:28 -0700)
The `crm-ui-field` autodetects whether the element is required by inspecting
the Angular form model. However, in CRM-21335, we have a scenario where this
inspection fails. (There are other possible scenarios -- eg generally, if the
apparent field element is not actually a well-behaved+singular Angular form element.)

This revision adds a new option to make the field *render* as required even
if there's no underlying form ngModel element.

Ex:

```html
<div crm-ui-field="{name: 'subform.recipients', title: ts('Recipients'), required: true}">...</div>
```

ang/crmUi.js
ang/crmUi/field.html

index b8640ef29cdd52c2484bf3bd76ef5ab92c9895ee..a66334015a256336d4a7bd7af57d51e46706544d 100644 (file)
     // example: <div crm-ui-field="{title: ts('My Field')}"> {{mydata}} </div>
     // example: <div crm-ui-field="{name: 'subform.myfield', title: ts('My Field')}"> <input crm-ui-id="subform.myfield" name="myfield" /> </div>
     // example: <div crm-ui-field="{name: 'subform.myfield', title: ts('My Field')}"> <input crm-ui-id="subform.myfield" name="myfield" required /> </div>
-    // example: <div crm-ui-field="{name: 'subform.myfield', title: ts('My Field'), help: hs('help_field_name')}"> {{mydata}} </div>
+    // example: <div crm-ui-field="{name: 'subform.myfield', title: ts('My Field'), help: hs('help_field_name'), required: true}"> {{mydata}} </div>
     .directive('crmUiField', function() {
       // Note: When writing new templates, the "label" position is particular. See/patch "var label" below.
       var templateUrls = {
           // immediately for initialization. Use retries/retryDelay to initialize such elements.
           var init = function (retries, retryDelay) {
             var input = $('#' + id);
-            if (input.length === 0) {
+            if (input.length === 0 && !attrs.crmUiForceRequired) {
               if (retries) {
                 $timeout(function(){
                   init(retries-1, retryDelay);
               return;
             }
 
+            if (attrs.crmUiForceRequired) {
+              scope.crmIsRequired = true;
+              return;
+            }
+
             var tgtScope = scope;//.$parent;
             if (attrs.crmDepth) {
               for (var i = attrs.crmDepth; i > 0; i--) {
index aca140d29ed0c3c5253faa61c411b98003d603db..da6521a69e25677f38c0686af2b04feba00fee26 100644 (file)
@@ -1,5 +1,5 @@
 <div class="label">
-  <label crm-ui-for="{{crmUiField.name}}" crm-depth="1">{{crmUiField.title}}</label>
+  <label crm-ui-for="{{crmUiField.name}}" crm-depth="1" crm-ui-force-required="{{crmUiField.required}}">{{crmUiField.title}}</label>
   <a crm-ui-help="help" ng-if="help"></a>
 </div>
 <div class="content" ng-transclude></div>