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

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

0 голосов
/ 25 января 2019

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

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

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

Ответы [ 3 ]

0 голосов
/ 25 января 2019

Когда я использую угловой инструмент выбора даты, я использую это: 

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>

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

0 голосов
/ 25 января 2019

Предупреждение консоли точно говорит вам, в чем проблема, используйте директиву 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);
}
0 голосов
/ 25 января 2019

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

...