formGroup.get vs formGroup.controls in reactive form - Angular

Question

Is there any preferred way when selecting validation using

myForm.controls['name'].valid
myForm.get('name').valid

as both seems to be only syntactically different but achieving the same goal.

<label>Name
  <input type="text" formControlName="name">
</label>
<div class="alert" *ngIf="!myForm.controls['name'].valid && myForm.controls['name'].touched">
  {{ titleAlert }}
</div>

Same as

<div class="alert" *ngIf="!myForm.get('name').valid && myForm.get('name').touched">
  {{ titleAlert }}
</div>

From what I checked in the code, get has this code:

AbstractControl.prototype.get = function (path) { return _find(this, path, '.'); };

I have just started Angular, so an expert opinion would be appreciated.

score 55 · Accepted Answer · edited Apr 04 '18 at 05:33

55

Just like what you have found, FormGroup.get is designed to access target formcontrol by it's path. And it's more often used for complicated(multi layer embed) situation, which makes it easy to get the target control from multi layer embed form and also makes code clear and easily to understand.

Take below as a example, you can simply access the first element of the embed FormArray by this.form.get('test.0') instead of this.form.controls.test.controls[0]:

this.form = this.formBuilder.group(
  {
    test: this.formBuilder.array(
      [
        ['form control 1 in form array'],
        ['form control 1 in form array'],
        ...
      ]
    )
  }
);

edited Apr 04 '18 at 05:33

yurzui

205,937
32
433
399

answered Apr 04 '18 at 05:25

Pengyy

37,383
15
83
73

12

Though it is recommended to create a getter function, in order to avoid using such a syntax over and over. `get nestedFormArray(): FormArray { return this.heroForm.get('nestedFormArray') as FormArray; };` – lf303 Apr 04 '18 at 09:28
You should make your answer a little clearer that the real answer is: "it depends". But still a good explanation bc I learned something new! – Joshua Kemmerer Nov 21 '19 at 21:55

score 8 · Answer 2 · answered Nov 03 '20 at 11:54

This question is related to: Will using Angular Reactive Forms .get() method in template cause unnecessary method calls like a component method?.

In templates I prefer using myForm.controls.name to avoid the myForm.get('name') function call. If the field selector is very complex, then I would store the field in a component attribute so in the template its access is instant.

In controllers it shouldn't matter too much using one or another.

formGroup.get vs formGroup.controls in reactive form - Angular

2 Answers2

Linked