Cara menonaktifkan input di angular2

Untuk is_edit = truemenonaktifkan ...

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

Saya hanya ingin menonaktifkan input berdasarkan trueatau false.

Saya mencoba mengikuti:

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

Coba gunakan attr.disabled, alih-alihdisabled

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

Saya rasa saya sudah menemukan masalahnya, kolom input ini adalah bagian dari bentuk reaktif (?), Karena Anda telah memasukkannya formControlName. Ini berarti apa yang Anda coba lakukan dengan menonaktifkan kolom input is_edittidak berfungsi, misalnya upaya Anda [disabled]="is_edit", yang dalam kasus lain akan berhasil. Dengan formulir Anda, Anda perlu melakukan sesuatu seperti ini:

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

dan kehilangan is_editsemuanya.

jika Anda ingin bidang masukan dinonaktifkan sebagai default, Anda perlu menyetel kontrol formulir sebagai:

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

Ini plunker

Anda cukup melakukan ini

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

Jika Anda ingin masukan untuk menonaktifkan beberapa pernyataan. gunakan [readonly]=trueatau falsebukan dinonaktifkan.

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

Saya kira yang Anda maksud, falsebukan'false'

Juga, [disabled]mengharapkan file Boolean. Anda harus menghindari mengembalikan file null.

Sebuah catatan sebagai tanggapan atas komentar Belter pada jawaban yang diterima fedtuck di atas, karena saya kurang memiliki reputasi untuk menambahkan komentar.

Ini tidak benar untuk semua yang saya ketahui, sejalan dengan dokumen Mozilla

cacat sama dengan benar atau salah

Ketika atribut yang dinonaktifkan ada, elemen dinonaktifkan terlepas dari nilainya. Lihat contoh ini

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

Saya lebih suka solusi ini

Dalam file HTML:

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

Dalam file TS:

dynamicVariable = false; // true based on your condition 

Apa yang Anda cari dinonaktifkan = "true" . Berikut ini contohnya:

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

Demo

membuat is_edittipe boolean.

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

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

Nonaktifkan TextBox di 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>

Dan juga jika kotak input / tombol harus tetap nonaktif, maka cukup <button disabled>atau <input disabled>berfungsi.

Dinonaktifkan Selectpada sudut 9.

satu hal yang perlu diingat dinonaktifkan bekerja dengan booleannilai - nilai dalam contoh ini, saya menggunakan (change)acara dengan selectopsi jika negara tidak dipilih, wilayah akan dinonaktifkan.

find.component.ts file

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>

dapat menggunakan seperti

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

Saya mendapatkannya seperti ini. jadi saya lebih suka.