Angular: Как включить и отключить поле ввода на основе переключателя - PullRequest
Новая
       7

Angular: Как включить и отключить поле ввода на основе переключателя

0 голосов
/ 15 октября 2019 

// 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. Мне нужно отключить поле ввода, если переключатель имеет значение true, и включить поле ввода, если переключатель отключен.

Я новичок в угловой, поэтому в настоящее время переключаю поле ввода.

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

1 Ответ

3 голосов
/ 15 октября 2019

Пожалуйста, используйте [disabled] = "! Invoice.autoGenerate" на входе.

Также посмотрите на редактор

...