angular ERROR TypeError: Cannot read properties of null (reading '

i have the following angular code and get error TypeError: Cannot read properties of null (reading '_rawValidators')

import { Component, OnInit } from '@angular/core';
import { Wifi } from './wifi';
import { WifiService } from './wifi.service';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'angular-esp';

  datalist: Array<Wifi> = [];
  wifiSelected : Wifi = {} as Wifi;
  psk = "";
  ssid = "";

  
  checkoutForm = this.formBuilder.group({
    ssid: [''],
    psk: ['']
  });
  
  constructor(private wifiservice: WifiService, private formBuilder: FormBuilder) { }

  ngOnInit()
  {
    this.wifiservice.getWifiList().subscribe(wifilist => this.datalist = wifilist);
  }

  selected(){
    this.ssid = this.wifiSelected.ssid;
  }

  onSubmit(): void {
    this.wifiservice.connect(this.checkoutForm.value).subscribe();
  }
}

follows the html:

<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">

<div >
  <select [(ngModel)]="wifiSelected" (select)="selected()">
    <option *ngFor="let item of this.datalist"  [ngValue]="item">{{item.ssid}}</option>
  </select>
</div>
<div>
  <input type="text" [(ngModel)]="ssid" formControlName="ssid">
</div>
<div [hidden]="wifiSelected.auth == 'WIFI_AUTH_OPEN'">
  <input type="password" name="psk" [(ngModel)]="psk" formControlName="psk">
</div>
<div><button  type="submit">connect</button></div>
</form>
<div>
  {{wifiSelected | json}}
</div>

at page load i get error "ERROR TypeError: Cannot read properties of null (reading '_rawValidators')" .

any suggestion?

if i comment the part of formgroup it works.

CodePudding user response：

Don't use ngModel and form controls together in the form. It's not recommended to use ngModel (template driven approach) inside a formgroup (reactive approach). If you change that hopefully it will resolve the issue.

CodePudding user response：

When I tried your code in my IDE I actually got a different error telling me I should not use ngModel within the form. I then changed html-code and the error disappeared. I think you still need to add a formControlName for your select-form-control though?

<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">

    <div >
      <select (select)="selected()">
        <option *ngFor="let item of this.datalist"  [ngValue]="item">{{item.ssid}}</option>
      </select>
    </div>
    <div>
      <input type="text" formControlName="ssid">
    </div>
    <div [hidden]="wifiSelected.auth == 'WIFI_AUTH_OPEN'">
      <input type="password" name="psk" formControlName="psk">
    </div>
    <div><button  type="submit">connect</button></div>
    </form>
    <div>
      {{wifiSelected | json}}
</div>