Angular Form validation not working, submit button not getting enabled

Question

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;
}

Might I ask you why did you prefer to use jQuery in an angular application? — Charith Hettiarachchi
– Charith Hettiarachchi, Commented Dec 11, 2021 at 17:12
I see, but to be honest, there is no need to use jQuery to handle any form operation in angular. Angular reactive forms includes almost all the features, including form validations. Please check the documentations on reactive forms, angular.io/guide/reactive-forms. They cover how to use reactive forms well. I think ionut-t's answer explains what needs to be done in your scenario. — Charith Hettiarachchi
– Charith Hettiarachchi, Commented Dec 12, 2021 at 4:32

ionut-t · Accepted Answer · 2021-12-11 19:36:58Z

1

Never a good idea to use jQuery inside an Angular project. You should check the Angular documentation for forms to properly understand how they work.

Anyway, this is the right implementation for the reactive forms:

form: FormGroup;

constructor(private _fb: FormBuilder) {}

ngOnInit() {
  this.form = this._fb.group({
        first_name: [null, Validators.required],
        last_name: [null, Validators.required],
        desc: [null, Validators.required],
        email: [null, [Validators.required, Validators.email]],
        phone: [null, Validators.required]
    });
}

onClickSubmit() {
  if(this.form.invalid) return;

  // do stuff
}

  <button [disabled]="form.invalid">Submit</button>

answered Dec 11, 2021 at 19:36

ionut-t

1,1771 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Somasekhar world · Accepted Answer · 2021-12-11 17:54:42Z

0

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

answered Dec 11, 2021 at 17:54

Somasekhar world

11 bronze badge

Comments

Florian RADUREAU · Accepted Answer · 2021-12-11 17:55:12Z

0

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

answered Dec 11, 2021 at 17:55

Florian RADUREAU

1215 bronze badges

Comments

Alan Yu · Accepted Answer · 2021-12-12 02:08:54Z

0

Stackblitz

Update:

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

To

<input type="submit" id="submit" value="Submit Your Query" disabled="disabled">

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

edited Dec 12, 2021 at 2:08

answered Dec 11, 2021 at 18:16

Alan Yu

1,54212 silver badges21 bronze badges

2 Comments

Learner Over a year ago

Getting this error: Error: src/app/contactus/contactus.component.ts:34:8 - error TS2531: Object is possibly 'null'. 34 document.getElementById('submit').removeAttribute('disabled');

Alan Yu Over a year ago

@Learner hi, i updated my answer

Collectives™ on Stack Overflow

Angular Form validation not working, submit button not getting enabled

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related