提交按鈕未啟用

即使填寫了所有欄位，提交按鈕中的 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;
}

uj5u.com熱心網友回復：

您可以在 angular 中參考表單模塊，而不是將其用作 jQuery Angular Forms

uj5u.com熱心網友回復：

請檢查您的 app.module 中是否正確匯入了反應式表單模塊。更多資訊在這里（角度檔案）。順便說一句，您的前兩種輸入型別不正確：MZN input type doc

uj5u.com熱心網友回復：

在 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>

uj5u.com熱心網友回復：

閃電戰

更新：

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

到

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

在 Angular 中獲得更好的解決方案：

valueChanges : 每次控制元件的值發生變化時都會發出一個事件的可觀察物件

所以需要在ngOnInit()中添加formgroup valueChanges Observable

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

標籤：html 查询 有角的 形式

上一篇：當用戶成功提交表單時，如何重定向到另一個頁面？

下一篇：沒有子類化的NSButton圓角