Правильный метод установки выбранной по умолчанию опции с помощью компонента mat-select

Использование 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 в том же поле формы, что и formControl. Поддержка использования свойства input ngModel и события ngModelChange с директивами реактивной формы устарела в Angular v6 и будет удалена в Angular v7. Для получения дополнительной информации об этом см. Нашу документацию по API здесь: https://angular.io/api/forms/FormControlDirective#use-with-ngmodel.

Я прочитал вышеприведенный вывод, но до сих пор не могу понять, как это исправить.

Мы будем очень благодарны за любую помощь, чтобы прояснить или просветить меня о правильном методе достижения этого.


angular angular-material angular-material-6
person Adamski    schedule 25.01.2019    source источник
comment
Вы можете использовать это: ‹stackoverflow.com/questions/54340907/›   -  person Anton Skybun    schedule 25.01.2019
comment
Привет, ваше предложение используется только для того, чтобы ввести «элемент управления параметрами по умолчанию». Я хочу выбрать и установить существующий параметр по умолчанию, равный переменной currentYear.   -  person Adamski    schedule 25.01.2019

Ответы (3)


arrow_upward
5
arrow_downward

Предупреждение консоли сообщает вам, в чем именно заключается проблема, используйте либо директиву ngModel, либо директиву formControl, но не обе сразу.

Проверьте этот вопрос на как выбрать вариант по умолчанию с 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);
}
person Fabian Küng    schedule 25.01.2019

arrow_upward
0
arrow_downward

Вы можете установить значение элемента управления при построении формы на текущий год, таким образом Angular будет извлекать значение в привязке элемента управления формы.

person thir13en    schedule 25.01.2019

arrow_upward
0
arrow_downward

Когда я использую средство выбора даты материала 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>

Это работает для вас?

person Jérémy Gachon    schedule 25.01.2019