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
1