Question

我不确定这是一个Angular问题，还是对HTML表单的一般限制。

我希望select form有三个值：true，false和undefined。请参阅下面的this Stackblitz或代码。

<mat-form-field [formGroup]="form">
  <mat-select formControlName="test" value="undefined">
    <mat-option *ngFor="let v of values"
                [value]="v.value">{{ v.display }}</mat-option>
  </mat-select>
</mat-form-field>

...以及相应的.ts文件：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public form: FormGroup;
  public readonly values: any[] = [
    {
      display: 'true',
      value: true
    },
    {
      display: 'false',
      value: false
    },
    {
      display: '--',
      value: undefined
    }
  ];

  constructor(private readonly fb: FormBuilder) {
    this.form = this.fb.group({
      test: undefined
    });
  }
}

但是，虽然硬编码test到true或false仍有效：

this.form = this.fb.group({
      test: true // 'true' or 'false' selected in form.
});

... undefined没有：

this.form = this.fb.group({
      test: undefined // '--' option is *not* selected.
});

Answer 1

将任何内容设置为undefined被视为不良做法。

在这种特殊情况下，最好的解决方案是使用空字符串作为默认值。

如果您查看材料代码，您会看到null / undefined被视为特殊重置值：Material Source

允许`undefined`作为有效的选择菜单选项（在Angular中）？

1 个答案: