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>
リアクティブフォームの場合[disabled]
動作しないでしょう。代わりに、formControlで無効ステータスを設定する必要があります。
this.myForm = this.formBuilder.group({
xxx: [{value: 'someValue', disabled:true}]
})
また、これを行う場合、このフィールドはフォームオブジェクトに含まれません(送信時など)。無効になっているすべての値を検査する場合は、次を使用します。
this.myForm.getRawValue();
無効化されたプロパティをtextarea要素のハードコードされたプロパティとして使用できます
<textarea disabled></textarea>
または、コンポーネントクラスのメソッドにバインドして、何らかの条件に基づいて動的に無効にすることができます。
[disabled]="getDisabledValue()"
。tsファイル内
getDisabledValue() {
//your condition, in this case textarea will be disbaled.
return true;
}
ReactiveForms (formControl)
を使用しているため、使用する必要があります
this.formGroupName.disable()
は、すべてのグループフォームを無効にするか、
this.formGroupName.controls[controlNmae].disable()
は、especific formControl用です。
単に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;
}
動作は次のとおりです例