使用angularjs中的复选框禁用输入答案

【问题标题】：disable input using checkbox in angularjs使用angularjs中的复选框禁用输入
【发布时间】：2023-04-04 08:59:01
【问题描述】：

我正在尝试使用复选框禁用一堆输入字段，我看到人们做与我完全相同的事情，但我似乎无法让它工作......我目前正在乞求甜蜜的释放。

我曾尝试使用 ngModel，但结果完全无处可去，出现以下错误：

输入字段中不存在“禁用”属性

或

得到插值 ({{}})，其中表达式应位于 [{{isAanmeetVergoeding}} == false] 的第 0 列中

或警告：

您似乎正在使用带有反应形式的 disabled 属性指示。如果将 disabled 设置为 true 当您在组件类中设置此控件时，disabled 属性实际上将在 DOM 中设置为你。我们建议使用这种方法来避免“检查后更改”错误。

我目前的版本是这样的：

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>

打字稿：

  public isAanmeetVergoeding: any;

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

最糟糕的是，我使用的变量有效（见下文）！但是禁用字段部分不是...

请不要要求任何额外的信息将我从这个地狱中拉出来

【问题讨论】：

标签： angular

【解决方案1】：

终于在 3 天后使用 [attr.disabled] 解决了这个问题：

【讨论】：

是的，可以使用 [attr.disabled]="condition?true:null"、使用指令或使用 FormControl 的禁用方法禁用 formControl