web-dev-qa-db-ja.com

FormBuilderで無効なフォームグループを作成する

FormBuilderを介して初期化されるmyFormGroupがあるとします。

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

たとえば、次のように特定のフォームコントロールを無効にできることを認識しています。

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

もちろん、この例ではこの構文を使用して、グループ内のすべてのコントロールを無効としてマークすることができます。ただし、フォームグループには多くのコントロールがある場合があります。

だから質問-FormGroup/FormArray全体を無効にする方法はありますか作成中（後ではない） FormBuilderを介してそれを無効にしますか？

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

angularangular-reactive-formsangular-forms
10
shohrukh

試してください：

this.myFormGroup = this.fb.group(
  {
    field1: [{ value: '', disabled: true }, SomeValidator1],
    field2: [{ value:'', disabled: true }, AnotherValidator2],
    field3: [{ value:'', disabled: true}],
    ...
  }
);
5
Luis Felipe Diaz Valbuena

あなたは呼び出すことができます FormGroup.disable 小さなヘルパーで作成した直後：

const disableFormGroup = (fg: FormGroup) => {fg.disable(); return fg}

form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: disableFormGroup(this.fb.group({
        new: ['', Validators.required],
        confirm: ''
    }))
})
1
Klaster_1

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

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

また、あなたはこれを動的に無効にしてフォームコントロールを有効にすることもできます

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();
0
Baraka Ally