angular の input タグで無効にすると効果がありません

disabledプロパティをformControlNameと組み合わせて使用​​する場合、プロパティは効果がありませんdisabled。

formControlNameのディレクティブでありAngular、フォーム コントロールをバインドし、フォーム コントロールの状態と値を自動的に処理するために使用されます。を使用してフォーム コントロールをバインドする場合formControlName、フォーム コントロールはコントロールの無効な状態を制御します。

formControlNameによってバインドされたフォーム コントロールを無効にする場合は、disable()次のメソッドを使用できます。

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

@Component({
    
    
  selector: 'my-component',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="myControl" [disabled]="isDisabled">
      <button (click)="toggleDisabled()">Toggle Disabled</button>
    </form>
  `
})
export class MyComponent {
    
    
  myForm: FormGroup;
  isDisabled: boolean = false;

  constructor() {
    
    
    this.myForm = new FormGroup({
    
    
      myControl: new FormControl()
    });
  }

  toggleDisabled() {
    
    
    if (this.isDisabled) {
    
    
      this.myForm.get('myControl').enable();
    } else {
    
    
      this.myForm.get('myControl').disable();
    }
    this.isDisabled = !this.isDisabled;
  }
}

によってバインドされているフォーム コントロールをmyForm.get('myControl')取得し、メソッドとメソッドを使用してその無効状態を切り替えるために使用します。[無効に切り替える] ボタンをクリックすると、プロパティの値がコントロールの無効と有効に切り替わります。formControlNameenable()disable()isDisabled