web-dev-qa-db-ja.com

FormGroup内のすべてのFormControlを無効にする方法

私はこれに反応性がありますAngularフォーム構造：

myForm: FormGroup;
Personal: FormGroup;
FIRST_NAME: FormControl;
LAST_NAME: FormControl;
ngOnInit(): void {
    this.createFormControls();
    this.createForm();
}
createFormControls() {
    this.FIRST_NAME = new FormControl('', [Validators.required]);
    this.LAST_NAME = new FormControl('', [Validators.required]);
}
createForm(): void {
    this.myForm = this.fb.group({
        Personal: this.fb.group({
            FIRST_NAME: this.FIRST_NAME,
            LAST_NAME: this.LAST_NAME,
        })
    })
}

私が行った場合：

this.FIRST_NAME.disable();

formControlを無効にします。

Personal FormGroupのすべてのFormControlを無効にする方法

angularangular-reactive-formsformgroups
9
Ankit Raonka

グループを無効にする場合は、this.Personalは、これでFormGroupとして宣言しただけです。

だからあなたはそれを行うことができます後にフォームを構築します：

this.Personal = this.myForm.get('Personal')

それからあなたはそれを単に無効にすることができます：

this.Personal.disable();

デモ： http://plnkr.co/edit/QAhY6A9950jqrgzvjVKu?p=preview

5
AJT_82

そのような制御を無効にすることができます。だからあなたのフォームビルダーは

 createForm(): void
    {
        this.myForm = this.fb.group({
                          Personal:this.fb.group({
                                FIRST_NAME:{value:this.FIRST_NAME,, disabled: true},
                                LAST_NAME:this.LAST_NAME,
                            })
                     })
    }

その後、無効/有効にする場合。次の方法を使用

 this.myForm.get('Personal.FIRST_NAME').disable();
 this.myForm.get('Personal.FIRST_NAME').enable();
4
Shailesh Ladumor

簡単な解決策：

<fieldset [disabled]="!frmCheckout.get('id').value">
    ... All controls inside will apply disabled rules ...
</fieldset>
2
Rodolfo Jorge Nemer Nogueira

フォーム全体を無効にすることもできますthis.Personal.disable();

または、すべてのフォームコントロールを列挙して、それらを1つずつ無効/有効にすることができます

for (var control in this.Personal.controls) {
  this.Personal.controls[control].disable();
}
1
Martin Vich

次のフォームがあるとします：

this.myForm = this.fb.group({
  personal: this.fb.group({
    firstName: null,
    lastName: null
  })
});

A）プログラムでpersonalフォームグループを有効/無効にする場合は、すでに受け入れられている回答のように、group.disable()/group.enable()を使用できます。ただし、オプション引数の重要性については触れておきます。

this.myForm.get('personal').disable({ emitEvent: false });
this.myForm.get('personal').enable({ emitEvent: false });

もちろん、オプション引数{ emitEvent: false }はオプションです。フォームからイベントを発行したい場合もあれば、発行しない場合もあります。
myForm.valueChanges.subscribe()で無効化/有効化を切り替える場合に必要です。時々、他のコントロールの値/状態に基づいて異なるコントロール/グループを有効化/無効化する必要があるためです非常に同じ形。 { emitEvent: false }がないと、無限ループが発生します。

B）初期化時に無効にする場合は、無効にするすべてのコントロールを初期化する必要があります。次のフォームグループは最初から無効になっています。

this.myForm = this.fb.group({
  personal: this.fb.group({
    firstName: [ { value: null, disabled: true }, Validators.required ],
    lastName: [ { value: null, disabled: true }, Validators.required ],
    email: [ { value: null, disabled: true }, [ Validators.required, Validators.email ] ],
    birthDate: { value: null, disabled: true }
  })
});

console.log(this.myForm.get('personal').disabled); // This will output "true"

誰かが疑問に思っている場合に備えて、例としてバリデーターも追加しました。コントロールが無効になっているときにバリデーターを気にする必要がないため、バリデーションは無視されます。

0
MrCroft