Angular 2 無効化されたコントロールが form.value に含まれない問題

問題

フォームコントロールが無効化されている場合、そのコントロールの値は form.value オブジェクトに含まれません。これは、無効な値をフォームデータに含めないようにするためです。

解決策

無効化されたコントロールの値を form.value に含めるには、次のいずれかの方法を使用できます。

1. 無効化されたコントロールを含む別のオブジェクトを作成する

const formValue = {
  ...this.form.value,
  disabledControlValue: this.disabledControl.value
};

1. form.getRawValue() を使用する

const formValue = this.form.getRawValue();

form.getRawValue() は、無効化されたコントロールを含む、フォームのすべての値を含むオブジェクトを返します。

例

次の例では、disabledControl という名前の無効化されたフォームコントロールがあります。

<input type="text" [(ngModel)]="disabledControl" disabled>

form.value の値は次のようになります。

{
  "disabledControl": null
}

無効化されたコントロールの値を含む別のオブジェクトを作成するには、次のコードを使用できます。

const formValue = {
  ...this.form.value,
  disabledControlValue: this.disabledControl.value
};

{
  "disabledControl": "some value"
}

form.getRawValue() を使用するには、次のコードを使用できます。

const formValue = this.form.getRawValue();

{
  "disabledControl": "some value"
}

<form [formGroup]="form">
  <input type="text" [(ngModel)]="firstName" formControlName="firstName">
  <input type="text" [(ngModel)]="lastName" formControlName="lastName">
  <button type="button" (click)="submit()">Submit</button>
</form>

// app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  form: FormGroup;

  constructor() { }

  ngOnInit() {
    this.form = new FormGroup({
      firstName: new FormControl(),
      lastName: new FormControl()
    });
  }

  submit() {
    // Form data
    const formValue = this.form.value;

    // Disabled control value
    const disabledControlValue = this.form.get('lastName').disabled ? null : this.form.get('lastName').value;

    // Form data with disabled control value
    const formValueWithDisabledControl = {
      ...formValue,
      disabledControlValue
    };

    console.log('Form data:', formValue);
    console.log('Disabled control value:', disabledControlValue);
    console.log('Form data with disabled control value:', formValueWithDisabledControl);
  }

}

このコードを実行すると、次の出力がコンソールに表示されます。

Form data: {
  "firstName": "John",
  "lastName": null
}
Disabled control value: null
Form data with disabled control value: {
  "firstName": "John",
  "lastName": "Doe"
}

無効化されたコントロールの値を取得する他の方法

form.get() を使用する

form.get() メソッドを使用して、無効化されたコントロールを取得できます。

const disabledControl = this.form.get('lastName');

// Get the value of the disabled control
const disabledControlValue = disabledControl.value;

form.getRawValue() メソッドを使用して、フォームのすべての値を含むオブジェクトを取得できます。このオブジェクトには、無効化されたコントロールの値も含まれます。

const formValue = this.form.getRawValue();

// Get the value of the disabled control
const disabledControlValue = formValue['lastName'];

form.valueChanges を使用する

form.valueChanges サブスクリプションを使用して、フォームの値が変更されたときに通知を受け取ることができます。このサブスクリプションを使用して、無効化されたコントロールの値が変更されたときにも通知を受け取ることができます。

this.form.valueChanges.subscribe((formValue) => {
  // Get the value of the disabled control
  const disabledControlValue = formValue['lastName'];
});