Angular：如何基于切换启用和禁用输入字段答案

【问题标题】：Angular: How to enable and disable an input field based on a toggleAngular：如何基于切换启用和禁用输入字段
【发布时间】：2019-10-15 08:27:29
【问题描述】：

// in my .ts file i have declared a property

autoGenerate: boolean; 

constructor(){ 
this.autoGenerate = true; 
}

<div class="col-sm-4">
  <div class="checkbox switcher">
    <label>Invoice Number *
              <input type="checkbox" name="autoGenerate" [(ngModel)]="invoice.autoGenerate">
              <span><small></small></span>
              <small *ngIf="invoice.autoGenerate">Auto Generate</small>
              <small *ngIf="!invoice.autoGenerate">Enter Manually</small>
            </label>
  </div>
  <ng-container *ngIf="!invoice.autoGenerate">
    <input type="text" name="invoicenumber" placeholder="eg. G-INV001" class="form-control" [(ngModel)]="invoice.invoiceNumber">
  </ng-container>
</div>

我有一个切换和一个输入字段。切换按钮默认设置为 true。如果切换为真，我需要禁用输入字段，如果切换关闭，我需要启用输入字段。

我是 Angular 新手，所以目前正在切换输入字段。

如何根据切换隐藏或显示，而不是在切换关闭时启用输入字段并在切换打开时禁用输入字段？

【问题讨论】：

你有一个 typeo: ngModel)]="invoice.autoGenerate" 应该是 [(ngModel)]="invoice.autoGenerate" 你也使用 invoice.autoGenerate" 而不是 autoGenerate ？谁是这张发票? 你在第二次输入时也错过了 [disabled]="autoGenerate"
@TheNsn666 invoice 是我声明 autoGenerate 变量的模型
你写了你声明它为 autoGenrate 而不是 invoice.autoGenerate

标签： angular data-binding

【解决方案1】：

请在输入时使用 [disabled]="!invoice.autoGenerate"。

也看editor

【讨论】：