Question

我正在尝试设置material.io表单的默认值，但我似乎无法使用组版本。这是我的代码

<mat-form-field>
  <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
    <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                  [disabled]="group.disabled">
      <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
        {{ pokemon.viewValue }}
      </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>



selected = 'bulbasaur-0';

  pokemonGroups = [
    {
      name: 'Grass',
      pokemon: [
        { value: 'bulbasaur-0', viewValue: 'Bulbasaur' },
        { value: 'oddish-1', viewValue: 'Oddish' },
        { value: 'bellsprout-2', viewValue: 'Bellsprout' }
      ]
    },
    {
      name: 'Psychic',
      pokemon: [
        { value: 'mew-9', viewValue: 'Mew' },
        { value: 'mewtwo-10', viewValue: 'Mewtwo' },
      ]
    }
  ];

Answer 1

要将选项设置为已选择，您的选择模型必须处理所需的选项。

由于您使用了反应形式，请尝试按以下方式创建：

this.myForm = this.fb.group({
  pokemonControl: this.pokemonGroups[0][0]
});

如果您不使用反应形式，请使用此

pokemonControl: new FormControl(this.pokemonGroups[0][0]);

Answer 2

我找到了解决您问题的方法。

Angular Select documentation为value和mat-select的{{1}}属性使用双向绑定... 但是如果mat-option不起作用，那么最好使用NgModel绑定。

HTML：

mat-optgroup

TS：

**<**mat-form-field>
  <mat-select placeholder="Pokemon" [formControl]="pokemonControl" [(ngModel)]="selected">
   <mat-option>-- None --</mat-option>
     <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                              [disabled]="group.disabled">
       <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
                    {{pokemon.viewValue}}
       </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

更新：

以上内容适用于Angular 6，并且您会给出警告。

您似乎在与ng相同的表单字段上使用ngModel formControlName。支持使用ngModel输入属性和带有反应形式指令的ngModelChange事件已被弃用在Angular v6中已删除，并将在Angular v7中删除。

因此，在您的情况下，应使用selected: string = 'squirtle-3';并使用FormControl link方法：

setValue

如何在角度材质中设置默认值组选择

2 个答案: