Why [disabled]="addForm.invalid" is not working on Angular 13.3.3

Question

I want to make the add button disabled if the text input is empty. It will enable the button if all the textbox is fill-up. My problem is this is not working "[disabled]="addForm.invalid". Still, the button is enabled. How can I solve this problem?

product.component.html

   <div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':addDisplay}">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Add New Product</h4>
          </div>
          <div class="modal-body">
            <form #addForm="ngForm" (ngSubmit)="onAddProduct(addForm)">
              <div class="mb-3">
                <label for="name" class="col-form-label">Name:</label>
                <input type="text" class="form-control" id="name" ngModel name="name">
              </div>
              <div class="mb-3">
                <label for="price" class="col-form-label">Price:</label>
                <input type="number" class="form-control" id="price" ngModel name="price" min=0 oninput="validity.valid||(value='');">
              </div>
              <div class="mb-3">
                <label for="quantity" class="col-form-label">Quantity:</label>
                <input type="number" class="form-control" id="quantity" ngModel name="quantity" min=0 oninput="validity.valid||(value='');">
              </div>
              <div class="float-end">
                <button [disabled]="addForm.invalid" type="submit" class="btn btn-outline-primary btn-sm me-2">Add Product</button>
                <button type="button" class="btn btn-outline-danger btn-sm" (click)="onCloseAddHandled()">Close</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

product.component.ts

  public onAddProduct(addForm: NgForm): void {
    this.productServive.addProduct(addForm.value).subscribe(
      (response: Product) => {
        console.log(response);
        this.getAllProduct();
        this.onCloseAddHandled();
        this.alertMessage("added");
        addForm.reset();
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
        addForm.reset();
      }
    );

app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],

Answer 1

Try to add required attribute to the input tags