From 4ef976ef7f6bb671dd5bec3be18e6d6bc0eee5e3 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 26 May 2022 14:27:03 -0400
Subject: [PATCH] Afform - Implement client-side validation of required fields

---
 ext/afform/core/Civi/Afform/AfformMetadataInjector.php | 5 +++++
 ext/afform/core/ang/af/afField.html                    | 1 +
 ext/afform/core/ang/af/afForm.component.js             | 7 +++++++
 ext/afform/core/ang/af/fields/ChainSelect.html         | 2 +-
 ext/afform/core/ang/af/fields/CheckBox.html            | 2 +-
 ext/afform/core/ang/af/fields/Date.html                | 2 +-
 ext/afform/core/ang/af/fields/EntityRef.html           | 2 +-
 ext/afform/core/ang/af/fields/File.html                | 1 +
 ext/afform/core/ang/af/fields/Number.html              | 2 +-
 ext/afform/core/ang/af/fields/Text.html                | 2 +-
 ext/afform/core/ang/af/fields/TextArea.html            | 2 +-
 11 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/ext/afform/core/Civi/Afform/AfformMetadataInjector.php b/ext/afform/core/Civi/Afform/AfformMetadataInjector.php
index bf39499559..7b8eeafaf9 100644
--- a/ext/afform/core/Civi/Afform/AfformMetadataInjector.php
+++ b/ext/afform/core/Civi/Afform/AfformMetadataInjector.php
@@ -30,6 +30,11 @@ class AfformMetadataInjector {
         try {
           $module = \Civi::service('angular')->getModule(basename($path, '.aff.html'));
           $meta = \Civi\Api4\Afform::get(FALSE)->addWhere('name', '=', $module['_afform'])->setSelect(['join_entity', 'entity_type'])->execute()->first();
+
+          // Add ngForm directive to afForm controllers
+          foreach (pq('af-form[ctrl]') as $afForm) {
+            pq($afForm)->attr('ng-form', $module['_afform']);
+          }
         }
         catch (\Exception $e) {
         }
diff --git a/ext/afform/core/ang/af/afField.html b/ext/afform/core/ang/af/afField.html
index 88e226c43b..1965f74c7f 100644
--- a/ext/afform/core/ang/af/afField.html
+++ b/ext/afform/core/ang/af/afField.html
@@ -1,5 +1,6 @@
 <label class="crm-af-field-label" ng-if=":: $ctrl.defn.label" for="{{:: fieldId }}">
   {{:: $ctrl.defn.label }}
+  <span class="crm-marker" title="{{:: ts('Required') }}" ng-if=":: $ctrl.defn.required">*</span>
 </label>
 <p class="crm-af-field-help-pre" ng-if=":: $ctrl.defn.help_pre">{{:: $ctrl.defn.help_pre }}</p>
 <div class="crm-af-field" ng-include="'~/af/fields/' + $ctrl.defn.input_type + '.html'"></div>
diff --git a/ext/afform/core/ang/af/afForm.component.js b/ext/afform/core/ang/af/afForm.component.js
index dbaa9c9104..eae28a02c7 100644
--- a/ext/afform/core/ang/af/afForm.component.js
+++ b/ext/afform/core/ang/af/afForm.component.js
@@ -4,6 +4,9 @@
     bindings: {
       ctrl: '@'
     },
+    require: {
+      ngForm: 'form'
+    },
     controller: function($scope, $element, $timeout, crmApi4, crmStatus, $window, $location, $parse, FileUploader) {
       var schema = {},
         data = {},
@@ -135,6 +138,10 @@
       }
 
       this.submit = function() {
+        if (!ctrl.ngForm.$valid) {
+          CRM.alert(ts('Please fill all required fields.'), ts('Form Error'));
+          return;
+        }
         status = CRM.status({});
         $element.block();
 
diff --git a/ext/afform/core/ang/af/fields/ChainSelect.html b/ext/afform/core/ang/af/fields/ChainSelect.html
index d1763602ff..ed756897ad 100644
--- a/ext/afform/core/ang/af/fields/ChainSelect.html
+++ b/ext/afform/core/ang/af/fields/ChainSelect.html
@@ -1 +1 @@
-<input class="form-control" crm-ui-select="{data: select2Options, multiple: $ctrl.defn.input_attrs.multiple, placeholder: $ctrl.defn.input_attrs.placeholder}" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" />
+<input class="form-control" ng-required="$ctrl.defn.required" crm-ui-select="{data: select2Options, multiple: $ctrl.defn.input_attrs.multiple, placeholder: $ctrl.defn.input_attrs.placeholder}" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" />
diff --git a/ext/afform/core/ang/af/fields/CheckBox.html b/ext/afform/core/ang/af/fields/CheckBox.html
index f2edac2a4e..169baa2599 100644
--- a/ext/afform/core/ang/af/fields/CheckBox.html
+++ b/ext/afform/core/ang/af/fields/CheckBox.html
@@ -4,4 +4,4 @@
     <label for="{{ fieldId + opt.id }}">{{:: opt.label }}</label>
   </li>
 </ul>
-<input type="checkbox" ng-if="!$ctrl.defn.options" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" />
+<input type="checkbox" ng-required="$ctrl.defn.required" ng-if="!$ctrl.defn.options" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" />
diff --git a/ext/afform/core/ang/af/fields/Date.html b/ext/afform/core/ang/af/fields/Date.html
index 2707b64a4a..2722191d28 100644
--- a/ext/afform/core/ang/af/fields/Date.html
+++ b/ext/afform/core/ang/af/fields/Date.html
@@ -1,6 +1,6 @@
 <input ng-if=":: !$ctrl.defn.search_range" class="form-control" crm-ui-datepicker=":: $ctrl.defn.input_attrs" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" />
 <div ng-if=":: $ctrl.defn.search_range" class="form-inline">
-  <input class="form-control" crm-ui-datepicker=":: $ctrl.inputAttrs[1]" id="{{:: fieldId }}1" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]['>=']" />
+  <input class="form-control" ng-required="$ctrl.defn.required" crm-ui-datepicker=":: $ctrl.inputAttrs[1]" id="{{:: fieldId }}1" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]['>=']" />
   <span class="af-field-range-sep">-</span>
   <input class="form-control" crm-ui-datepicker=":: $ctrl.inputAttrs[2]" id="{{:: fieldId }}2" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]['<=']" />
 </div>
