Як відключити вхід у angular2

У тс 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"

Спробуйте використовувати attr.disabledзамістьdisabled

<input [attr.disabled]="disabled ? '' : null"/>

Я думаю, я вирішив проблему, це поле введення є частиною реактивної форми (?), Оскільки ви включили її 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}]

Ось плаунер

Ви могли просто зробити це

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

Якщо ви хочете, щоб вхід було відключено в деякому операторі. використовувати [readonly]=trueабо falseзамість цього вимкнено.

<input [readonly]="this.isEditable" 
    type="text" 
    formControlName="reporteeName" 
    class="form-control" 
    placeholder="Enter Name" required>

<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;
}

Я припускаю, що ти мав на увазі falseзамість цього'false'

Крім того , [disabled]очікує Boolean. Вам слід уникати повернення null.

Зауваження у відповідь на коментар Бельтера щодо прийнятої відповіді fedtuck вище, оскільки мені не вистачає репутації для додавання коментарів.

Це не відповідає дійсності жодної із мене, відповідно до документів Mozilla

інвалід дорівнює істинному або хибному

Коли атрибут вимкнено, елемент відключається незалежно від значення. Дивіться цей приклад

<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"/>

Я вважаю за краще це рішення

У файлі HTML:

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

У файлі TS:

dynamicVariable = false; // true based on your condition 

Те, що ви шукаєте, відключено = "true" . Ось приклад:

<textarea class="customPayload" disabled="true" *ngIf="!showSpinner"></textarea>

Демо

виготовлення 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;
  }
}

Вимкнути TextBox в кутовій 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>

А також якщо поле / кнопка введення має залишатися відключеним, то просто <button disabled>або <input disabled>працює.

Інвалід Selectу кутовій 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>

можна використовувати просто як

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

Я отримав це так. тому я віддаю перевагу.