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


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

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

[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"

Ответы (15)

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


Демо

make is_edit типа boolean.



export class App {
  name:string;
  is_edit: boolean; 
  constructor() {
    this.name = 'Angular2'
    this.is_edit = true;
  }
}

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

Кроме того, [отключено] ожидает логическое. Вам следует избегать возврата null.

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

     

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

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

В файле HTML:


В файле TS:

dynamicVariable = false; // true based on your condition 

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

Это неверно для любого из известных мне, в соответствии с документами Mozilla

отключено равно true или false

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





Отключено Выберите в угловом 9.

учтите, что отключена работа с логическими значениями в этом примере я использую событие (изменение) с опцией 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

//region disabled till country is not selected 

Вы можете просто сделать это


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


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

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



Отключить текстовое поле в Angular 7

Думаю, я понял проблему, это поле ввода является частью реактивной формы (?), Поскольку вы включили 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}]

Вот плункер




export class AppComponent {
  is_edit : boolean = false;
}

Фактически, в настоящее время рекомендуемый подход при использовании реактивных форм (во избежание ошибок «изменено после проверки») заключается в том, чтобы не использовать атрибут disabled с директивой реактивной формы. Вы должны настроить свойство disabled этого элемента управления в своем классе компонента, и атрибут disabled будет фактически установлен в DOM для вас.

and the component code:

форма: FormGroup;
  общедоступный is_edit: boolean = true;
  конструктор(
    частный фб: FormBuilder
    ) {
    
  }

  ngOnInit () {
    this.form = this.fb.group ({
      имя: [{значение: '', отключено:! this.is_edit}, [Validators.required, Validators.minLength (2)]],
    });
  }

Вот плункер с рабочим кодом: http://plnkr.co/edit/SQjxKBfvvUk2uAIb?preview

2022 WebDevInsider