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

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()
  })
}


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Daniel Villar