使用 mat-select 组件设置默认 selected 选项的正确方法

Question

使用 Angular 2 和 Angular Material 6.4.7

我需要使用 mat-select 组件设置默认 selected 选项。

以下代码正常工作，并在我不使用 [formControl] 绑定时设置默认值。

示例如下：

<mat-form-field>
    <mat-select [(value)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" >
        <mat-option *ngFor="let y of yearsArr;" [value]="y">{{ y }}</mat-option>
    </mat-select>
</mat-form-field>

当前年份（currentYear）是一个变量，用来设置当前年份的值。

然而，当我使用表单控件绑定时，它无法在 mat-select 组件上设置默认选项。

示例如下：

<mat-form-field>
    <mat-select [(value)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" >
        <mat-option *ngFor="let y of yearsArr;" [value]="y">{{ y }}</mat-option>
    </mat-select>
</mat-form-field>

我搜索了堆栈溢出并发现了这个有效的解决方案，但是我在浏览器控制台中收到警告，我不确定这是否是实现此目的的正确方法。

示例如下：

<mat-form-field>
    <mat-select [(ngModel)]="currentYear" placeholder="Select A Year" [formControl]="year.get('year')" >
        <mat-option *ngFor="let y of yearsArr;" [value]="y">{{ y }}</mat-option>
    </mat-select>
</mat-form-field>

我收到的警告如下：

It looks like you're using ngModel on the same form field as formControl. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. For more information on this, see our API docs here: https://angular.io/api/forms/FormControlDirective#use-with-ngmodel

我已经阅读了上面的输出，但仍然不明白如何解决这个问题。

任何帮助澄清或启发我实现这一目标的正确方法将不胜感激。

Answer 1

您可以在构建表单时将控件的值设置为当前年份，这样Angular将在表单控件绑定时检索值。

Answer 2

当我使用 Angular material 日期选择器时，我使用的是：

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MAT_MOMENT_DATE_FORMATS, MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the `default as` syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment} from 'moment';

const moment = _rollupMoment || _moment;

/** @title Datepicker that uses Moment.js dates */
@Component({
  selector: 'datepicker-moment-example',
  templateUrl: 'datepicker-moment-example.html',
  styleUrls: ['datepicker-moment-example.css'],
  providers: [
    // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
    // `MatMomentDateModule` in your applications root module. We provide it at the component level
    // here, due to limitations of our example generation script.
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
})
export class DatepickerMomentExample {
  // Datepicker takes `Moment` objects instead of `Date` objects.
  date = new FormControl(moment([getFullYear(), getMonth(), getDate()]));
}

<mat-form-field>
  <input matInput [matDatepicker]="dp" placeholder="Moment.js datepicker" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

这对你有用吗？

Answer 3

控制台警告会准确告诉您问题所在，请使用 ngModel 指令或 formControl 指令，但不能同时使用。

检查关于如何 select 带有 formControl 的默认选项的问题（它适用于多个 select，但它对你的情况是一样的).

您的模板代码应如下所示：

<mat-form-field>
  <mat-select placeholder="Select A Year" [formControl]="year.get('year')" >
      <mat-option *ngFor="let y of yearsArr;" [value]="y">{{ y }}</mat-option>
  </mat-select>
</mat-form-field>

并且在您的组件中，您可以设置 FormControl 的值，即如下所示：

ngOnInit() {
  this.year.get('year').setValue(this.currentYear);
}

使用 mat-select 组件设置默认 selected 选项的正确方法

The correct method to set a default selected option using the mat-select component

angular-material

angular

angular-material-6