core.js:6210 错误类型错误：无法读取 null 的属性“writeValue”

Question

我在 angular 11 中实现了一个反应式表单，在对话框窗口中显示表单，当触发对话框窗口时，我得到了。以下错误：

core.js:6210 错误类型错误：无法读取 null 的属性“writeValue”

我对 angular 很陌生，我一直在阅读有关 formBuild 验证器的信息，我猜这与 idsArray 相关，但我找不到从控制台中删除错误的解决方案。有什么想法吗？

我的 html

            <form name="registerDeviceForm" [formGroup]="registerDeviceForm" novalidate>
                <h2>New Device</h2>

                <div fxLayout="column">
                    <div fxLayout="row">
                        <div id="containerNames">
                            <span class="label">ID (for several devices, separated by comma)</span>
                            <br />
                            <mat-form-field appearance="outline">
                                <input id="nameList" matInput formControlName="deviceList" />
                                <mat-error> Id is required </mat-error>
                            </mat-form-field>
                        </div>
                        <div  fxFlexAlign="center">
                        <img id="scanImage"  fxFlexAlign="center" src="../../../../assets/images/buttonImages/button-scan.png" aria-label="scan  button" />
                    </div>
                    </div>
                    <div>
                    <span class="label">NAME</span>
                    <br />
                    <mat-form-field appearance="outline">
                        <input id="nameList" [(ngModel)]="nameList" matInput formControlName="name" />
                    </mat-form-field>
                     </div>
                     <div>
                    <span class="label">TAGS</span>
                    <br />
                    <mat-form-field appearance="outline" floatLabel="always" formControlName="tags">
                        <mat-chip-list #tagList aria-label="tags">
                            <mat-chip *ngFor="let tag of tags" [removable]="true" (removed)="removeTag(tag)">
                                {{ tag }}
                                <mat-icon matChipRemove>cancel</mat-icon>
                            </mat-chip>
                            <input [matChipInputFor]="tagList" [matChipInputAddOnBlur]="false" (matChipInputTokenEnd)="addTag($event)" />
                        </mat-chip-list>
                    </mat-form-field>
                </div>
                <div>
                    <span class="label">GROUP</span>
                    <br>
                    <mat-form-field appearance="fill" formControlName="deploymentList">
                        <mat-label>Deployment List</mat-label>
                        <mat-select multiple>
                            <mat-option
                                (onSelectionChange)="addDeployment($event, deployment._id)"
                                *ngFor="let deployment of deploymentList"
                                [value]="deployment._id"
                                >{{ deployment.name }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
                    <div fxLayout="row" fxLayoutAlign="start center">
                        <mat-checkbox class="example-margin" formControlName="provisioned">
                            <span class="provision" >Automatically provision this device</span>
                        </mat-checkbox>
                    </div>
                </div>
                <mat-dialog-actions align="end">
                    <button mat-button mat-dialog-close>CANCEL</button>
                    <button mat-button [mat-dialog-close]="true" cdkFocusInitial (click)="submitRegisterDeviceForm()">CREATE DEVICE</button>
                </mat-dialog-actions>
            </form>

和我的 .ts

import { FormGroup,FormControl, FormBuilder, Validators } from "@angular/forms";

@Component({
  selector: "app-register-devices",
  templateUrl: "./register-devices.component.html",
  styleUrls: ["./register-devices.component.scss"]
})
export class RegisterDevicesComponent implements OnInit {
  selectedDeployments: string[] = [];
//   registerDeviceForm: new FormGroup;
registerDeviceForm = new FormGroup ({ deviceList: new FormControl(), name: new FormControl(), tags: new FormControl(),deploymentList: new FormControl(), provisioned: new FormControl() });
registerDeviceErrorMessage: string;
  deploymentList: DeploymentModel[] = [];
  deploymentErrorMessage: string = '';
  tags: string[] = [];
  nameList: string = '';
  namesArray: string[] = [];
  deviceList: string[] = [];[![error in my console][1]][1]


 constructor(private formBuilder: FormBuilder, 
              private registerDevicesService: RegisterDevicesService,
              private snackMessageService: SnackMessageService,
              private router: Router,
              private deploymentListService: DeploymentListService) {
  }

  ngOnInit() {
    this.deploymentListService
    .getDeployments()
    .then((response) => {
        this.deploymentErrorMessage = null;
        this.deploymentList = response;
    })
    .catch(() => {
        this.deploymentErrorMessage = 'Oops, there was an error getting the deployment list.';
    });

    this.registerDeviceForm = this.formBuilder.group({
      deviceList  : [[], Validators.required],
      name: [[]],
      tags: [[]],
      deploymentList: [[]],
      provisioned: [false]
    });

  }


  submitRegisterDeviceForm(): void {
    const provisioned = this.registerDeviceForm.value.provisioned;
    if (this.registerDeviceForm.valid) {
        this.namesArray = this.nameList.trim().split(/\s*,\s*/);
        if (this.namesArray[0] === '') {
            this.namesArray = [];
        }
      const idsArray = this.registerDeviceForm.value.deviceList.replace(new RegExp(" ", "g"),"")
                                                               .replace(new RegExp("\t", "g"),"")
                                                               .replace(new RegExp("\n", "g"),"")
                                                               .replace(new RegExp("{", "g"),"")
                                                               .replace(new RegExp("}", "g"),"")
                                                               .replace(new RegExp(";", "g"),",")
                                                               .split(",");
      for(let i = 0; i < idsArray.length; i++){
        //while, bc when remove the current element, in i position there is the next value
        while (idsArray[i] === ""){
          idsArray.splice(i,1);
        }
      }
      const deviceObejct = {
          deviceName : idsArray,
          name: this.namesArray, 
          tags: this.tags,
          deploymentList : this.selectedDeployments,
          provisioned : provisioned
        
      }

      this.registerDevicesService.registerDevices(deviceObejct).then(()=>{
        this.registerDeviceErrorMessage = null;
        this.snackMessageService.sendMessage("Device(s) created.");
        this.router.navigate(["/devices/provisioned"]);
      }).catch(error=>{
        if (error != "other"){
          this.registerDeviceErrorMessage = "The device " +error[1]+ " is already registered.";
        } else {
          this.registerDeviceErrorMessage = "Oops, could not update your information.";
        }
      });
    }
  }