From: Tim Otten <totten@civicrm.org>
Date: Mon, 23 Oct 2017 21:28:48 +0000 (-0700)
Subject: CRM-21335 - crmUi - Allow forcing the required `*` flag
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=3ca16b892cd0e02907bcc623a99e208d3148de38;p=civicrm-core.git

CRM-21335 - crmUi - Allow forcing the required `*` flag

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>
```
---

diff --git a/ang/crmUi.js b/ang/crmUi.js
index b8640ef29c..a66334015a 100644
--- a/ang/crmUi.js
+++ b/ang/crmUi.js
@@ -124,7 +124,7 @@
     // 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 = {
@@ -255,7 +255,7 @@
           // 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);
@@ -264,6 +264,11 @@
               return;
             }
 
+            if (attrs.crmUiForceRequired) {
+              scope.crmIsRequired = true;
+              return;
+            }
+
             var tgtScope = scope;//.$parent;
             if (attrs.crmDepth) {
               for (var i = attrs.crmDepth; i > 0; i--) {
diff --git a/ang/crmUi/field.html b/ang/crmUi/field.html
index aca140d29e..da6521a69e 100644
--- a/ang/crmUi/field.html
+++ b/ang/crmUi/field.html
@@ -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>