@progressive-development/pd-contact 0.1.42 → 0.1.44

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development Contact component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdContact.js

@@ -85,12 +85,23 @@
      this._errorMap = new Map();
    }
 
+   connectedCallback() {
+    super.connectedCallback();
+    // add validation event listener
+    this.addEventListener('validate-form', this._validateForm);
+  }
+
+  disconnectedCallback() {
+    super.connectedCallback();
+    // add validation event listener
+    this.removeEventListener('validate-form', this._validateForm);
+  }
+
    firstUpdated() {
      this.addEventListener('key-pressed', e => {
        this._errorMap.set(e.detail.name, '');
        super.requestUpdate();
      });
-     this.addEventListener('validate-form', this._validateForm);
    }
 
    render() {
@@ -148,6 +159,7 @@
                    class="quarter2"
                    label="Voornaam"
                    valueName="firstName"
+                   value="${this.contact ? this.contact.firstName : ""}"
                    autoCompleteName="given-name"
                    required
                  ></pd-input>
@@ -156,6 +168,7 @@
                    class="quarter2"
                    label="Naam"
                    valueName="lastName"
+                   value="${this.contact ? this.contact.lastName : ""}"
                    autoCompleteName="family-name"
                    required
                  ></pd-input>
@@ -167,6 +180,7 @@
              class="quarter3"
              label="Straat"
              valueName="street"
+             value="${this.contact ? this.contact.street : ""}"
              autoCompleteName="street-address"
              required
            ></pd-input>
@@ -175,6 +189,7 @@
              class="quarter1"
              label="Nr"
              valueName="streetNr"
+             value="${this.contact ? this.contact.streetNr : ""}"
              required
            ></pd-input>
          </pd-form-row>
@@ -183,6 +198,7 @@
              class="quarter4"
              id="additionalHintId"
              label="Extra informatie"
+             value="${this.contact ? this.contact.additionalHint : ""}"
            ></pd-input>
          </pd-form-row>
          <pd-form-row class="contact-form">
@@ -205,6 +221,7 @@
                    label="Postcode"
                    field-type="number"
                    valueName="zip"
+                   value="${this.contact ? this.contact.zip : ""}"
                    autoCompleteName="postal-code"
                    required
                  ></pd-input>
@@ -214,6 +231,7 @@
              class="quarter2"
              label="Plaats"
              valueName="city"
+             value="${this.contact ? this.contact.city : ""}"
              autoCompleteName="locality"
              required
            ></pd-input>
@@ -225,6 +243,7 @@
              label="Telefoon"
              name="phone"
              valueName="phone1"
+             value="${this.contact ? this.contact.phone1 : ""}"
              field-type="phone"
              autoCompleteName="tel"
              required
@@ -235,6 +254,7 @@
              label="E-mail"
              field-type="mail"
              valueName="email"
+             value="${this.contact ? this.contact.email : ""}"
              autoCompleteName="email"
              required
            ></pd-input>
@@ -397,7 +417,7 @@
       );
 
       // set prepared form, if no validation error occured
-      if (e.detail.errorMap.size === 0) {
+      if (e.detail.errorMap.size === 0 && e.detail.formData) {
         e.detail.formData[this.id] = this._setFormData();
       }
     }