https://i.sstatic.net/AHlJX.png
Is it possible to enable the send offer button only after both input boxes are filled?
I'm sharing my code base with you for reference.
Please review the code and make necessary modifications on 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. example-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();
}
}