UI/Fix form validation issues

changelog/15560.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: fix form validations ignoring default values and disabling submit button 
+```

ui/app/utils/validators.js

@@ -3,17 +3,20 @@ import { isPresent } from '@ember/utils';
 export const presence = (value) => isPresent(value);
 
 export const length = (value, { nullable = false, min, max } = {}) => {
-  let isValid = nullable;
-  if (typeof value === 'string') {
-    const underMin = min && value.length < min;
-    const overMax = max && value.length > max;
-    isValid = underMin || overMax ? false : true;
+  if (!min && !max) return;
+  // value could be an integer if the attr has a default value of some number
+  const valueLength = value?.toString().length;
+  if (valueLength) {
+    const underMin = min && valueLength < min;
+    const overMax = max && valueLength > max;
+    return underMin || overMax ? false : true;
   }
-  return isValid;
+  return nullable;
 };
 
 export const number = (value, { nullable = false, asString } = {}) => {
-  if (!value) return nullable;
+  // since 0 is falsy, !value is true even though 0 is valid here
+  if (!value && value !== 0) return nullable;
   if (typeof value === 'string' && !asString) {
     return false;
   }

ui/lib/core/addon/components/form-field.hbs

@@ -261,7 +261,7 @@
           readonly={{this.isReadOnly}}
           autocomplete="off"
           spellcheck="false"
-          value={{or (get @model this.valuePath) @attr.options.defaultValue}}
+          value={{or @attr.options.defaultValue (get @model this.valuePath)}}
           onchange={{this.onChangeWithEvent}}
           onkeyup={{this.handleKeyUp}}
           class="input {{if this.validationError 'has-error-border'}}"

ui/lib/core/addon/components/form-field.js

@@ -85,7 +85,7 @@ export default class FormFieldComponent extends Component {
   get validationError() {
     const validations = this.args.modelValidations || {};
     const state = validations[this.valuePath];
-    return state && !state.isValid ? state.errors.join('. ') : null;
+    return state && !state.isValid ? state.errors.join(' ') : null;
   }
 
   onChange() {

ui/tests/unit/utils/validators-test.js

@@ -22,11 +22,17 @@ module('Unit | Util | validators', function (hooks) {
     check(null);
     assert.false(isValid, 'Invalid when nullable is false');
     check('12');
-    assert.false(isValid, 'Invalid when not min length');
+    assert.false(isValid, 'Invalid when string not min length');
     check('123456');
-    assert.false(isValid, 'Invalid when over max length');
+    assert.false(isValid, 'Invalid when string over max length');
     check('1234');
-    assert.true(isValid, 'Valid when in between min and max length');
+    assert.true(isValid, 'Valid when string between min and max length');
+    check(12);
+    assert.false(isValid, 'Invalid when integer not min length');
+    check(123456);
+    assert.false(isValid, 'Invalid when integer over max length');
+    check(1234);
+    assert.true(isValid, 'Valid when integer between min and max length');
   });
 
   test('it should validate number', function (assert) {
@@ -47,5 +53,9 @@ module('Unit | Util | validators', function (hooks) {
     assert.true(isValid, 'Valid for number as string');
     check('foo');
     assert.false(isValid, 'Invalid for string that is not a number');
+    check(0);
+    assert.true(isValid, 'Valid for 0 as an integer');
+    check('0');
+    assert.true(isValid, 'Valid for 0 as a string');
   });
 });