javascript - TypeError: Kan inte läsa egenskaper av null (läser '_rawValidators')

Jag försöker använda formgroup och formcontrol i Angular men vid ng serve, returnerar det ett fel i konsolen

Vet någon hur man fixar det?

TypeError: Kan inte läsa egenskaper av null (läser '_rawValidators')

min 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>

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

Svar #1

@MikeOne löste problemet, kombinationen av reaktiva kontroller och ngModel var problemet. Jag bytte från ngModel till formControlName och det fungerar

Svar #2

Tack till @AndrewKushnir

Detta är inte ett problem. Det är mycket enkelt. När du använder formControlName och inte lägger till det i dina formControls i component.ts, då kommer du att se problemet Cannot read properties of null (reading '_rawValidators'), vi kan ha ett tydligare meddelande här, till exempel, du deklarerar inte **** kontrollnamn.

Möjligheter att reproducera

  1. Formkontrollnamn matchar inte
  2. Lade till Formcontrolname som inte fanns i formcontrol
  3. om man använder typformulären kan det uppstå vissa konflikter mellan att skapa och initiera formulärkontrollen

länk : https://github.com/angular/angular/issues/48379

Relaterade artiklar