fix(app-contact): fix to passed state check

Author: luiskcs89

src/components/app-input/app-input.scss

@@ -1,3 +1,7 @@
+.fa-check {
+  display: none;
+}
+
 .valid {
   position: relative;
 
@@ -10,11 +14,12 @@
     border: $green 1px solid;
   }
 
-  svg {
+  .fa-check {
     position: absolute;
     bottom: 7px;
     right: 5px;
     transform: translate(-50%, -50%);
     color: $green;
+    display: block;
   }
 }

src/components/app-input/app-input.tsx

@@ -46,7 +46,7 @@ export class AppInput {
           placeholder={this.placeholder}
           onInput={this.inputHandler.bind(this)}
         />
-        {this.valid ? <i class="fas fa-check" /> : null}
+        <i class="fas fa-check" />
       </div>
     );
   }

src/pages/app-contact/app-contact.tsx

@@ -142,7 +142,7 @@ export class AppContact {
                         id="name"
                         placeholder={translate('contact.form.placeholder.name')}
                         required={true}
-                        valid={this.formValues.nameValid}
+                        valid={this.formValues && this.formValues.nameValid}
                       />
                       <p class="error">
                         <span style={!this.nameError ? { display: 'none' } : this.errorIconStyles}>
@@ -158,7 +158,7 @@ export class AppContact {
                         id="email"
                         placeholder={translate('contact.form.placeholder.email')}
                         required={true}
-                        valid={this.formValues.emailValid}
+                        valid={this.formValues && this.formValues.emailValid}
                       />
                       <p class="error">
                         <span style={!this.emailError ? { display: 'none' } : this.errorIconStyles}>
@@ -174,7 +174,7 @@ export class AppContact {
                         type="tel"
                         placeholder={translate('contact.form.placeholder.phone')}
                         required={false}
-                        valid={this.formValues.phoneValid}
+                        valid={this.formValues && this.formValues.phoneValid}
                       />
                       <p class="error">
                         <span style={!this.phoneError ? { display: 'none' } : this.errorIconStyles}>
@@ -189,7 +189,7 @@ export class AppContact {
                         type="text"
                         placeholder={translate('contact.form.placeholder.message')}
                         required={false}
-                        valid={this.formValues.messageValid}
+                        valid={this.formValues && this.formValues.messageValid}
                       />
                       <p class="error">
                         <span style={!this.messageError ? { display: 'none' } : this.errorIconStyles}>