FormBuilderを使用して無効なフォームグループを作成します -- angular フィールド と angular-reactive-forms フィールド と angular-forms フィールド 関連 問題

Create disabled form group with FormBuilder












12
vote

問題

日本語

FormBuilder経由で初期化されている myFormGroup があるとしましょう。

<事前> <コード> this.myFormGroup = this.fb.group( { field1: ['', SomeValidator1], field2: ['', AnotherValidator2], field3: [''], ... } );

特定のフォームコントロールを無効にすることができます。たとえば、

<事前> <コード> fb.control({value: 'my val', disabled: true}); もちろん、この構文を使用すると、グループ内の単一のコントロールごとに無効としてマークを付けることができます。しかし、フォームグループには多くのコントロールがあるかもしれません。

だから問題 - FormBuilderを介して

を介してを作成しながら、FormGroup / FormArray 全体を無効にする方法はありますか。

p.S。私がこの質問をする理由は、さまざまな種類のユーザー権限のためにアクティブまたは無効なフィールドを持つフォームグループを条件付きで初期化する必要があるためです。

英語

Let's say we have myFormGroup which is initialized via FormBuilder:

this.myFormGroup = this.fb.group(   {     field1: ['', SomeValidator1],     field2: ['', AnotherValidator2],     field3: [''],     ...   } ); 

I'm aware that we can disable particular form control, for instance:

fb.control({value: 'my val', disabled: true}); 

Of course I can use this syntax in my example and mark as disabled every single control in the group. But the form group might have a lot of controls.

So the question - is there any way to disable entire FormGroup/FormArray while creating (not after) it via FormBuilder?

p.s. The reason I'm asking this question is because I need conditionally initialize form group with active or disabled fields for different kind of user privileges.

</div
        
         
         

回答リスト

13
 
vote

私は同じ問題を有し、角度式の範囲内容は制御の初期状態を受け取り、そしてparamが{value:any、disabled:boolean、.....}の場合の検証パラメータがこの構造体を満たす場合は、コントロールを初期化します。値と無効/アクティブな。

試してみてください:

<事前> <コード> this.myFormGroup = this.fb.group( { field1: [{ value: '', disabled: true }, SomeValidator1], field2: [{ value:'', disabled: true }, AnotherValidator2], field3: [{ value:'', disabled: true}], ... } );
 

I had same problem, Angular FormBuilder receives, initial state of control, and verify if the param its like to { value: any, disabled: boolean, ..... } if the parameter meets this struct, initialize the control with value and disabled/active.

try:

this.myFormGroup = this.fb.group(   {     field1: [{ value: '', disabled: true }, SomeValidator1],     field2: [{ value:'', disabled: true }, AnotherValidator2],     field3: [{ value:'', disabled: true}],     ...   } ); 
</div
 
 
     
     
1
 
vote

このコードを試してみてください:

<事前> <コード> enableForm(group: FormGroup, enable:boolean) { for (const i in group.controls) { if(enable) { group.controls[i].enable(); } else { group.controls[i].disable(); } } }
 

Try this code:

enableForm(group: FormGroup, enable:boolean) {    for (const i in group.controls) {       if(enable) {         group.controls[i].enable();       } else {         group.controls[i].disable();       }    } } 
</div
 
 
 
 
1
 
vote

抽象コントロール

の拡張を作成できます。 <事前> <コード> import {AbstractControl} from '@angular/forms'; declare module '@angular/forms' { interface AbstractControl { markAsDisabled(disable: boolean, onlySelf?: boolean): void; markAllAsDisabled(disable: boolean, onlySelf?: boolean): void; } } function markAsDisabled(disable: boolean, onlySelf?: boolean): void { if (disable) { this.disable(); } else { this.enable(); } if (this._parent && !onlySelf) { this._parent.markAsDisabled(disable, onlySelf); } } function markAllAsDisabled(disable: boolean, onlySelf?: boolean): void { this.markAsDisabled(disable, onlySelf); Object.keys(this.controls).forEach(k => { (this.controls[k] as AbstractControl).markAsDisabled(disable, onlySelf); }); } AbstractControl.prototype.markAsDisabled = markAsDisabled; AbstractControl.prototype.markAllAsDisabled = markAllAsDisabled;

それからちょうど

を呼び出す <事前> <コード> // Diabled this.myFormGroup.markAllAsDisabled(true); // Enabled this.myFormGroup.markAllAsDisabled(false);

デモ

 

We can create an extension for AbstractControl

import {AbstractControl} from '@angular/forms';  declare module '@angular/forms' {   interface AbstractControl {     markAsDisabled(disable: boolean, onlySelf?: boolean): void;     markAllAsDisabled(disable: boolean, onlySelf?: boolean): void;   } }  function markAsDisabled(disable: boolean, onlySelf?: boolean): void {   if (disable) {     this.disable();   } else {     this.enable();   }    if (this._parent && !onlySelf) {     this._parent.markAsDisabled(disable, onlySelf);   } }  function markAllAsDisabled(disable: boolean, onlySelf?: boolean): void {   this.markAsDisabled(disable, onlySelf);    Object.keys(this.controls).forEach(k => {     (this.controls[k] as AbstractControl).markAsDisabled(disable, onlySelf);   }); }  AbstractControl.prototype.markAsDisabled = markAsDisabled; AbstractControl.prototype.markAllAsDisabled = markAllAsDisabled; 

then just call

