Afform - Implement client-side validation of required fields

ext/afform/core/Civi/Afform/AfformMetadataInjector.php

@@ -30,6 +30,11 @@ public static function preprocess($e) {
         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) {
         }
@@ -169,7 +174,7 @@ private static function getField(string $entityName, string $fieldName, string $
     $params = [
       'action' => $action,
       'where' => [['name', 'IN', $namesToMatch]],
-      'select' => ['name', 'label', 'input_type', 'input_attrs', 'help_pre', 'help_post', 'options', 'fk_entity'],
+      'select' => ['name', 'label', 'input_type', 'input_attrs', 'help_pre', 'help_post', 'options', 'fk_entity', 'required'],
       'loadOptions' => ['id', 'label'],
       // If the admin included this field on the form, then it's OK to get metadata about the field regardless of user permissions.
       'checkPermissions' => FALSE,

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>

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();
 

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]" />

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]" />

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>

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}}" >

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}">

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>

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>

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>