Angular Reactive Forms controls vs Get

Question

What is the difference between when i get the values in Reactive forms in below ways:

this.someForm.controls['firstName'].value
this.someForm.get('firstName').value

public someForm: FormGroup = this.formBuilder.group({
  firstName: ['', Validators.required],
});

this.someForm.controls['firstName'].value
this.someForm.get('firstName').value<br>

Above is my form and two different ways to get values from the form. But what is the difference b/w both ways if any ?

Pronto

netbasal.com/…, basically is not diference (at the moment), but nobody sure us that this not change in a future – Holster

Ya i also use to think that there are no differences but i saw some diff behaviour when i used valueChanges in both scenarios. – Pronto

Answer 1

There are not many differences between these two but Angular team might opt to change the FormGroup structure in the future, and if we use the controls property directly, it might lead to a breaking change, whereas the get() method could adjust to reflect the new structure.

FormGroup.get is designed to access target formcontrol by it's path, which makes it easy to get the target control from multi layer embed form and also makes code clear and easily to understand.

There is not much info about this but you can read something very much similar here,

• formGroup.get vs formGroup.controls in reactive form - Angular
• angular-reactive-forms-tips

Silveira