反応フォーム-無効化された属性

のdisabled属性を使用しようとしていますformControl。私がそれをテンプレートに入れると、うまくいきます：

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

しかし、ブラウザは私に警告します：

無効属性を反応フォームディレクティブで使用しているようです。コンポーネントクラスでこのコントロールを設定するときにdisabledをtrueに設定すると、disabled属性が実際にDOMに設定されます。この方法を使用して、「チェック後に変更」エラーを回避することをお勧めします。

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

だから私はそれを FormControl、テンプレートから削除しました：

constructor(private itemsService: ItemsService) {
    this._items = [];
    this.myForm = new FormGroup({
        id: new FormControl({value: '', disabled: true}, Validators.required),
        title: new FormControl(),
        description: new FormControl()
    });
    this.id = this.myForm.controls['id'];
    this.title = this.myForm.controls['title'];
    this.description = this.myForm.controls['description'];
    this.id.patchValue(this._items.length);
}

しかし、それは機能しません（を無効にしませんinput）。何が問題ですか？

私は使用しています [attr.disabled]私はまだ、このテンプレートなどは、プログラムが（有効よりも駆動するので）/無効（）、それはIMO優れているとして。

変化する

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

に

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

新しいマテリアルを使用している場合は、に変更md-inputしてくださいmat-input。

次の方法を使用して、フォームコントロールを有効または無効にできます。

control.disable（）またはcontrol.enable（）

それがうまくいかなかった場合は、ディレクティブを使用できます

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 ) {
  }

}

次に、このように使用できます

<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>

この手法については、ここで説明します。

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

それが役に立てば幸い

空の文字列であっても機能するには、デフォルト値が必要であることがわかりました。したがって、この：

this.registerForm('someName', {
  firstName: new FormControl({disabled: true}),
});

...これになる必要がありました：

this.registerForm('someName', {
  firstName: new FormControl({value: '', disabled: true}),
});

私の質問を参照してください（私は重複しているとは思わない）：フォーム状態オブジェクトで 'disabled'をFormControlコンストラクターに渡しても機能しない

私の場合はAngular 8です。状態に応じて入力の有効/無効を切り替えたいのですが。

[attr.disabled] うまくいかなかったので、これが私の解決策です。

[attr.disabled]HTMLから削除し、コンポーネント機能でこのチェックを実行しました。

if (condition) {
    this.form.controls.myField.disable();
} else {
    this.form.controls.myField.enable();
}

以下を使用した初期化（コンポーネント）：

public selector = new FormControl({value: '', disabled: true});

次に、（テンプレート）を使用する代わりに：

<ngx-select
[multiple]="true"
[disabled]="errorSelector"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

無効化された属性を削除するだけです。

<ngx-select
[multiple]="true"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

表示するアイテムがある場合は、（コンポーネントで）起動します。 this.selector.enable();

リアクティブフォームを使用している人のみ： ネイティブHTML要素[attr.disabled]は機能しますが、マテリアル要素の場合は動的に要素を無効にする必要があります。

this.form.get('controlname').disable();

それ以外の場合は、コンソールの警告メッセージに表示されます。

これらを角度7で試しました。

this.form.controls['fromField'].reset();
if(condition){
      this.form.controls['fromField'].enable();
}
else{
      this.form.controls['fromField'].disable();
}

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

1つのformcontrolは無効にします

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

または初期設定メソッド。

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

[無効]の代わりに[attr.disabled]を使用します。私の場合は問題なく動作します

HTMLフィールドにdisable = "true"を追加します例：disable

<amexio-text-input formControlName="LastName" disable="true" [(ngModel)]="emplpoyeeRegistration.lastName" [field-label]="'Last Name'" [place-holder]="'Please enter last name'" [allow-blank]="true" [error-msg]="'errorMsg'" [enable-popover]="true" [min-length]="2"
[min-error-msg]="'Minimum 2 char allowed'" [max-error-msg]="'Maximum 20 char allowed'" name="xyz" [max-length]="20">
[icon-feedback]="true">
</amexio-text-input>

リアクティブフォームの利点は、任意の入力要素の値変更イベントを非常に簡単にキャッチできると同時に、それらの値/ステータスを変更できることです。したがって、を使用して問題に対処する別の方法がありますenable disable。

これがstackblitzの完全なソリューションです。

フォーム検証を使用している場合、マットフォームフィールドの無効化は免除されます。したがって、フォームフィールドに（validators.required）のような検証がないことを確認してください。これは私にとってうまくいきました。例：

editUserPhone：新しいFormControl（{value： ''、disabled：true}）

これにより、ユーザーの電話番号を編集できなくなります。

これは私の解決策でした：

this.myForm = this._formBuilder.group({
    socDate: [[{ value: '', disabled: true }], Validators.required],
    ...
)}

<input fxFlex [matDatepicker]="picker" placeholder="Select Date" formControlName="socDate" [attr.disabled]="true" />

角度-9は、無効にしたい場合は/ここでボタンをクリックして有効にするには、反応性のフォームを使用している場合、簡単なソリューションです。

component.tsファイルで関数を定義する

//enable example you can use the same approach for disable with .disable()

toggleEnable() {
  this.yourFormName.controls.formFieldName.enable();
  console.log("Clicked")
} 

あなたのcomponent.htmlからそれを呼び出します

例えば

<button type="button" data-toggle="form-control" class="bg-primary text-white btn- 
                reset" style="width:100%"(click)="toggleEnable()">

新しいフォームコントロールを作成するときは、次を使用します。

variable: FormControl = new FormControl({value: '', disabled: true});

変更アクティビティが必要な場合は、次を使用します。

this.variable.enable() 

または

this.variable.disable()

md-inputにname属性を追加します。問題が解決しない場合は、テンプレートを投稿してください

これを行うための究極の方法。

ngOnInit() {
  this.interPretationForm.controls.InterpretationType.valueChanges.takeWhile(()=> this.alive).subscribe(val =>{
    console.log(val); // You check code. it will be executed every time value change.
  })
}