Merge pull request #178 from samdemaeyer/add-required-functionality

Make input field bind to required HTML attribute

addon/components/phone-input.js

@@ -10,6 +10,7 @@ import { isPresent } from '@ember/utils';
     allowDropdown=false
     autoPlaceholder='aggressive'
     disabled=true
+    required=required
     initialCountry='fr'
     number='123'
     onlyCountries=europeanCountries
@@ -25,7 +26,7 @@ import { isPresent } from '@ember/utils';
 export default Component.extend({
   tagName: 'input',
 
-  attributeBindings: ['type', 'disabled'],
+  attributeBindings: ['type', 'disabled', 'required'],
   type: 'tel',
 
   phoneInput: service(),
@@ -43,6 +44,14 @@ export default Component.extend({
      */
     this.disabled = this.disabled || false;
 
+    /**
+     * Setting this to true will make the input field required. This will enabled client side form validation.
+     * Defaults to `false`
+     * @argument required
+     * @type {boolean}
+     */
+    this.required = this.required || false;
+
     /**
       The international phone number. This is the main data supposed
       to be persisted / handled.

tests/dummy/app/pods/docs/components/phone-input/all-options/component.js

@@ -18,6 +18,10 @@ export default Component.extend({
     updateSeparateDialOption(separateDialNumber, metaData) {
       this.set('separateDialNumber', separateDialNumber);
       this.setProperties(metaData);
+    },
+
+    submitForm() {
+      alert('The form has been submitted');
     }
   }
 });

tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs

@@ -46,3 +46,21 @@
 
   {{demo.snippet "phone-input-allow-dropdown-option.hbs"}}
 {{/docs-demo}}
+
+<h2>`required` option</h2>
+{{#docs-demo as |demo|}}
+  {{#demo.example name="phone-input-required-option.hbs"}}
+    <form {{action "submitForm" on="submit"}}>
+      <p>{{phone-input required=true initialCountry="us" number=number}}</p>
+
+      <p>The input is required.</p>
+
+      <p>The input is required and you will not be able to submit the form when the field is empty as the clients-side HTML5 form validation will prvent it.</p>
+
+      <button name="button" type="submit" class="docs-bg-grey-darkest docs-text-white docs-no-underline docs-rounded docs-py-2 docs-px-4">submit</button>
+    </form>
+  {{/demo.example}}
+
+  {{demo.snippet "phone-input-required-option.hbs"}}
+{{/docs-demo}}
+

tests/integration/components/phone-input-test.js

@@ -119,6 +119,18 @@ module('Integration | Component | phone-input', function(hooks) {
     assert.ok(find('input').disabled);
   });
 
+  test('can be required', async function(assert) {
+    this.set('number', null);
+
+    await render(hbs`{{phone-input number=number}}`);
+
+    assert.notOk(find('input').required);
+
+    await render(hbs`{{phone-input required=true number=number}}`);
+
+    assert.ok(find('input').required);
+  });
+
   test('can prevent the dropdown', async function(assert) {
     assert.expect(1);