如何使用 Null 作为值 Angular Material Select

Question

我想要一个列表，其中列表项之一是“N/A”，如果选择它，我希望表单控件的值为空。

在我的尝试中，我能够使 formcontrol 值具有 value=null 但 UI 似乎没有保留所选选项。

TS：

import { Component, SimpleChanges, OnChanges } from "@angular/core";
import { FormControl, FormGroup, FormBuilder } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnChanges {
  mainForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.mainForm = this.fb.group({
      selectedCountryControl: new FormControl("")
    });
  }

  countries: any = [
    {
      full: "Great Britain",
      short: "GB"
    },
    {
      full: "United States",
      short: "US"
    },
    {
      full: "Canada",
      short: "CA"
    },
    {
      full: "N/A",
      short: null
    }
  ];

  submit() {
    console.log(this.mainForm.value);
  }
}

HTML：

<form [formGroup]="mainForm" style="margin-top: 30px;">
    <mat-form-field>
        <mat-select name="countryReactiveVaraible" formControlName="selectedCountryControl" placeholder="Country">
            <mat-option *ngFor="let country of countries" [value]="country.short">
                {{country.full}}
            </mat-option>
        </mat-select>
    </mat-form-field>

    <button class="btn btn-primary" mat-button (click)="submit()">
          Save
  </button>
</form>

行为：

正如你所看到的，我似乎无法让 N/A“粘住”。

堆栈闪电战链接：

https://stackblitz.com/edit/angular-material-select-demo-b9fzht?file=src%2Fapp%2Fapp.component.html

Answer 1

你可以这样做..

像这样设置value字符串：然后尝试一下。shortshort: "null"