私はすでにここから他の答えの例を試そうとしましたが、成功しませんでした！

リアクティブフォーム（動的）を作成し、いくつかのフィールドを常に無効にしたいと考えています。私のフォームコード：

this.form = this._fb.group({
  name: ['', Validators.required],
  options: this._fb.array([])
});

const control = <FormArray>this.form.controls['options'];
control.push(this._fb.group({
  value: ['']
}));

私のhtml：

<div class='row' formArrayName="options">
  <div *ngFor="let opt of form.controls.options.controls; let i=index">
    <div [formGroupName]="i">
      <select formArrayName="value">
        <option></option>
        <option>{{ opt.controls.value }}</option>
      </select>
    </div>
  </div>
</div>

簡単にするためにコードを減らしました。タイプ選択のフィールドを無効にしたい。私は次のことを試みました：

form = new FormGroup({
  first: new FormControl({value: '', disabled: true}, Validators.required),
});

動かない！誰か提案がありますか？

name: [{value: '', disabled: true}, Validators.required],
name: [{value: '', disabled: this.isDisabled}, Validators.required],

または

this.form.controls['name'].disable();

注意を払う

条件に変数を使用してフォームを作成し、後で変更しようとすると、機能しません。つまり、フォームは変更されません。

例えば

this.isDisabled = true;

this.cardForm = this.fb.group({
    'number': [{value: null, disabled: this.isDisabled},
});

変数を変更した場合

this.isDisabled = false;

フォームは変更されません。あなたは使うべきです

this.cardForm.get（ 'number'）。disable（）;

ところで。

値を変更するには、patchValueメソッドを使用する必要があります。

this.cardForm.patchValue({
    'number': '1703'
});

反応型フォームを持つDOMでdisableを使用することは悪い習慣です。FormControlfromを初期化するときに、このオプションをで設定できます。

username: new FormControl(
  {
    value: this.modelUser.Email,
    disabled: true
  },
  [
    Validators.required,
    Validators.minLength(3),
    Validators.maxLength(99)
  ]
);

プロパティvalueは必要ありません

または、フォームコントロールを取得しget('control_name')て設定することもできますdisable

this.userForm.get('username').disable();

入力オブジェクトをフィールドセットのラベルでラップすることで解決しました。フィールドセットには、ブール値にバインドされたdisabledプロパティが必要です

 <fieldset [disabled]="isAnonymous">
    <label class="control-label" for="firstName">FirstName</label>
    <input class="form-control" id="firstName" type="text" formControlName="firstName" />
 </fieldset>

disablingFormControlは、preventsそれはしばらくの形で存在することにしますsaving。readonlyプロパティに設定するだけです。

そして、あなたはこの方法でそれを達成することができます：

HTML：

<select formArrayName="value" [readonly] = "disableSelect">

TS：

this.disbaleSelect = true;

ここでこれを見つけた

disabledフォーム入力要素を使用する場合（正しい回答で 入力を無効にする方法など）、それらの検証も無効になるので、注意してください！

（そして、あなたが[disabled]="!form.valid"それのような送信ボタンを使用している場合、検証からあなたのフィールドを除外します）

より一般的なアプローチになります。

// Variable/Flag declare
public formDisabled = false;

// Form init
this.form = new FormGroup({
  name: new FormControl({value: '', disabled: this.formDisabled}, 
    Validators.required),
 });

// Enable/disable form control
public toggleFormState() {
    this.formDisabled = !this.formDisabled;
    const state = this.formDisabled ? 'disable' : 'enable';

    Object.keys(this.form.controls).forEach((controlName) => {
        this.form.controls[controlName][state](); // disables/enables each form control based on 'this.formDisabled'
    });
}

first（formcontrol）を無効にしたい場合は、以下のステートメントを使用できます。

this.form.first.disable();

これは私のために働きました： this.form.get('first').disable({onlySelf: true});

this.form.enable()
this.form.disable()

またはformcontrol 'first'

this.form.get('first').enable()
this.form.get('first').disable()

初期設定で無効または有効に設定できます。

 first: new FormControl({disabled: true}, Validators.required)

lastName: new FormControl({value: '', disabled: true}, Validators.compose([Validators.required])),

最善の解決策はここにあります：

https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

解決策の概要（リンク切れの場合）：

（1）ディレクティブを作成する

import { NgControl } from '@angular/forms';

@Directive({selector: '[disableControl]'})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {}
}

（2）そのまま使う

<input [formControl]="formControl" [disableControl]="condition">

（3）無効化された入力は送信時にform.valueに表示されないため、代わりに以下を使用する必要がある場合があります（必要な場合）：

onSubmit(form) {
  const formValue = form.getRawValue() // gets form.value including disabled controls
  console.log(formValue)
}

同じ問題がありましたが、（router.navigate（）を使用して）ビューをリロードしていたため、this.form.controls ['name']。disable（）を呼び出しても修正されませんでした。

私の場合、リロードする前にフォームをリセットする必要がありました：

this.form = undefined; this.router.navigate（[path]）;

setTimeout(() => { emailGroup.disable(); });

すべてのフォームコントロールを有効/無効にする関数を宣言できます。

  toggleDisableFormControl(value: Boolean, exclude = []) {
    const state = value ? 'disable' : 'enable';
    Object.keys(this.profileForm.controls).forEach((controlName) => {
      if (!exclude.includes(controlName))
        this.profileForm.controls[controlName][state]();
    });
  }

このように使います

this.toggleDisableFormControl(true, ['email']);
// disbale all field but email

フィールドを無効化および有効化するには、角度2+の反応型を有効にします

1. 無効にする

• [attr.disabled] = "true"を入力に追加します。

<input class="form-control" name="Firstname" formControlName="firstname" [attr.disabled]="true">

有効にする

export class InformationSectionComponent {
formname = this.formbuilder.group({
firstname: ['']
});
}

フォーム全体を有効にする

this.formname.enable();

特定のフィールドのみを有効にする

this.formname.controls.firstname.enable();

disableの場合も同じです。enable（）をdisable（）に置き換えます。

これは問題なく動作します。クエリのコメント。