提交按钮未启用答案

【问题标题】：Submit Button is not getting enable提交按钮未启用
【发布时间】：2022-01-15 21:30:35
【问题描述】：

即使所有字段都已填写，提交按钮中的 Angular 表单仍显示为灰色，不确定可能出现什么问题。在填写所有字段时，该按钮未启用，并且根据 css 它应该变为绿色。其中任何一个都不起作用。任何解决此问题的帮助将不胜感激。

这是我关于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 文件如下：

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 如下：

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

【问题讨论】：

我可以问你为什么更喜欢在 Angular 应用程序中使用 jQuery 吗？
试图关注这个：jsfiddle.net/bno08c44/4
我明白了，但老实说，没有必要使用jQuery来处理Angular中的任何表单操作。 Angular 响应式表单几乎包含所有功能，包括表单验证。请查看有关响应式表单的文档，angular.io/guide/reactive-forms。它们涵盖了如何很好地使用反应形式。我认为 ionut-t 的回答解释了在您的场景中需要做什么。

标签： html jquery angular forms

【解决方案1】：

Stackblitz

更新：

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

到

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

在 Angular 中获得更好的解决方案：

valueChanges : observable 每次控件的值发生变化时都会发出一个事件

所以你需要将表单组 valueChanges Observable 添加到 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');
      }
    });
  }

【讨论】：

收到此错误：错误：src/app/contactus/contactus.component.ts:34:8 - 错误 TS2531：对象可能为“空”。 34 document.getElementById('submit').removeAttribute('disabled');
@Learner 嗨，我更新了答案

【解决方案2】：

在 Angular 项目中使用 jQuery 绝不是一个好主意。您应该查看 Angular 文档中的表单以正确理解它们的工作原理。

无论如何，这是响应式表单的正确实现：

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>

【讨论】：

【解决方案3】：

请检查您的 app.module 中是否正确导入了响应式表单模块。更多信息here (angular doc)。顺便说一下，您的前两种输入类型不正确：MZN input type doc

【讨论】：

【解决方案4】：

您可以在 Angular 中引用表单模块，而不是将其用作 jQuery Angular Forms

【讨论】：