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.

This is my code as for the contactus.component.html

<form id="form_query" [formGroup]="formdata"  (ngSubmit)="onClickSubmit()" data-empty="" action="#" method="post">
    <div>
      <input type="first_name"  formControlName="first_name" placeholder="Enter your First Name:" required>

      <input type="last_name"   formControlName="last_name" placeholder="Enter your Last Name:" required>

      <textarea rows="4" cols="70"   formControlName="desc" placeholder="Enter your Description:" required ></textarea>

     <input type="email"  placeholder="email" formControlName="email" placeholder="Enter your Email Address :" required>

       <input type="phone"  formControlName="phone"  placeholder="Enter your Phone Number :" required>

    </div>
    
    <div>
      <input type="submit" value="Submit Your Query" disabled="disabled">
    </div>
</form>

contactus.component.ts file is as below:

function submitState(el) {

    var $form = $(el),
        $requiredInputs = $form.find('input:required'),
        $submit = $form.find('input[type="submit"]');

    $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');

contactus.component.css is as below:

* { 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="checkbox"] {
  display: inline;
  width: auto;
}

input[type="submit"] {
  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="submit"]:disabled {
  background: #555;
  cursor: not-allowed;
}

CodePudding user response：

you can refer to forms modules in angular instead of using it as jQuery Angular Forms

CodePudding user response：

Please check if the reactive forms module is correctly imported in your app.module. More information here (angular doc). By the way your first two input types are incorrect : MZN input type doc

CodePudding user response：

Stackblitz

Adding (change)="submitState()" event to formgroup can achieve your goal.

For a better solution in Angular:

valueChanges : observable that emits an event every time the value of the control changes

So you need to add the formgroup valueChanges Observable to ngOnInit()

  ngOnInit() {
    this.formdata.valueChanges.subscribe((val) => {
      if (
        this.formdata.controls['first_name'].value != '' &&
        this.formdata.controls['last_name'].value != '' &&
        this.formdata.controls['desc'].value != '' &&
        this.formdata.controls['email'].value != '' &&
        this.formdata.controls['phone'].value != ''
      ) {
        document.getElementById('submit').removeAttribute('disabled');
      } else {
        document.getElementById('submit').setAttribute('disabled', 'disabled');
      }
    });
  }