From 8b762ef312556ff03584483074865a6f8b741f01 Mon Sep 17 00:00:00 2001
From: Sam De Maeyer <sam_demaeyer@hotmail.com>
Date: Thu, 16 Jan 2020 11:53:10 +0100
Subject: [PATCH 1/2] Make input field bind to required HTML attribute

---
 addon/components/phone-input.js                  | 11 ++++++++++-
 tests/integration/components/phone-input-test.js | 12 ++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/addon/components/phone-input.js b/addon/components/phone-input.js
index 295a0454..96db61a7 100644
--- a/addon/components/phone-input.js
+++ b/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.
diff --git a/tests/integration/components/phone-input-test.js b/tests/integration/components/phone-input-test.js
index c5424ee6..9c62bcf8 100644
--- a/tests/integration/components/phone-input-test.js
+++ b/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);
 

From 71de005cfcb6a6b01ade77a9e4dab7d0d12dd44e Mon Sep 17 00:00:00 2001
From: Sam De Maeyer <sam_demaeyer@hotmail.com>
Date: Thu, 16 Jan 2020 12:56:23 +0100
Subject: [PATCH 2/2] Add a playground example

---
 .../phone-input/all-options/component.js       |  4 ++++
 .../phone-input/all-options/template.hbs       | 18 ++++++++++++++++++
 .../integration/components/phone-input-test.js |  2 +-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js b/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js
index f8818498..d7811ee1 100644
--- a/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js
+++ b/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');
     }
   }
 });
diff --git a/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs b/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs
index 19021ac2..68bd136a 100644
--- a/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs
+++ b/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}}
+
diff --git a/tests/integration/components/phone-input-test.js b/tests/integration/components/phone-input-test.js
index 9c62bcf8..a601bf1b 100644
--- a/tests/integration/components/phone-input-test.js
+++ b/tests/integration/components/phone-input-test.js
@@ -127,7 +127,7 @@ module('Integration | Component | phone-input', function(hooks) {
     assert.notOk(find('input').required);
 
     await render(hbs`{{phone-input required=true number=number}}`);
-    
+
     assert.ok(find('input').required);
   });