2017-02-11 16 views
5

私は反応するフォームを持っています。私はコントロールを無効にして編集します。フォームコントロールは無効にするが、値を保持する方法

以下の作品は:

this.myForm.controls['analysis_horizon'].disable(); 

しかし、キーanalysis_horizo​​nは私のmyForm.valueハッシュではなくなり。

どのように反応形式のフィールドを無効にしますが、フォーム値のハッシュ値を保持するにはどうすればよいですか?

私は[無効]を試みた=が、私は以下の取得:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true 
     when you set up this control in your component class, the disabled attribute will actually be set in the DOM for 
     you. We recommend using this approach to avoid 'changed after checked' errors. 

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

私はフォームコントロールに編集上の私のデータベースからデータをロードするが、私は変更することは許されない1つのフィールドを必要としています。

+0

。 – micronyks

+0

それは変更されていないことを考えれば、それを消費しているものであれば、Object.assignなどで値を自分自身に戻すことができます。 – jonrsharpe

+0

私は誤解しているかもしれませんが、メッセージが示唆しているようにしてください: 'yourFormControl:new FormControl({value:yourPresetValue、disabled:true})' – Alex

答えて

10

あなたはgetRawValue()の代わりにプロパティのを使用することができます。 documentation

無効なコントロールを含むFormGroupの集計値です。

無効なステータスに関係なくすべての値を含める場合は、 このメソッドを使用してください。それ以外の場合は、の値がグループの値 を取得する最も良い方法です。ここで

this.myForm.getRawValue() 
0

あなたはフォームから値を取得する通常の方法を変更するgetRawValueを使用したくない場合は別のオプションです。私が読んだほうがいい理由をもっとたくさんの理由:https://stackoverflow.com/a/7730719/1678151

私のソリューションでは、フォームコントロールの記入方法も示しています。

component.ts

fillForm(data: any){ 
if (data != null && data.firstName){ 
    this.form.patchValue({ 
    firstName: data.firstName 
    })  
    this.firstNameIsReadOnly = true; 
} 

template.html

<input formControlName="firstName" [readonly]='firstNameIsReadOnly'> 

styles.scssそれはあなたではなくformcontrolでそれを使用するよりも、HTMLで直接disabled属性を使用するように指示し

input[readonly] { 
color: rgba(0,0,0,.38); 
} 
関連する問題