Cara menonaktifkan input di angular2


123

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"

10
Anda sudah menanyakan pertanyaan ini, dan sudah mendapatkan jawaban, tetapi kemudian menghapus pertanyaan tersebut. Sekali lagi, buka konsol browser Anda untuk melihat kesalahan, perbaiki (yaitu gunakan nama dan bukan formControlName), dan kemudian, ini berfungsi: plnkr.co/edit/al2IkGkaZKpdLKKTfvKh?p=preview
JB Nizet

Masalah sebenarnya di sini adalah Anda mencampur formulir berbasis template dengan formulir reaktif. Gunakan salah satu, jangan keduanya. @ AJT_82 memiliki jawaban yang benar.
adam0101

Jawaban:


317

Coba gunakan attr.disabled, alih-alihdisabled

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

5
Menetapkan nilai attr ke null untuk TIDAK menambahkan attr ke elemen - terlihat seperti retasan - tetapi ini benar-benar berfungsi, dan bahkan masuk akal, di belakang.
c69

2
disabledsama dengan trueataufalse
Belter

18
Terima kasih atas jawaban yang benar-benar berfungsi! Jadi, mengapa attr.disabledberhasil, padahal disabledtidak?
Dylanthepiguy

5
Meskipun ini berfungsi, ini adalah peretasan yang tidak mengatasi masalah sebenarnya dari pencampuran formulir berbasis template dengan formulir reaktif. OP harus menggunakan salah satu, bukan keduanya.
adam0101

2
<input [attr.disabled] = "disabled || null" /> Saya rasa bekerja juga
Francesco

41

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


30

Anda cukup melakukan ini

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

1
Saat ini bekerja, ini menunjukkan bahwa "false" akan mengaktifkan kontrol, yang tidak diaktifkan karena atribut yang dinonaktifkan adalah yang menonaktifkan kontrol, bukan nilainya.
Mecaveli

@Mecaveli, pengaturan [nonaktif] ke false sebenarnya mengaktifkan kontrol. <input [disabled] = "false" id = "name" type = "text"> membuat kolom masukan diaktifkan. Anda bisa memeriksa aplikasi sudut Anda.
Ifesinachi Bryan

1
Hanya untuk memperbaiki diri saya sendiri di sini: Seperti yang saya pelajari, [disabled] sebenarnya tidak mengontrol nilai atribut html yang "dinonaktifkan" seperti yang dilakukan [attr.disabled]. Oleh karena itu, [disabled] = "false" berfungsi meskipun "false" karena nilai untuk atribut html "disable" tidak akan berfungsi.
Mecaveli

6
Jadi secara keseluruhan, Anda harus benar-benar menggunakan editor Anda dan mencobanya sebelum mengemukakan titik tandingan.
Ifesinachi Bryan

Memang, maaf karena downvoting sayangnya tidak dapat membatalkannya sekarang. Menyalahgunakan [attr.disabled] selama bertahun-tahun berpikir (atau lebih tepatnya tidak banyak berpikir) itu sama dengan [cacat] ...
Mecaveli

26

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>

1
Solusi ramah reaktif.
John Deer

1
Ini benar. Bagi saya [attr.disabled] = "disabled" hanya berfungsi satu arah, yaitu input tetap dalam keadaan nonaktif / aktif awal
spiritworld

Terima kasih banyak untuk ini!
Nazir

Nazirtidak masalah
Usman Saleh

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
Jika Anda meletakkan log konsol dalam metode isDisabled, ada ratusan log konsol yang dijalankan. Jika ada logika yang kompleks dalam metode isDisabled, mungkin ada masalah. Jadi saya tidak yakin ini adalah solusi yang bagus.
Téwa

1
Jangan menempatkan pemeriksaan dinamis ke variabel Angular atau Anda mendapatkan loop tak terbatas. Anda bisa menggunakan [disabled]="is_edit"secara langsung. Mengapa isDisabled()fungsinya?
alex351

perbarui kode untuk mengubah status input secara langsung.
Yoav Schniederman

7

Saya kira yang Anda maksud, falsebukan'false'

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


4

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

3
itu benar dan sepenuhnya benar untuk Html murni, tetapi untuk angular, Anda harus memberikan nilai boolean untuk dinonaktifkan terutama saat Anda melakukan pengikatan dua arah.
Ifesinachi Bryan

4

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 

3

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

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

6
Ini tidak benar, disabledatribut HTML dan DOM adalah "atribut boolean" yang berarti hanya nama atribut yang perlu ditentukan - atau nilainya harus sama disabled, misalnya disabled="disabled" - it does not recognize the values of true` atau false- sehingga disabled="false"tetap akan menyebabkan elemen dinonaktifkan.
Dai

2

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

2

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>


0

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


0

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>

-1

dapat menggunakan seperti

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

Saya mendapatkannya seperti ini. jadi saya lebih suka.


Ini tidak menyetel atribut yang dinonaktifkan secara dinamis
Benjineer
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.