diff --git a/ext/afform/core/ang/af/fields/EntityRef.html b/ext/afform/core/ang/af/fields/EntityRef.html
index 2874725fbf..70cb8d2284 100644
--- a/ext/afform/core/ang/af/fields/EntityRef.html
+++ b/ext/afform/core/ang/af/fields/EntityRef.html
@@ -1 +1 @@
-<input class="form-control" id="{{:: fieldId }}" ng-model="getSetSelect" ng-model-options="{getterSetter: true}" crm-entityref="{entity: $ctrl.defn.fk_entity, select: {multiple: !!$ctrl.defn.input_attrs.multiple, placeholder: $ctrl.defn.input_attrs.placeholder}}" >
+<input class="form-control" id="{{:: fieldId }}" ng-required="$ctrl.defn.required" ng-model="getSetSelect" ng-model-options="{getterSetter: true}" crm-entityref="{entity: $ctrl.defn.fk_entity, select: {multiple: !!$ctrl.defn.input_attrs.multiple, placeholder: $ctrl.defn.input_attrs.placeholder}}" >
diff --git a/ext/afform/core/ang/af/fields/File.html b/ext/afform/core/ang/af/fields/File.html
index 1412e80138..c02d56d8bb 100644
--- a/ext/afform/core/ang/af/fields/File.html
+++ b/ext/afform/core/ang/af/fields/File.html
@@ -1,3 +1,4 @@
 <input type="file" nv-file-select
+       ng-required="$ctrl.defn.required"
        uploader="$ctrl.afFieldset.afFormCtrl.fileUploader"
        options="{crmApiParams: $ctrl.getFileUploadParams}">
diff --git a/ext/afform/core/ang/af/fields/Number.html b/ext/afform/core/ang/af/fields/Number.html
index 2675bcc865..3980ec65a8 100644
--- a/ext/afform/core/ang/af/fields/Number.html
+++ b/ext/afform/core/ang/af/fields/Number.html
@@ -1,4 +1,4 @@
-<input ng-if=":: !$ctrl.defn.search_range" class="form-control" type="number" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" placeholder="{{:: $ctrl.defn.input_attrs.placeholder }}" >
+<input ng-if=":: !$ctrl.defn.search_range" class="form-control" ng-required="$ctrl.defn.required" type="number" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" placeholder="{{:: $ctrl.defn.input_attrs.placeholder }}" >
 <div ng-if=":: $ctrl.defn.search_range" class="form-inline">
   <input class="form-control" type="number" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]['>=']" placeholder="{{:: $ctrl.defn.input_attrs.placeholder }}" >
   <span class="af-field-range-sep">-</span>
diff --git a/ext/afform/core/ang/af/fields/Text.html b/ext/afform/core/ang/af/fields/Text.html
index 862fa07322..fe9c3cf138 100644
--- a/ext/afform/core/ang/af/fields/Text.html
+++ b/ext/afform/core/ang/af/fields/Text.html
@@ -1,4 +1,4 @@
-<input ng-if=":: !$ctrl.defn.search_range" class="form-control" type="text" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" placeholder="{{:: $ctrl.defn.input_attrs.placeholder }}" >
+<input ng-if=":: !$ctrl.defn.search_range" class="form-control" type="text" ng-required="$ctrl.defn.required" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" placeholder="{{:: $ctrl.defn.input_attrs.placeholder }}" >
 <div ng-if=":: $ctrl.defn.search_range" class="form-inline">
   <input class="form-control" type="text" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]['>=']" placeholder="{{:: $ctrl.defn.input_attrs.placeholder }}" >
   <span class="af-field-range-sep">-</span>
diff --git a/ext/afform/core/ang/af/fields/TextArea.html b/ext/afform/core/ang/af/fields/TextArea.html
index 6ded2d4f1a..3d10e3acbf 100644
--- a/ext/afform/core/ang/af/fields/TextArea.html
+++ b/ext/afform/core/ang/af/fields/TextArea.html
@@ -1 +1 @@
-<textarea class="crm-form-textarea" id="{{:: fieldId }}" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" ></textarea>
+<textarea class="crm-form-textarea" id="{{:: fieldId }}" ng-required="$ctrl.defn.required" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" ></textarea>
-- 
2.25.1