web-dev-qa-db-ja.com

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"
angularangular-reactive-formsdisabled-input
67
Tampa

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

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

問題を理解したと思います。この入力フィールドは、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}]

ここにplunker

37
AJT_82

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

<input [disabled]="true" id="name" type="text">
20
Ifesinachi Bryan
<input [disabled]="isDisabled()" id="name" type="text">

export class AppComponent {
  name:string;
  is_edit : boolean = false;


 isDisabled() : boolean{
   return this.is_edit;
 }
}
11
Yoav Schniederman

あなたは入力がいくつかのステートメントで無効にしたい場合。 disabledの代わりに[readonly]=trueまたはfalseを使用してください。

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

'false'の代わりにfalseを意味したと思います

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

5
zurfyx

fedtuckの受け入れられた答え へのBelterのコメントに対する返事のメモ。

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

無効は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
severin

あなたが探しているのは disabled = "true" です。これが一例です。

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

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>
1
Rahul Seth

私はこの解決策を好む

HTMLファイル内：

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

TSファイル内：

dynamicVariable = false; // true based on your condition
1
Anirudh

また、入力ボックス/ボタンを無効のままにする必要がある場合は、単に<button disabled>または<input disabled>が機能します。

0
Priyanka Arora

単純に次のように使用できます

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

このようになった。だから私は好む。

0
Brock James

デモ

is_editを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;
  }
}
0
Ajey