// Diabled this.myFormGroup.markAllAsDisabled(true);  // Enabled this.myFormGroup.markAllAsDisabled(false);  

DEMO

</div
 
 
0
 
vote

また、ダイナミックディセーブルとイネーブルフォームコントロール

をイネーブルにすることもできます。 <事前> <コード> this.contactInfo = this.fb.group({ email: ['', Validators.required], phone: ['', Validators.required] }); //disable form: only phone control this.contactInfo.get('phone').disable(); //enable form :phone control this.contactInfo.get('phone').enable();
 

Also you may try this to dynamic disable and enable form control

this.contactInfo = this.fb.group({       email: ['', Validators.required],       phone: ['', Validators.required]     }); //disable form: only phone control this.contactInfo.get('phone').disable();  //enable form :phone control this.contactInfo.get('phone').enable(); 
</div
 
 
0
 
vote

創造の直後にグループを無効にするよりも優れた解決策が見つかりませんでした。

<事前> <コード> // original code this.myFormGroup = this.fb.group({ field1: ['', SomeValidator1], field2: ['', AnotherValidator2], field3: [''], ... }); // added this.myFormGroup.disable();

この解決策は Luis Felipe Diaz Valbuena's { disable: true } 各フィールド10以上のフィールドにこれをすることを想像してみてください。

 

I didn't find any better solution than just disable the group right after its creation.

// original code this.myFormGroup = this.fb.group({   field1: ['', SomeValidator1],   field2: ['', AnotherValidator2],   field3: [''],   ... }); // added this.myFormGroup.disable(); 

This solution is better than Luis Felipe Diaz Valbuena's, because you don't need to { disable: true } each field. Imagine doing this for 10+ fields.

</div
 
 

関連する質問

0  Angular 6:フォームを搭載したカレンダー/デートピッカーをどのようにしていますか?  ( Angular 6 how to intergarte calender date picker with form ) 
2つのDIVがあり、ユーザーが欲しい日付を選択できる日付ピッカー/カレンダーが含まれています、2秒には電子メール、Citym、Hotel、のフォームが含まれています。 だからユーザーは日付を選択してフォームを記入して、書籍をクリックして送信してください。 こ...

0  フォームアレイからの角度から  ( Angular getting from forms arrays ) 
Angular 6でCRUDアプリを作っていますが、ページの編集に進むと、そのページの入力フィールドに配列からデータを渡したいが、そのページデータを再度配列に保存する必要がある場合(できます。写真を見てください)私はそれをアレイのように保存しなければならない...

0  NGControlStatus(有効、無効、手付かず、汚れなど)が機能していません<select>  ( Ngcontrolstatus valid invalid pristine dirty etc not working on select ) 
私はmytest.pristineの条件で私の選択にクラスを追加しようとしているときにいくつかのフォーム検証をしようとしています。ただし、これは通常の入力でうまく機能します。下のマイ例をご覧ください。 <事前> <コード> <div class="form-g...

5  クエリパラメータを使用してテンプレート駆動型フォームを初期化します  ( Initialize template driven form with query parameters ) 
テンプレート駆動形式をクエリパラメータ値で初期化したいと思います。 直感的にフォームを作成して ngAfterViewInit :: に入力します。 HTML <事前> <コード> <form #f="ngForm"> <input type=...

0  子コンポーネントにカプセル化された角マットフォームフィールド  ( Angular mat form field encapsulated in child component ) 
子コンポーネントの<コード> mat-form-field をカプセル化する方法を示す簡単な例は? 私が欲しいもの <事前> <コード> <form [formGroup]="form"> <my-component formControlN...

2  Mat-DatePickerを使用して挿入するときは無効です  ( Date invalid when inserting with mat datepicker ) 
フォーマット dd / mm / yyyy の入力を入力して日付を挿入する場合、フィールドは無効になります。フォームが無効になると、レコードを保存できません。 しかし、DatePickerを使用してフィールドが有効になる日付を挿入した場合。 DatePick...

0  FormGroupのどのプロパティをelevated ValueChangesイベントで識別する方法  ( How to identify which property in the formgroup emitted valuechanges event ) 
は入れ子状の群の構造です。 <事前> <コード> this.userProfileSettingsForm = fb.group({ general: fb.group({ language: [], them...

0  新しい要素が追加されたときの既存のFormArray要素の角度更新の有効性  ( Angular updates validity of existing formarray elements when new element is adde ) 
そして私はこれを望んでいません。 FormArray の各要素を非同期的に検証しているので、バリデータは必要に応じて実行するだけで実行されます(すなわち、それらが本当に変更されたコントロールの値)。 FormArray の変更の場合には、新しい要素が追加さ...

7  FormGroupの作成時の関数ではありません  ( Control setparent is not a function when dymanically creating formgroup ) 
angular5を使用しています、そして私はフィールドのリストを持っています、それぞれの名前とformcontrolがあります。このコードを使用して、グループにコントロールを動的に追加しようとしますが、エラーが発生しました。 <事前> <コード> const...

1  HTTP呼び出しで角度の形式のカスタムバリデータHTTP観察可能なNULLを返す  ( Angular form custom validator http observable returning null on http call ) 
電子メールが存在するかどうかを確認するフォームフィールドを設定しようとしています。私はいくつかの例を見て検証が行われてきましたが、私がHTTPパイプを実装するとき、私のサービスの観察可能なマップを行い、それをNULLとしてスローしますか?私は私のサービスからそ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有