disable input using checkbox in angularjs

Issue

I'm trying to disable a bunch of input fields using a checkbox, I've seen people do the exact same thing as me, but I can't seem to get it to work... I'm currently begging for sweet release.

I've tried using ngModel only to end up absolutely nowhere, getting the following errors:

the attribute 'disabled' does not exists in the input field

or

Got interpolation ({{}}) where expression was expected at column 0 in [{{isAanmeetVergoeding}} == false]

or the warning:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

my current build is this:

HTML:

{{isAanmeetVergoeding}}
  {{!isAanmeetVergoeding}}
  <div class="row form-inline">
    <div class="form-group mb-2 col-md-12 text-left">
      <div class="col-md-12" style="border-bottom: 0.5px solid lightgray;">
        <input type="checkbox" id="GroeperingDefinitieContractAVCheckbox" (change)="AVCheckboxChange($event.target.checked)" class="form-control" formControlName="av_used" [ngClass]="{'is-invalid': displayMessage.av_used}" /><label style="display:inline-flex; padding-left:5px;" for="GroeperingDefinitieContractAVCheckbox"><b> aanmeetvergoeding (AV) </b> </label>
        <span class="invalid-feedback">{{displayMessage.av_used}}</span>
      </div>
    </div>
  </div>
  <div class="row form-inline">
    <div class="form-group mb-2 col-md-11 text-left">
      <label class="col-md-3 col-form-label" for="GroeperingDefinitieContractBedragHB">bedrag HB</label>
      <div class="col-md-4">
        <input type="number" id="GroeperingDefinitieContractBedragHB" [disabled]="(isAanmeetVergoeding == true)" class="form-control stretch" placeholder="0,00" formControlName="av_bedrag_hb" [ngClass]="{'is-invalid': displayMessage.av_bedrag_hb}" />
        <span class="invalid-feedback">{{displayMessage.av_bedrag_hb}}</span>
      </div>
      <div class="col-md-1">

        <select id="GroeperingDefinitieContractBedragHBEenheid" [disabled]="{{isAanmeetVergoeding}} == false" class="form-control" formControlName="av_bedrag_eenheid_hb">
          <option [selected]="av_bedrag_eenheid_hb == e.Key" *ngFor="let e of eenheidOpties" [ngValue]="e.Key">
            {{ e.Value }}
          </option>
        </select>
        <span class="invalid-feedback">{{displayMessage.av_bedrag_eenheid_hb}}</span>
      </div>
    </div>
  </div>

TypeScript:

  public isAanmeetVergoeding: any;

  public AVCheckboxChange(event: any): void {
     console.log(event);
     this.inputDisabled = event;
     this.GroeperingDefinitieContractEditForm.valueChanges.subscribe(value => {
     this.isAanmeetVergoeding = this.inputDisabled;
   });
  }

and the worst part is, the variable that I am using works (see below)! but the disabling fields part is not...

please do not refrain to ask for any additional information required to pull me out of this hell

Solution

finally solved it after 3 days using [attr.disabled] like:

<input type="text" [attr.disabled]="isAanmeetvergoeding ? true : null" />

Answered By - FllnAngl