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

Question

使用 Angular 2 和 Angular Material 6.4.7

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

当我不使用 [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>

我收到的警告如下：

看起来您在同一个表单字段上使用 ngModel 表单控件。支持使用 ngModel 输入属性和 带有响应式表单指令的 ngModelChange 事件已经 在 Angular v6 中已弃用，将在 Angular v7 中删除。 有关这方面的更多信息，请在此处查看我们的 API 文档：https://angular.io/api/forms/FormControlDirective#use-with-ngmodel

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

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

Answer 1

控制台警告会准确告诉您问题出在哪里，要么使用ngModel 指令，要么使用formControl 指令，而不是同时使用两者。

检查this 问题，了解如何使用formControl 选择默认选项（它适用于多选，但对您的情况同样适用）。

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

<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);
}

Answer 2

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

Answer 3

当我使用 Angular 材质日期选择器时，我会使用它：

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>

这对你有用吗？