Question

使用Angular 2和Angular材质6.4.7

我需要使用垫选择组件设置默认的选定选项。

以下代码按其应有的方式工作，并在不使用[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>

我得到的警告如下：

您似乎在与ng相同的表单字段上使用ngModel formControl。支持使用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材质日期选择器时，我会使用它：

<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>

{{1}}

对您有用吗？

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

3 个答案: