https://i.sstatic.net/l6mUu.png
It's noticeable that the send offer button is currently disabled, I am looking to enable it only when both input fields are filled.
Below, I have shared my code base with you.
Please review the code and make necessary modifications on 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 attempted logic implementation but realized it's incorrect,
buttonDisabled: boolean;
ngOnInit() {
this.buttonDisabled = false;
}
constructor(
public dialogRef: MatDialogRef<ExampleDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
onNoClick(): void {
this.dialogRef.close();
}
}