How to make 4 rows non editable based on type and enable Add button if the editable fields are added with 1st 3 column using angular12

Question

i am working on Angular12, here i have got table with inline editable with reactive forms. in this, i am making editable rows based on index values, but i want to make rows editable if the type doesnt include, ['Per Chase MRR', 'Per Chase IRR', 'Mileage Reimbursement' ,'Up-Charge'], rest fields to appear as editable, and columns 'Unit Cost' and 'Total' wont be editable at any point. when i click on 'Add' button, i am disabling the Add button if charge type is not added, but here type, description and quantity are also mandatory fields.

HTML:

<div class="page__container my-3">
  <h4 class="page__title">Other Charges</h4>
  <button
    type="button"
    class="btn btn-primary page__button"
    (click)="addNewCharge()"
    [disabled]="disableAdd()"
  >
    Add
  </button>
</div>
<form [formGroup]="chargesForm">
  <table class="table align-middle mb-0 table-hover">
    <thead>
      <tr>
        <th
          scope="col"
          *ngFor="let field of headerColumn"
          class="{{ field.class }}"
        >
          {{ field.displayName }}
          <i class="{{ field.icon }}" aria-hidden="true"></i>
        </th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <ng-container
        formArrayName="users"
        *ngFor="let group of getFormData.controls; let i = index"
      >
        <tr [formGroupName]="i">
          <td>
            <ng-container *ngIf="i <= 3">{{
              getFormData.controls[i].value.type
            }}</ng-container>
            <select
              *ngIf="i > 3"
              class="custom-select drop form-control"
              formControlName="type"
              id="competitorId"
              #device
              (change)="onChange($event, i)"
            >
              <option disabled="" value="">Choose Charge</option>
              <option
                *ngFor="let charge of dropdownList"
                [value]="charge.name"
                title="charge.name"
              >
                {{ charge.name }}
              </option>
            </select>
          </td>
          <td class="width-textrestarea">
            <ng-container *ngIf="i <= 3">{{
              getFormData.controls[i].value.description
            }}</ng-container>
            <input
              type="text"
              class="form-control"
              formControlName="description"
              placeholder="description"
              *ngIf="i > 3"
              (focusout)="addTotal(i)"
            />
          </td>
          <td class="w-60">
            <ng-container *ngIf="i <= 3">{{
              getFormData.controls[i].value.quantity
            }}</ng-container>
            <input
              type="text"
              class="form-control"
              formControlName="quantity"
              placeholder="quantity"
              *ngIf="i > 3"
              (focusout)="addTotal(i)"
            />
          </td>
          <td class="w-10">
            <ng-container>{{
              getFormData.controls[i].value.unitCost
            }}</ng-container>
          </td>
          <td class="w-5">
            <ng-container>{{
              getFormData.controls[i].value.totalCost
                | currency: 'USD':'symbol':'1.2-2'
            }}</ng-container>
          </td>
          <td class="width-textrestarea pointer text-end">
            <span title="Delete" class="delete-icon" *ngIf="i > 3">
              <i
                class="fa-regular fa-trash-can text-danger"
                (click)="deleteItem(group, i)"
              ></i>
            </span>
          </td>
        </tr>
      </ng-container>
      <tr>
        <td>Total</td>
        <td></td>
        <td></td>
        <td></td>
        <td>$0.00</td>
      </tr>
    </tbody>
  </table>
</form>

TS:

disableAdd() {
    let disable = false;
    for (let i = 0; i < this.getFormData.controls.length; i++) {
      if (!this.getFormData.controls[i].value.type) {
        disable = true;
        return disable;
      }
    }
    return disable;
  }

Demo

Shailesh B · Accepted Answer · 2022-11-07T07:44:50.117

1

What I have understood from your question is that once add button is clicked it should stay disabled until user add charge, descrption and quantity. To achieve this you just need to mark all the 3 fields as required using Validators.required and in html you just need to change the check on add button to [disabled]=this.chargeForm.invalid this should work then

Here is stackblitz demo for the same.

Note: Also it is not recommended to call functions from disabled tag or ngIf in html because it can cause performance issues has these functions get called continuously. You can check this by adding a console.log() in the function that you have used (disableAdd())

edited Nov 07 '22 at 07:44

answered Nov 07 '22 at 06:31

Shailesh B

141
12

thanks for response, one point worked for me, and the other point was, i am making readonly and input fields based on index values, but we are not sure how this might come from api, so ['Per Chase MRR', 'Per Chase IRR', 'Mileage Reimbursement' ,'Up-Charge'], these 4 rows must be readonly at al point of time. – Bhrungarajni Nov 07 '22 at 07:23
If you want to have readonly formcontrols then you can disable the control (added disable in stackblitz example). This would make the formcontrol readonly so user will not be able to add anything to this field. One thing to note with disable in form in that when you do this.form.value the disabled fields will be ignored so you have to either do this.form.getRawValue() or enable the form using this.form.enable() and then do this.form.value. [Here](https://stackoverflow.com/questions/45452175) is similar question you can refer to – Shailesh B Nov 07 '22 at 07:59
1

ya thanks for response, accepted and voted your answer. – Bhrungarajni Nov 07 '22 at 08:16

How to make 4 rows non editable based on type and enable Add button if the editable fields are added with 1st 3 column using angular12

1 Answers1