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

angularAngular

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 の[disabled]バインディングはtrueかfalseで効くようです

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

コメント

タイトルとURLをコピーしました