Angular Reactive Forms で FormControl を Readonly にする方法：3 つの簡単な方法

Angular Reactive Forms で FormControl を Readonly にする方法

FormControl の constructor オプションを使用する

FormControl を作成する際に、disabled オプションを true に設定することで、FormControl を Readonly にすることができます。

const myFormControl = new FormControl({
  value: '初期値',
  disabled: true
});

FormControl の disable() メソッドを使用する

既存の FormControl を Readonly にするには、disable() メソッドを使用することができます。

const myFormControl = new FormControl({
  value: '初期値'
});

myFormControl.disable();

readonly 属性を使用する

HTML テンプレートで readonly 属性を使用することで、FormControl を Readonly にすることができます。

<input type="text" formControlName="myFormControl" readonly>

• disabled オプションを使用すると、FormControl は Readonly になるだけでなく、入力もできなくなります。
• readonly 属性を使用すると、FormControl は Readonly になりますが、入力は可能になります。
• FormControl を Readonly にしても、その値は変更できます。

上記以外にも、FormControl を Readonly にする方法があります。例えば、Custom Directive を使用したり、NgOnChanges ライフサイクルフックを使用したりする方法があります。

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-readonly-form-control-constructor',
  templateUrl: './readonly-form-control-constructor.component.html',
  styleUrls: ['./readonly-form-control-constructor.component.css']
})
export class ReadonlyFormControlConstructorComponent implements OnInit {

  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      myFormControl: new FormControl({
        value: '初期値',
        disabled: true
      })
    });
  }

  ngOnInit(): void {
  }

}

<form [formGroup]="myForm">
  <input type="text" formControlName="myFormControl" readonly>
</form>

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-readonly-form-control-disable',
  templateUrl: './readonly-form-control-disable.component.html',
  styleUrls: ['./readonly-form-control-disable.component.css']
})
export class ReadonlyFormControlDisableComponent implements OnInit {

  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      myFormControl: new FormControl({
        value: '初期値'
      })
    });
  }

  ngOnInit(): void {
    this.myForm.get('myFormControl').disable();
  }

}

<form [formGroup]="myForm">
  <input type="text" formControlName="myFormControl" readonly>
</form>

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-readonly-form-control-readonly-attribute',
  templateUrl: './readonly-form-control-readonly-attribute.component.html',
  styleUrls: ['./readonly-form-control-readonly-attribute.component.css']
})
export class ReadonlyFormControlReadonlyAttributeComponent implements OnInit {

  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      myFormControl: new FormControl({
        value: '初期値'
      })
    });
  }

  ngOnInit(): void {
  }

}

<form [formGroup]="myForm">
  <input type="text" formControlName="myFormControl" readonly>
</form>

説明

• 上記のコードは、それぞれ異なる方法で FormControl を Readonly にしています。
• 1 番目のコードは、FormControl を作成する際に disabled オプションを true に設定しています。
• 2 番目のコードは、既存の FormControl を disable() メソッドを使用して Readonly にしています。
• 3 番目のコードは、HTML テンプレートで readonly 属性を使用して FormControl を Readonly にしています。
• いずれの方法を使用しても、FormControl は Readonly になります。

• 上記のコードは、Angular Reactive Forms の基本的な使用方法を示したものです。
• 実際のアプリケーションでは、より複雑なフォームを作成する必要がある場合があります。

Custom Directive を作成して、FormControl を Readonly にするロジックを実装することができます。

例

import { Directive, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Directive({
  selector: '[appReadonly]'
})
export class ReadonlyDirective {

  @Input() appReadonly: boolean;

  constructor(private formControl: FormControl) { }

  ngOnChanges(): void {
    if (this.appReadonly) {
      this.formControl.disable();
    } else {
      this.formControl.enable();
    }
  }

}

<input type="text" formControlName="myFormControl" appReadonly>

NgOnChanges ライフサイクルフックを使用する

FormControl の valueChanges イベントリスナーを使用して、FormControl の値が変更されたら Readonly 属性を更新することができます。

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-readonly-form-control-ngonchanges',
  templateUrl: './readonly-form-control-ngonchanges.component.html',
  styleUrls: ['./readonly-form-control-ngonchanges.component.css']
})
export class ReadonlyFormControlNgOnChangesComponent implements OnInit {

  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      myFormControl: new FormControl({
        value: '初期値'
      })
    });
  }

  ngOnInit(): void {
    this.myForm.get('myFormControl').valueChanges.subscribe((value) => {
      if (value === 'readonly') {
        this.myForm.get('myFormControl').disable();
      } else {
        this.myForm.get('myFormControl').enable();
      }
    });
  }

}

<form [formGroup]="myForm">
  <input type="text" formControlName="myFormControl">
</form>

RxJS を使用する

RxJS を使用して、FormControl の値が変更されたら Readonly 属性を更新する Observable を作成することができます。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { from, Observable, Subscription } from 'rxjs';

@Component({
  selector: 'app-readonly-form-control-rxjs',
  templateUrl: './readonly-form-control-rxjs.component.html',
  styleUrls: ['./readonly-form-control-rxjs.component.css']
})
export class ReadonlyFormControlRxjsComponent implements OnInit, OnDestroy {

  myForm: FormGroup;
  private subscription: Subscription;

  constructor() {
    this.myForm = new FormGroup({
      myFormControl: new FormControl({
        value: '初期値'
      })
    });
  }

  ngOnInit(): void {
    const valueChanges$ = from(this.myForm.get('myFormControl').valueChanges);

    this.subscription = valueChanges$.subscribe((value) => {
      if (value === 'readonly') {
        this.myForm.get('myFormControl').disable();
      } else {
        this.myForm.get('myFormControl').enable();
      }
    });
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

}

<form [formGroup]="myForm">
  <input type="text" formControlName="myFormControl">
</form>

• 具体的な方法については、ご自身の