[Bug] formgroup elementos

[bug]

como definido no ngOnInit

    this.cadastroForm = this.fb.group({
      areasAtuacao: ['', Validators.required],
      niveisExperiencia: ['', Validators.required]
    });

use areasAtuacao e niveisExperiencia no html:

<app-radio-option
...
[checked]="cadastroForm.get('areasAtuacao')?.value === area.value"
>
</app-radio-option>

Adaptei para usar @if:

@if (cadastroForm.get('areasAtuacao')?.touched && cadastroForm.get('areasAtuacao')?.invalid) {
  <div class="cadastro-form__error">
    Por favor, selecione uma área de atuação.
  </div>
}

<app-experience-level
...
[selectedLevel]="cadastroForm.get('niveisExperiencia')?.value"
></app-experience-level>

e

@if (cadastroForm.get('niveisExperiencia')?.touched && cadastroForm.get('niveisExperiencia')?.invalid) {
  <div class="cadastro-form__error">
    Por favor, selecione um nível de experiência.
  </div>
}

[sugestão 1]
Poderia ter usado input signal e output ao invés de @Input() e @Output(), ex:

  @Input() levels: ExperienceLevel[] = [];
  @Input() selectedLevel: string = '';
  @Output() levelChange = new EventEmitter<string>();

use

  levels = input<ExperienceLevel[]>([]);
  selectedLevel = input<string>('');
  levelChange = output<string>();

ou se forem required:

levels = input.required<ExperienceLevel[]>();
selectedLevel = input.required<string>();
levelChange = output.required<string>();

[sugestão 2]

poderia ter usado @for

@for (area of areasAtuacao; track area.id) {
  <app-radio-option
    [id]="area.id"
    [name]="'areaAtuacao'"
    [value]="area.value"
    [label]="area.label"
    [checked]="cadastroForm.get('areasAtuacao')?.value === area.value"
    (selectionChange)="onAreaChange($event)"
  >
  </app-radio-option>
}

[sugestão 3]
Tem algumas formas de exbir as mensagens de validação deste primeiro form, porém não quero me estender aqui

No mais boa aula !