I'm having a lot of trouble differentiating formBuilder and formGroup

I'm studying a code in Angular and I have the following codes

cadastro.component.HTML

<form [formGroup]="addressForm" novalidate (ngSubmit)="onSubmit()">
<mat-card class="shipping-card">
<mat-card-header>
<mat-card-title>Cadastro</mat-card-title>
</mat-card-header>
<mat-card-content>

<div class="row">
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Nome" formControlName="firstName">
@if (addressForm.controls) {
<mat-error>Nome é <strong>obrigatório</strong></mat-error>
}
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="full-width">
<input matInput placeholder="Email" formControlName="email">
@if (addressForm.controls['email'].hasError('required')) {
<mat-error>Email é <strong>obrigatório</strong></mat-error>
}
</mat-form-field>
</div>
</div>
</mat-card>
</form>


cadastro.component.ts

export class CadastroComponent {
private fb = inject(FormBuilder);


addressForm = this.fb.group({

firstName: [null, Validators.required],
email: [null, Validators.required]

});

}


Looking at this code, is the developer using formBuilder and formGroup together? is this possible?

In the cadastro.component.html file, What does the 'controls' method do? on the line where addressForm.controls is, I looked in the documentation and didn't find this 'controls' method anywhere

Continue reading...