Angular: Как да активирате и деактивирате поле за въвеждане въз основа на превключвател

// 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, така че в момента превключвам полето за въвеждане.

Вместо да се крие или показва в зависимост от превключвателя, как мога да направя полето за въвеждане активирано, когато превключвателят е изключен, и деактивиран, когато превключвателят е включен?


angular data-binding
person Emmon    schedule 15.10.2019    source източник
comment
имате typeo: ngModel)]=invoice.autoGenerate трябва да бъде [(ngModel)]=invoice.autoGenerate също така използвате invoice.autoGenerate вместо autoGenerate? коя е тази фактура? също пропускате [disabled]=autoGenerate при второто си въвеждане   -  person noririco    schedule 15.10.2019
comment
Фактурата @TheNsn666 е моят модел, където съм декларирал променливата autoGenerate   -  person Emmon    schedule 15.10.2019
comment
написахте, че сте го декларирали като autoGenrate, а не invoice.autoGenerate   -  person noririco    schedule 15.10.2019

Отговори (1)


arrow_upward
3
arrow_downward

Моля, използвайте [disabled]="!invoice.autoGenerate" при въвеждане.

Вижте също редактора

person Zonaib    schedule 15.10.2019