Блог

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

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

Пожалуйста, просмотрите код и измените его в stackblitz

1. example-dialog.component.html

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

 

2. пример-dialog.component.ts

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

@Component({
  selector: 'app-example-dialog',
  templateUrl: 'example-dialog.component.html',
})
export class ExampleDialogComponent {

  ngOnInit() {

  }


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


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


}
 

В Angular есть FormBuilder функция, которую вы можете использовать, чтобы сделать вещи более красивыми и динамичными. Это часть ReactiveFormsModule, проверьте это. Вы можете добавить проверку с Validators.required помощью элемента управления, а затем проверить действительность group на кнопке

РЕДАКТИРОВАТЬ (добавлен пример):

Базовое использование:

  bidForm: FormGroup;
 constructor(private fb: FormBuilder) { this.createForm() }
 
 private createForm() {
     this.bidForm = this.fb({
         // You can use multiple validators here
         quantity: new FormControl(null, [Validators.required]),
         inputPrice: new FormControl(null, [Validators.required])
     })
 }
 

и в html, как

 <form [formGroup]="bidForm"
      (ngSubmit)="bidForm.valid amp;amp; submit()">
 <input type="number"
    formControlName="quantity"
    name="quantity"
    class="form-control"
    id="inputQuantity"
    placeholder="Quantity(QTL)*"/>
  
    /.../

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

</form>
 

Эта функция может быть легко реализована с помощью модуля реактивной формы. Реактивная форма имеет требуемую проверку. Эта требуемая проверка делает вашу форму недействительной до тех пор, пока ваша форма не будет заполнена необходимой информацией. во-первых, вы должны импортировать модуль реактивной формы в app.module.ts

 import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } 

затем вы должны реализовать свои проверки формы в своем файле класса. как показано ниже.

 import { Component, Inject, ViewChild } from '@angular/core';

import { FormGroup, FormControl, Validators } from '@angular/forms';

import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";;

@Component({
  selector: 'app-example-dialog',
  templateUrl: 'example-dialog.component.html',
})
export class ExampleDialogComponent {

  ngOnInit() {

  }

bidForm = new FormGroup({
inputQuantity: new FormControl('', [Validators.required]),
inputPrice: new FormControl('', [Validators.required])
 });

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


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


}
 

Тогда ваш шаблон должен быть примерно таким, как показано ниже

 <form [formGroup]="bidForm">
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputQuantity">Quantity</label>
        <input [formControl]="inputQuantity"
          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 [formControl]="inputPrice"
          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>
 

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