Utilisation de Angular 2 et Angular Material 6.4.7
Je dois définir une option sélectionnée par défaut à l'aide du composant mat-select.
Le code suivant fonctionne comme il se doit et définit la valeur par défaut lorsque Je n'utilise pas la liaison [formControl].
Exemple ci-dessous:
<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>
L'année en cours (currentYear) est une variable qui obtient la valeur de l'année en cours.
Cependant, lorsque j'utilise la liaison de contrôle de formulaire, il ne parvient pas à définir l'option par défaut sur le composant mat-select.
exemple ci-dessous:
<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>
J'ai recherché un débordement de pile et suis tombé sur cette solution qui fonctionne mais je reçois un avertissement dans la console du navigateur, je ne suis pas sûr que ce soit la bonne méthode pour y parvenir.
exemple ci-dessous:
<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>
L'avertissement que je reçois est ci-dessous:
Il semble que vous utilisez ngModel sur le même champ de formulaire que formControl. Prise en charge de l'utilisation de la propriété d'entrée ngModel et L'événement ngModelChange avec des directives de formulaire réactives a été obsolète dans Angular v6 et sera supprimé dans Angular v7. Pour plus d'informations à ce sujet, consultez nos documents sur l'API ici: https: // angular. io / api / forms / FormControlDirective # use-with-ngmodel
J'ai lu le résultat ci-dessus, mais je ne comprends toujours pas comment résoudre ce problème.
Toute aide pour clarifier ou m'éclairer sur la bonne méthode pour y parvenir serait grandement appréciée .
3 Réponses :
Vous pouvez définir la valeur du contrôle lorsque vous créez le formulaire sur l'année en cours, de cette façon Angular récupérera la valeur lors de la liaison du contrôle du formulaire.
Lorsque j'utilise un sélecteur de date de matériau angulaire, j'utilise que:
<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>
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()]));
}
Cela fonctionne pour vous?
L'avertissement de la console vous indique exactement quel est le problème, utilisez la directive ngModel ou la directive formControl , pas les deux.
Le code de votre modèle devrait ressembler à quelque chose comme ceci:
ngOnInit() {
this.year.get('year').setValue(this.currentYear);
}
Et dans votre composant, vous pouvez définir la valeur de votre FormControl , c'est-à-dire quelque chose comme ceci:
<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>
Vous pouvez utiliser ceci: << a href = "https://stackoverflow.com/questions/54340907/angular-set-dropdown-select-option-as-default-selected-before-iteration/54342448#54342448" title = " la liste déroulante de jeu angulaire sélectionnez l'option par défaut sélectionnée avant l'itération "> stackoverflow.com/questions/54340907/... >
Bonjour, votre suggestion est utilisée uniquement pour injecter un "contrôle d'option par défaut". Je souhaite sélectionner et définir une option par défaut existante égale à la variable currentYear.