输入框填满后如何启用按钮

Question

如您所见，发送报价按钮已禁用，我只希望在两个输入框都填满后启用该按钮。

在这里，我与您分享我的代码库。

请浏览代码并在stackblitz上修改

1. example-dialog.component.html

<form id="bidForm">
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputQuantity">Quantity</label>
      <input
        type="number"
        name="quantity"
        class="form-control"
        id="inputQuantity"
        placeholder="Quantity(QTL)*"
      />
    </div>
    <div class="form-group col-md-6">
      <label for="inputPrice">Price</label>
      <input
        type="number"
        class="form-control"
        id="inputPrice"
        placeholder="Price(₹/QTL)"
      />
    </div>
  </div>

  <button
    type="submit"
    class="btn btn-primary btn-lg btn-block"
    disabled="{{ buttonDisabled }}"
  >
    Send offer
  </button>
</form>

2。 example-dialog.component.ts

import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";;

@Component({
  selector: 'app-example-dialog',
  templateUrl: 'example-dialog.component.html',
})
export class ExampleDialogComponent {
// here I tried the logic but I know its not correct,  
buttonDisabled: boolean;
  ngOnInit() {
    this.buttonDisabled = false;
  }

  constructor(
    public dialogRef: MatDialogRef<ExampleDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }


  onNoClick(): void {
    this.dialogRef.close();
  }


}

Answer 1

对我来说，这似乎是一个基本的表单验证。 首先，将所需的属性添加到您的输入中 其次，如果您的表单无效，请禁用您的提交按钮。

<form id="bidForm" #bidForm="ngForm">
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="inputQuantity">Quantity</label>
            <input
        type="number"
        name="quantity"
        class="form-control"
        id="inputQuantity"
        placeholder="Quantity(QTL)*"
        required
      />
    </div>
            <div class="form-group col-md-6">
                <label for="inputPrice">Price</label>
                <input
        type="number"
        class="form-control"
        id="inputPrice"
        placeholder="Price(₹/QTL)"
        required
      />
    </div>
            </div>

            <button
    type="submit"
    class="btn btn-primary btn-lg btn-block"
    [disabled]="!bidForm.form.valid"
  >
    Send offer
  </button>
</form>

实时查看here。