angular2の入力を無効にする方法


123

is_edit = true無効にするtsで...

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

10
あなたはすでにこの質問をし、すでに回答がありましたが、質問を削除しました。ここでも、(つまり使用の名前ではなくformControlName)それらを修正し、エラーに気づくには、ブラウザのコンソールを開き、それは動作します:plnkr.co/edit/al2IkGkaZKpdLKKTfvKh?p=preview
JB Nizet

ここでの本当の問題は、テンプレートベースのフォームと反応型フォームを混在させていることです。両方ではなく、どちらか一方を使用してください。@ AJT_82が正解です。
adam0101

回答:


316

attr.disabled代わりにを使用してみてくださいdisabled

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

5
要素にattrを追加しないようにするためにattr値をnullに設定すると、ハックのように見えますが、実際に機能し、さらには後から見ると意味があります。
c69

2
disabled等しいtrueまたはfalse
Belter、2017

18
実際に機能する回答をありがとう!だから、なぜattr.disabledときの仕事をdisabledしないのですか?
Dylanthepiguy

5
これは機能しますが、テンプレートベースのフォームと反応型フォームを混在させるという本当の問題に対処しないハックです。OPは、両方ではなく、どちらか一方を使用する必要があります。
adam0101

2
<input [attr.disabled] = "disabled || null" />うまくいくと思います
Francesco

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

ここにプランカーがあります


30

あなたは単にこれを行うことができます

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

1
これは機能しますが、 "false"はコントロールを有効にすることを示唆しています。無効化された属性の存在がコントロールを無効にするものであり、値ではないためです。
Mecaveli 2018年

@Mecaveli、[disabled]をfalseに設定すると、実際に制御が有効になります。<input [disabled] = "false" id = "name" type = "text">は、入力フィールドを有効にします。角度アプリケーションをチェックできます。
イフェシナチブライアン2018

1
ここで自分自身を修正するだけです。私が学んだように、[無効]は実際には[無効] HTML属性値を[attr.disabled]のように制御しません。そのため、[disabled] = "false"は機能しますが、html属性の値 "disable"の "false"は機能しません。
Mecaveli

6
したがって、全体として、実際にエディターを使用して、カウンターポイントを表示する前にそれを試す必要があります。
イフェシナチブライアン2018

確かに、残念ながら投票を取り消すと、現在は元に戻すことができません。[attr.disabled]を誤用して何年も考えていた(またはそれほど考えていなかった)のは[disabled]に等しい...
Mecaveli 2018年

26

一部のステートメントで入力を無効にする場合。使用[readonly]=trueまたはfalse代わりの無効化。

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

1
反応にやさしいソリューション。
John Deer

1
これは正しいです。私にとって[attr.disabled] = "disabled"は一方向のみで機能しました。つまり、入力は初期の無効/有効な状態の
ままでした

本当にありがとうございました!
ナジル

Nazir問題ありません
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
isDisabledメソッドにコンソールログを配置すると、数百のコンソールログが実行されます。isDisabledメソッドに複雑なロジックがある場合は、問題がある可能性があります。したがって、これが良い解決策であるかどうかはわかりません。
Téwa

1
Angular変数に動的チェックを入れないでください。無限ループが発生します。[disabled]="is_edit"直接お使いいただけます。なぜisDisabled()機能なのか?
alex351

入力ステータスを直接変更するコードを更新します。
Yoav Schniederman

7

false代わりにあなたが意味したと思います'false'

また、[disabled]を期待していBooleanます。を返さないでくださいnull


4

上記のfedtuckの承認された回答に関するBelterのコメントへの返答。私はコメントを追加するという評判がないためです。

これは、Mozillaのドキュメントに沿って、私が知っているものには当てはまりません

disabledはtrueまたはfalseに等しい

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
これはtrueであり、純粋なHtmlには完全に当​​てはまりますが、angularの場合、特に双方向バインディングを行う場合は、disabledのブール値を指定する必要があります。
イフェシナチブライアン2018

4

私はこの解決策を好む

HTMLファイル:

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

TSファイル:

dynamicVariable = false; // true based on your condition 

3

あなたが探しているのはdisabled = "true"です。次に例を示します。

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

6
これは間違っている、HTMLとDOM disabledまたはその値が等しくなければなりません-属性は、属性名を指定する必要があることを意味し、「ブール属性」で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;
  }
}

2

Angular 7でTextBoxを無効にする

<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角度9では無効です。

booleanこの例では、disabledは値を処理することに注意してください。国が選択されていない場合、オプションで(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"

私はこのようにそれを得ました。だから私は好む。


これは無効化された属性を動的に設定するものではありません
Benjineer
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.