Add validation and error messages for fonts section

Author: Nick Litwin

app/directives/tc-form-fonts/tc-form-fonts.directive.js

@@ -6,13 +6,13 @@
   function tcFormFonts() {
     return {
       restrict: 'E',
+      require: '^form',
       templateUrl: 'directives/tc-form-fonts/tc-form-fonts.html',
       scope: {
         formFonts: '='
       },
-      link: function(scope, element, attrs) {
-        // console.log('scope on font submission directive: ', scope.submissionForm);
-
+      link: function(scope, element, attrs, formController) {
+        scope.submissionForm = formController;
       },
       controller: ['$scope', function($scope) {
         // Must provide React Select component a list with ID, since currently
@@ -35,6 +35,20 @@
           // Find the right font section and change that source value to the value that the user selected
           var id = newFont.id;
           $scope.formFonts[id].source = newFont.value;
+
+          if (newFont.value === 'STUDIO_STANDARD_FONTS_LIST') {
+            $scope.formFonts[id].isFontNameRequired = true;
+            $scope.formFonts[id].isFontNameDisabled = false;
+            $scope.formFonts[id].isFontUrlRequired = false;
+            $scope.formFonts[id].isFontUrlDisabled = false;
+
+          } else if (newFont.value) {
+            $scope.formFonts[id].isFontNameRequired = true;
+            $scope.formFonts[id].isFontNameDisabled = false;
+            $scope.formFonts[id].isFontUrlRequired = true;
+            $scope.formFonts[id].isFontUrlDisabled = false;
+
+          }
         };
 
         $scope.createAdditionalFontFieldset = function() {
@@ -51,7 +65,12 @@
             id: newId,
             source: '',
             name: '',
-            sourceUrl: ''
+            sourceUrl: '',
+            isFontUrlRequired: false,
+            isFontUrlDisabled: true,
+            isFontNameRequired: false,
+            isFontNameDisabled: true,
+            isFontSourceRequired: false
           });
         }
       }]

app/directives/tc-form-fonts/tc-form-fonts.jade

@@ -4,7 +4,7 @@
   dropdown(
     name="'font-source{{$index}}'",
     options="fontList{{$index}}",
-    placeholder="'Select from the list'",
+    placeholder="'Select a provider from the list'",
     searchable="false",
     clearable="false",
     on-change="selectFont",
@@ -15,14 +15,32 @@
     label-text="Font Name",
     placeholder="Select font source to edit field"
     input-value="font.name",
-    input-name="fontName{{$index}}"
+    input-name="fontName{{$index}}",
+    input-required="formFonts[$index].isFontNameRequired",
+    input-disabled="formFonts[$index].isFontNameDisabled"
   )
 
+  .tc-error-messages(
+    ng-show="submissionForm['fontName' + $index].$dirty && submissionForm['fontName' + $index].$invalid"
+    ng-messages="submissionForm['fontName' + $index].$error"
+  )
+    p(ng-message="required") This field is required.
+
   tc-input.fieldset__input(
     label-text="Font URL",
     placeholder="Select font source to edit field",
     input-value="font.sourceUrl",
-    input-name="fontUrl{{$index}}"
+    input-name="fontUrl{{$index}}",
+    input-required="formFonts[$index].isFontUrlRequired",
+    input-disabled="formFonts[$index].isFontUrlDisabled",
+    input-pattern="urlRegEx"
+  )
+
+  .tc-error-messages(
+    ng-show="submissionForm['fontUrl' + $index].$dirty && submissionForm['fontUrl' + $index].$invalid"
+    ng-messages="submissionForm['fontUrl' + $index].$error"
   )
+    p(ng-message="pattern") Please enter a valid url.
+    p(ng-message="required") This field is required.
 
 button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="createAdditionalFontFieldset()") + Add Font

app/submissions/submit-file/submit-file.controller.js

@@ -11,15 +11,17 @@
     vm.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
     vm.rankRegEx = new RegExp(/^[1-9]\d*$/);
     vm.comments = '';
-
-    // New formFonts prop
     vm.formFonts = [{
       id: 0,
       source: '',
       name: '',
-      sourceUrl: ''
+      sourceUrl: '',
+      isFontUrlRequired: false,
+      isFontUrlDisabled: true,
+      isFontNameRequired: false,
+      isFontNameDisabled: true,
+      isFontSourceRequired: false
     }];
-
     vm.submissionForm = {
       files: [],
 
@@ -129,6 +131,7 @@
       vm.submissionsBody.data.submitterComments = vm.comments;
       vm.submissionsBody.data.submitterRank = vm.submissionForm.submitterRank;
 
+      // Process stock art
       if (vm.submissionForm.stockArts[0].description === '') {
         vm.submissionsBody.data.stockArts = [];
       } else {
@@ -139,20 +142,25 @@
         });
       }
 
-      if (vm.submissionForm.fonts[0].source === '') {
+      // Process fonts
+      if (vm.formFonts[0].source === '') {
         vm.submissionsBody.data.fonts = [];
       } else {
-        var fonts = angular.copy(vm.submissionForm.fonts);
+        var fonts = angular.copy(vm.formFonts);
         vm.submissionsBody.data.fonts = fonts.map(function(font) {
           if (font.source) {
             delete font.id;
+            delete font.isFontUrlRequired;
+            delete font.isFontUrlDisabled;
+            delete font.isFontNameRequired;
+            delete font.isFontNameDisabled;
+            delete font.isFontSourceRequired;
             return font;
           }
         });
       }
 
       console.log('ABOUT TO SEND: ', vm.submissionsBody);
-      return;
       SubmissionsService.getPresignedURL(vm.submissionsBody, files);
     }
   }