web-dev-qa-db-ja.com

テキストエリアまたはマットフォームフィールドを無効にする方法

Angula（4）+ Angular Form FieldのMaterial and Reactive Formsを使用しています。どうすれば無効にできますか？Googleを試しましたが、disabled = "true"など

私の例：

<mat-form-field class="xxx-form-full-with">
    <textarea matInput placeholder="My description" formControlName="xxx"></textarea>
</mat-form-field>
javascripthtmlangularmaterial
12
dafna

リアクティブフォームの場合[disabled] 動作しないでしょう。代わりに、formControlで無効ステータスを設定する必要があります。

this.myForm = this.formBuilder.group({
  xxx: [{value: 'someValue', disabled:true}]
})

また、これを行う場合、このフィールドはフォームオブジェクトに含まれません（送信時など）。無効になっているすべての値を検査する場合は、次を使用します。

this.myForm.getRawValue();
19
AJT82

無効化されたプロパティをtextarea要素のハードコードされたプロパティとして使用できます

<textarea disabled></textarea>

または、コンポーネントクラスのメソッドにバインドして、何らかの条件に基づいて動的に無効にすることができます。

[disabled]="getDisabledValue()"

。tsファイル内

getDisabledValue() {
  //your condition, in this case textarea will be disbaled.
  return true; 
}
2
Ankit Kapoor

ReactiveForms (formControl)を使用しているため、使用する必要があります

this.formGroupName.disable()は、すべてのグループフォームを無効にするか、

this.formGroupName.controls[controlNmae].disable()は、especific formControl用です。

1
dmarquina

単にdisabledを使用できます

これを試して

<mat-form-field>
    <textarea matInput placeholder="Textarea" [disabled]="isDisabled"></textarea>
</mat-form-field>
<button mat-raised-button  color="primary" (click)="disabletextArea()">disable textarea</button>

コンポーネント内：

  isDisabled: boolean;    
  disabletextArea(){
    this.isDisabled = !this.isDisabled;
  }

動作は次のとおりです例

0
Saurabh Agrawal