Angular の[disabled]バインディングはtrueかfalseで効くようです

Angular の[disabled]バインディングはtrueかfalseで効くようです

Angular のデータバインディングについては「Angularのデータバインディングという仕組み」を参照ください。

htmlではdisabledをつけると無効になりますが、Angular のプロパティバインディングでは

[disabled]='変数名'

で、変数がtrue,falseなら有効無効が切り替わります。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:
  `
  <div style="text-align:center">
    <input type="text" maxlength="8" [disabled]="aaa" value="テキスト"><br>
    <button type="button" (click)="onClick()">ボタン</button>
  </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  aaa = false;
  onClick() {
    this.aaa = !this.aaa;
  }
}

aaaと言う変数がボタンを押すことによってtrue,falseに切り替わります。

詳細は「AngularとTypeScriptでSPAを作成する」を参照ください。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^