Как отключить ввод в angular2

123

В цс is_edit = trueотключить ...

<input [disabled]="is_edit=='false' ? true : null" id="name" type="text" [(ngModel)]="model.name" formControlName="name" class="form-control" minlength="2">

Я просто хочу отключить ввод на основе trueили false.

Я пробовал следующее:

[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"
Tampa
источник
10
Вы уже задавали этот вопрос и уже получили ответ, но затем удалили вопрос. Опять же, откройте консоль браузера, чтобы заметить ошибки, исправьте их (т.е. используйте имя, а не formControlName), и тогда все заработает
JB Nizet
Настоящая проблема здесь в том, что вы смешиваете формы на основе шаблонов с реактивными формами. Используйте то или другое, но не оба. @ AJT_82 имеет правильный ответ.
adam0101 03

Ответы:

318

Попробуйте использовать attr.disabledвместоdisabled

<input [attr.disabled]="disabled ? '' : null"/>
fedtuck
источник
5
Установка значения attr равным null, чтобы НЕ добавлять атрибут attr к элементу - выглядит как взлом, но на самом деле это работает и даже имеет смысл, если задним числом.
c69
2
disabledравно trueилиfalse
Belter
18
Спасибо за ответ, который действительно работает! Так почему attr.disabledработает, когда disabledнет?
Dylanthepiguy
5
Хотя это работает, это хитрость, которая не решает реальной проблемы смешивания шаблонных форм с реактивными формами. OP должен использовать один или другой, а не оба.
adam0101 03
2
<input [attr.disabled] = "disabled || null" /> Думаю, тоже сработает
Франческо
41

Думаю, я понял проблему, это поле ввода является частью реактивной формы (?), Поскольку вы включили formControlName. Это означает, что то, что вы пытаетесь сделать, отключив поле ввода is_edit, не работает, например, ваша попытка [disabled]="is_edit", которая в других случаях сработает. С вашей формой вам нужно сделать что-то вроде этого:

toggle() {
  let control = this.myForm.get('name')
  control.disabled ? control.enable() : control.disable();
}

и is_editвообще потеряем .

если вы хотите, чтобы поле ввода было отключено по умолчанию, вам необходимо установить элемент управления формой как:

name: [{value: '', disabled:true}]

Вот плункер

AJT82
источник
30

Вы могли бы просто сделать это

<input [disabled]="true" id="name" type="text">
Ифесиначи Брайан
источник
1
Хотя это работает, это предполагает, что «false» включит элемент управления, чего не делает, поскольку отключение элемента осуществляется наличием атрибута disabled, а не значением.
Mecaveli
@Mecaveli, установка [disabled] в false фактически включает управление. <input [disabled] = "false" id = "name" type = "text"> делает поле ввода активным. Вы можете проверить свое угловое приложение.
Ifesinachi Bryan
1
Просто чтобы поправить себя: как я узнал, [disabled] фактически не контролирует значение атрибута disabled html, как [attr.disabled]. Таким образом, [disabled] = "false" работает, хотя "false" в качестве значения атрибута "disable" html не работает.
Mecaveli
6
В общем, вы должны использовать свой редактор и опробовать его, прежде чем поднимать возражения.
Ifesinachi Bryan
В самом деле, извините за голосование против, к сожалению, его нельзя отменить. Неправильно использовал [attr.disabled] в течение многих лет, думая (или, скорее, не слишком много думая), что он равен [инвалиду] ...
Mecaveli
26

Если вы хотите отключить ввод в каком-либо заявлении. использовать [readonly]=trueили falseвместо отключенного.

<input [readonly]="this.isEditable" 
    type="text" 
    formControlName="reporteeName" 
    class="form-control" 
    placeholder="Enter Name" required>
Усман Салех
источник
1
Реактивно-дружественное решение.
Джон Дир
1
Это верно. Для меня [attr.disabled] = "disabled" работал только в одном направлении, т.е. вход оставался в исходном состоянии отключено / включено
spiritworld
Спасибо тебе большое за это !
Назир
Nazirнет проблем
Усман Салех
13
<input [disabled]="is_edit" id="name" type="text">
<button (click)="is_edit = !is_edit">Change input state</button>

export class AppComponent {
  is_edit : boolean = false;
}
Йоав Шнидерман
источник
1
Если вы поместите журнал консоли в метод isDisabled, выполняются сотни журналов консоли. Если в методе isDisabled есть сложная логика, это может быть проблемой. Так что я не уверен, что это хорошее решение.
Téwa
1
Не помещайте динамическую проверку в переменные Angular, иначе вы получите бесконечный цикл. Вы можете использовать [disabled]="is_edit"напрямую. Почему isDisabled()функция?
alex351
обновить код, чтобы напрямую изменить статус входа.
Йоав Шнидерман,
7

Я полагаю, вы имели в виду falseвместо'false'

Также [disabled]ожидается расширение Boolean. Вам следует избегать возврата файла null.

zurfyx
источник
4

Примечание в ответ на комментарий Белтера о принятом ответе fedtuck выше, поскольку у меня нет репутации, чтобы добавлять комментарии.

Это неверно ни в одном из известных мне случаев, в соответствии с документами Mozilla.

отключено равно истина или ложь

Когда присутствует атрибут disabled, элемент отключен независимо от значения. См. Этот пример

<input placeholder="i can be changed"/>
<input disabled placeholder="i can NOT be changed"/>
<input disabled="true" placeholder="i can NOT be changed"/>
<input disabled="false" placeholder="i can NOT be changed"/>
Северин
источник
3
это верно и полностью верно для чистого Html, но для angular вы должны предоставить логическое значение для disabled, особенно когда вы выполняете двустороннюю привязку.
Ifesinachi Bryan 08
4

Я предпочитаю это решение

В файле HTML:

<input [disabled]="dynamicVariable" id="name" type="text">

В файле TS:

dynamicVariable = false; // true based on your condition 
Anirudh
источник
3

То, что вы ищете, - disabled = "true" . Вот пример:

<textarea class="customPayload" disabled="true" *ngIf="!showSpinner"></textarea>
Sumeet
источник
6
Это неверно, disabledатрибут HTML и DOM является «логическим атрибутом», что означает, что необходимо указать только имя атрибута - или его значение должно быть равным disabled, например, disabled="disabled" - it does not recognize the values of true` или false- так disabled="false"что элемент все равно будет отключен.
Дай
2

демонстрация

Сделайте is_editтип логического.

<input [disabled]=is_edit id="name" type="text">

export class App {
  name:string;
  is_edit: boolean; 
  constructor() {
    this.name = 'Angular2'
    this.is_edit = true;
  }
}
Ajey
источник
2

Отключить TextBox в Angular 7

<div class="center-content tp-spce-hdr">
  <div class="container">
    <div class="row mx-0 mt-4">
      <div class="col-12" style="padding-right: 700px;" >
          <div class="form-group">
              <label>Email</label>
                <input [disabled]="true" type="text" id="email" name="email" 
                [(ngModel)]="email" class="form-control">
          </div>
     </div>
   </div>
 </div>

Ник
источник
0

А также, если поле ввода / кнопка должны оставаться отключенными, то просто <button disabled>или <input disabled>работает.

Приянка Арора
источник
0

Отключено Selectв angular 9.

одна вещь имейте в виду, отключенная работа со booleanзначениями в этом примере, я использую (change)событие с selectопцией, если страна не выбрана, регион будет отключен.

find.component.ts файл

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-find',
  templateUrl: './find.component.html',
  styleUrls: ['./find.component.css']
})
export class FindComponent implements OnInit {
  isCountrySelected:boolean;

  constructor() { }
  //onchange event disabled false
 onChangeCountry(id:number){
   this.isCountrySelected = false;
 }
  ngOnInit(): void {
    //initially disabled true
    this.isCountrySelected = true;
  }

}

find.component.html

//Country select option
<select  class="form-control"  (change)="onChangeCountry()" value="Choose Country">
                    <option value="">Choose a Country</option>
                    <option value="US">United States</option>
                     
</select>
//region disabled till country is not selected 
<select class="form-control" [disabled]="isCountrySelected">
                    <option value="">Choose a Region</option>
                    <option value="">Any regions.</option>
                    
                </select>
Саад Аббаси
источник
-1

можно использовать просто как

     <input [(ngModel)]="model.name" disabled="disabled"

У меня так получилось. так что я предпочитаю.

Брок Джеймс
источник
Это не устанавливает атрибут disabled динамически
Benjineer