Add required text to labels based on the model

This commit adds the ability for the form to represent required fields
based on the validations present on the model.

Currently only supports ember-model-validators, but could be extended
easily through the required attribute.

addon/components/field-for.hbs

@@ -22,7 +22,14 @@
     {{did-insert this.registerElement}}
   >
     {{#unless this.hideDefaultLabel}}
-      <LabelFor @label={{this.label}} @controlId={{this.controlId}} @infoText={{this.infoText}} />
+      <LabelFor
+        @label={{this.label}}
+        @controlId={{this.controlId}}
+        @infoText={{this.infoText}}
+        @required={{this.required}}
+        @form={{this.form}}
+        @requiredText={{this.form.requiredText}}
+      />
     {{/unless}}
     {{#if this._showValue}}
       {{#if this.displayValueComponent}}

addon/components/field-for.js

@@ -526,7 +526,9 @@ export default class FieldForComponent extends Component {
    * @public
    */
   @arg(bool)
-  required = false;
+  get required() {
+    return get(this, `form.model.validations.${this.for}.presence`) ?? false;
+  }
 
   /**
    * Whether or not this field is disabled

addon/components/form-for.js

@@ -501,6 +501,16 @@ export default class FormForComponent extends Component {
   @arg(bool)
   enforceRequiredFields = false;
 
+  @arg(bool)
+  get showRequiredIndicator() {
+    return this.formFor.showRequiredIndicator ?? false;
+  }
+
+  @arg(string)
+  get requiredText() {
+    return this.formFor.requiredText;
+  }
+
   /**
    * Resets the dirty model properties to their previous values on the form destruction. Turning this off will
    * leave the model in a dirty state, even when the user navigates away.

addon/components/label-for.hbs

@@ -2,7 +2,7 @@
   {{#if this.customLabelComponent}}
     {{component this.customLabelComponent for=@controlId label=@label}}
   {{else}}
-    <label for="{{@controlId}}" ...attributes>
+    <label for="{{@controlId}}" data-test-label-for ...attributes>
       {{#if (has-block)}}
         {{yield @controlId}}
       {{else}}
@@ -13,9 +13,13 @@
         {{#if this.formFor.customInfoTextComponent}}
           {{component this.formFor.customInfoTextComponent infoText=@infoText}}
         {{else}}
-          <span title="{{@infoText}}">ℹ️</span>
+          <span class="ff-info-text" title="{{@infoText}}">ℹ️</span>
         {{/if}}
       {{/if}}
+
+      {{#if this.showRequiredIndicator}}
+        <span class="ff-required-text">{{this.requiredText}}</span>
+      {{/if}}
     </label>
   {{/if}}
 {{/if}}

addon/components/label-for.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { arg } from 'ember-arg-types';
-import { object, string } from 'prop-types';
+import { object, string, boolean } from 'prop-types';
 import { next } from '@ember/runloop';
 
 export default class LabelFor extends Component {
@@ -20,6 +20,20 @@ export default class LabelFor extends Component {
   @arg(object)
   field;
 
+  @arg(object)
+  form;
+
+  @arg(string)
+  requiredText;
+
+  @arg(boolean)
+  required = false;
+
+  @arg(boolean)
+  get showRequiredIndicator() {
+    return this.required && this.form?.showRequiredIndicator;
+  }
+
   constructor() {
     super(...arguments);
 

addon/services/form-for.js

@@ -31,6 +31,8 @@ export default class FormForService extends Service {
     this.customLabelComponent = this.config.customLabelComponent;
     this.customInfoTextComponent = this.config.customInfoTextComponent;
     this.preventsNavigationByDefault = this.config.preventsNavigationByDefault;
+    this.showRequiredIndicator = this.config.showRequiredIndicator;
+    this.requiredText = this.config.requiredText;
 
     this.router.on('routeWillChange', (transition) => {
       if (

config/environment.js

@@ -12,6 +12,8 @@ module.exports = function (/* environment, appConfig */) {
         useBemClass: false,
         fieldForControlCalloutClasses: 'field-for-control-callout',
         fieldForControlCalloutPosition: 'bottom left',
+        showRequiredIndicator: true,
+        requiredText: '*',
 
         buttonClasses: '',
         buttonActingClass: '',

tests/dummy/app/templates/docs/forms.md

@@ -262,3 +262,9 @@ forms: ```form-for-model-name```
 fields: ```form-for-model-name__field-for-field-name```
 
 buttons: ```form-for-model-name__button-type-button```
+
+## Required Field Text
+
+If a form's model has validations (currently only ember-model-validator) then it can be configured to display a required 
+indicator in the label. This text can be configured at the environment level, and the form level. You can also override
+the required value as an argument.

tests/dummy/app/templates/docs/index.md

@@ -38,6 +38,14 @@ APP: {
     formClasses: 'form',
     fieldForControlCalloutClasses: 'field-for-control-callout',
     fieldForControlCalloutPosition: 'bottom left',
+
+    // bem classes 
+    bemClassPrefix: '',
+    useBemClass: false,
+
+    // required indicator 
+    showRequiredIndicator: true,
+    requiredText: '*',
 
     buttonClasses: '',
     submitButtonClasses: '',

tests/dummy/config/environment.js

@@ -26,6 +26,7 @@ module.exports = function (environment) {
         useBemClass: false,
         fieldForControlCalloutClasses: 'field-for-control-callout',
         fieldForControlCalloutPosition: 'bottom left',
+        requiredText: '*',
 
         buttonClasses: 'a-button',
         buttonActingClass: 'acting',

tests/integration/components/form-for-test.js

@@ -703,4 +703,39 @@ module('Integration | Component | form for', function (hooks) {
     assert.equal(this.validationOptions.only[0], 'foo');
     assert.equal(this.validationOptions.only.length, 1);
   });
+
+  test('displays the required text if the form is configured to do so and an attribute is marked required', async function (assert) {
+    this.model = { foo: null, bar: null, validations: { foo: { presence: true } } };
+
+    await render(hbs`
+      <Form
+      @for={{this.model}}
+      @enforceRequiredFields={{true}}
+      @showRequiredIndicator={{true}}
+      as |form|>
+        <form.field @for='foo' @label='test'/>
+        <form.submit />
+      </Form>
+    `);
+
+    assert.dom('[data-test-field-for="object_foo"] [data-test-label-for]').containsText('*');
+  });
+
+  test('lets you override the required text', async function (assert) {
+    this.model = { foo: null, bar: null, validations: { foo: { presence: true } } };
+
+    await render(hbs`
+      <Form
+      @for={{this.model}}
+      @enforceRequiredFields={{true}}
+      @showRequiredIndicator={{true}}
+      @requiredText="required"
+      as |form|>
+        <form.field @for='foo' @label='test'/>
+        <form.submit />
+      </Form>
+    `);
+
+    assert.dom('[data-test-field-for="object_foo"] [data-test-label-for]').containsText('required');
+  });
 });