Блог

Как вы можете видеть, кнопка отправки предложения отключена, я хочу, чтобы кнопка была включена только после заполнения обоих полей ввода.

Здесь я делюсь с вами своей базой кода.

Пожалуйста, просмотрите код и измените его в 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. пример-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();
  }


}
 

Для меня это похоже на базовую проверку формы. Прежде всего, добавьте необходимые атрибуты к своим входным данным, во-вторых, отключите кнопку отправки, если ваша форма недействительна.

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

Проверьте это здесь.