Angular avoid select material having an initial value when using FormControl-CodePudding

I am using a select element from Angular combined with FormControl. I want the select dropdown to have NO initial value (the user has to select one) but I cant get it working.

my html looks like this:

<form
[formGroup]="experimentForm"

style="align-items: start;"
>
  <mat-form-field style="margin-right: 40px">
      <mat-label>test</mat-label>
      <mat-select
          
          formControlName="projectid"
          data-live-search="true"
      >
          <mat-option [value]="null">null</mat-option>
          <mat-option
              *ngFor="let object of objects"
              [value]="object.projectid"
          >
              {{ object.name }}
          </mat-option>
      </mat-select>
  </mat-form-field>
</form>

And my FormControl declaration:

this.experimentForm = this.fb.group({
    projectid: new FormControl(this.objects, [
        Validators.required,
    ]),
})

And the Select element always has an initial value (the first one of "objects") selected..

CodePudding user response：

Just don't set a value to the formControl during its initialization.

this.experimentForm = this.fb.group({
    projectid: new FormControl(undefined, [
        Validators.required,
    ]),
});