TypeError: Cannot read properties of null (reading '_rawValidators')

Question

I'm trying to use formgroup and formcontrol at Angular but on ng serve,its returning an error at console

Does anyone knows how to fix it?

TypeError: Cannot read properties of null (reading '_rawValidators')

my HTML:

                        <form [formGroup]="formOrcamento">
                        <div class="row">
                            <div class="col-md-4">
                                <mat-form-field class="example-full-width" appearance="outline">
                                    <mat-label>Quantidade de passagens</mat-label>
                                    <input matInput type="number" value="qtdPassagens" formControlName="qtdPassagens">
                                </mat-form-field>
                            </div>
                            <div class="col-md-4">
                                <mat-form-field appearance="outline">
                                    <mat-label>Ida e Volta?</mat-label>
                                    <mat-select [(ngModel)]="idaEVolta">
                                        <mat-option value="false">Somente IDA</mat-option>
                                        <mat-option value="true">IDA E VOLTA</mat-option>
                                    </mat-select>
                                </mat-form-field>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <mat-form-field class="example-full-width" appearance="outline">
                                    <mat-label>Valor no PIX</mat-label>
                                    <input matInput type="number" value="valorVendaPIX" formControlName="valorVendaPIX">
                                </mat-form-field>
                            </div>
                            <div class="col-md-4">
                                <mat-form-field class="example-full-width" appearance="outline">
                                    <mat-label>Milhas</mat-label>
                                    <input matInput type="number" value="qtdMilhas" formControlName="qtdMilhas">
                                </mat-form-field>
                            </div>
                        </div>
                    </form>

my TS:

export class OrcamentoComponent implements OnInit {
  formOrcamento: FormGroup;

  constructor(private service: melteraService) {
  this.formOrcamento = new FormGroup({
    qtdPassagens: new FormControl(),
    valorVendaPIX: new FormControl(),
    qtdMilhas: new FormControl()
  })
}

Answer 1

@MikeOne solve the problem, the combine of reactive controls and ngModel was the problem. I change from ngModel to formControlName and it works

Answer 2

Thank to @AndrewKushnir

This is not an issue. it is very easy. when you use formControlName and do not add it to your formControls in component.ts, then you will see issue Cannot read properties of null (reading '_rawValidators'), we can have more clear message here for example, you do not declares **** control name.

Possibilities to reproduce

1. Formcontrol name mismatch
2. Added Formcontrolname which was not there in the formcontrol
3. if using the type forms there may be some conflicts between creating and initializing the form control

link : https://github.com/angular/angular/issues/48379