title: Angular Form validation not working, submit button not getting enabled
body: <p>The Angular form in the Submit Button is greyed out even though all fields are filled in, not sure what could be wrong. On filling up all the fields the button is not getting enabled and as per the css it should be turned green. Either of it is not working. Any help to fix this would be highly appreciated.</p>
  <p>This is my code as for the contactus.component.html</p>
  <pre><code>&lt;form id=&quot;form_query&quot; [formGroup]=&quot;formdata&quot;  (ngSubmit)=&quot;onClickSubmit()&quot; data-empty=&quot;&quot; action=&quot;#&quot; method=&quot;post&quot;&gt;
      &lt;div&gt;
        &lt;input type=&quot;first_name&quot;  formControlName=&quot;first_name&quot; placeholder=&quot;Enter your First Name:&quot; required&gt;
  
        &lt;input type=&quot;last_name&quot;   formControlName=&quot;last_name&quot; placeholder=&quot;Enter your Last Name:&quot; required&gt;
  
        &lt;textarea rows=&quot;4&quot; cols=&quot;70&quot;   formControlName=&quot;desc&quot; placeholder=&quot;Enter your Description:&quot; required &gt;&lt;/textarea&gt;
  
       &lt;input type=&quot;email&quot;  placeholder=&quot;email&quot; formControlName=&quot;email&quot; placeholder=&quot;Enter your Email Address :&quot; required&gt;
  
         &lt;input type=&quot;phone&quot;  formControlName=&quot;phone&quot;  placeholder=&quot;Enter your Phone Number :&quot; required&gt;
  
      &lt;/div&gt;
      
      &lt;div&gt;
        &lt;input type=&quot;submit&quot; value=&quot;Submit Your Query&quot; disabled=&quot;disabled&quot;&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>contactus.component.ts file is as below:</p>
  <pre><code>function submitState(el) {
  
      var $form = $(el),
          $requiredInputs = $form.find('input:required'),
          $submit = $form.find('input[type=&quot;submit&quot;]');
  
      $submit.attr('disabled', 'disabled');
  
      $requiredInputs.keyup(function () {
  
        $form.data('empty', 'false');
  
        $requiredInputs.each(function() {
          if ($(this).val() === '') {
            $form.data('empty', 'true');
          }
        });
  
        if ($form.data('empty') === 'true') {
          $submit.attr('disabled', 'disabled').attr('title', 'fill in all required fields');
        } else {
          $submit.removeAttr('disabled').attr('title', 'click to submit');
        }
      });
    }
    // apply to each form element individually
    submitState('#form_query');
  </code></pre>
  <p>contactus.component.css is as below:</p>
  <pre><code>* { box-sizing: border-box; }
  
  input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border-top: 0;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: #fff;
  }
  
  form input:first-child {
    border-top: 1px solid #ccc;
  }
  
  input[type=&quot;checkbox&quot;] {
    display: inline;
    width: auto;
  }
  
  input[type=&quot;submit&quot;] {
    width: 100%;
    padding: 14px 16px;
    background: #5cb85c;
    color: #fff;
    border: 0;
    border-radius: 0;
    margin-bottom: 20px;
    transition: background 600ms;
    margin-top: 10px;
    cursor: pointer;
  }
  
  input[type=&quot;submit&quot;]:disabled {
    background: #555;
    cursor: not-allowed;
  }
  </code></pre>