angular 错误类型错误：无法读取 null 的属性（读取“_rawValidators”）

Question

我有以下 angular 代码并收到错误 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();
  }
}

跟随 html：

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

<div class="section">
  <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 class="button" type="submit">connect</button></div>
</form>
<div>
  {{wifiSelected | json}}
</div>

在页面加载时出现错误“错误类型错误：无法读取 null 的属性（读取‘_rawValidators’）”。

有什么建议吗？

如果我评论它工作的 formgroup 的一部分。

Answer 1

不要在表单中一起使用 ngModel 和表单控件。 不建议在表单组（反应式方法）中使用 ngModel（模板驱动方法）。 如果您更改它，希望它能解决问题。

Answer 2

当我在我的 IDE 中尝试你的代码时，我实际上得到了一个不同的错误，告诉我我不应该在表单中使用 ngModel。 然后我更改了 html 代码，错误消失了。 我认为您仍然需要为select -control 添加formControlName吗？

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

    <div class="section">
      <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 class="button" type="submit">connect</button></div>
    </form>
    <div>
      {{wifiSelected | json}}
</div>