web-dev-qa-db-fra.com

la sélection requise de mat-select ne fonctionne pas

J'ai le code suivant 

<form #createForm="ngForm">
 <mat-form-field>
   <mat-select placeholder="Favorite food"
      matInput
     [ngModel]
     food="food"
     #food="ngModel" required>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
   </mat-select>
</mat-form-field>
</form>
<button [disabled]="!createForm.valid">submit</button>

Puisque je veux que la "sélection" soit un champ obligatoire, le bouton "soumettre" devrait être désactivé lors du rendu du formulaire. Cependant, le bouton "soumettre" est activé lorsque le formulaire est affiché. Quel est le problème?

angular5angular2-formsangular-material2redux-form-validators
5
user3097695

pour la validation dans les formes réactives angulaires 5. référez-vous ceci

*** components.ts *******

import { FormControl, Validators, FormBuilder, FormGroup, ReactiveFormsModule, NgForm } from '@angular/forms';

export class Test implements OnInit{
foodform:FormGroup;
 constructor(){}

ngOnInit() {
// create form group of controls 
 this.foodform = new FormGroup({
   favoriteFood: new FormControl('', [Validators.required])
 });
}
}

**** Component.html ************

   <form #createForm="ngForm" [formGroup]="foodform ">
     <mat-form-field>
       <mat-select placeholder="Favorite food"
          matInput
         [ngModel]
         food="food"
         #food="ngModel"  formControlName="favoriteFood">
        <mat-option *ngFor="let food of foods" [value]="food.value" >
          {{ food.viewValue }}
        </mat-option>
       </mat-select>
      <mat-error *ngIf="foodform.controls['favoriteFood'].hasError('required') && foodform.controls['favoriteFood'].pristine">
                Required Message
      </mat-error>
    </mat-form-field>
    </form>

utilisez [formGroup] et formControlName dans votre formulaire html.

1
Sarjerao Ghadage

Le seul moyen de validation de champ requis sur un mat-select consiste à utiliser une validation de formulaire réactive. Importez simplement les composants respectifs dans un fichier TypeScript:

import {FormControl, Validators} from '@angular/forms';

Fichier HTML:

Supprimer votre référence ngModel

<mat-form-field>
   <mat-select placeholder="Favorite food"
      matInput [formControl]="foodControl"     
     required>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
   </mat-select>
</mat-form-field>

Cela fonctionne pour la validation de champ requise. Si vous voulez valider plus probablement, vous finirez par accéder à form dans le fichier TypeScript. C’est bizarre qu’il n’y ait aucune option de validation form, c’est le seul moyen que j’ai trouvé pour que cela fonctionne.

0
Sri7

Cela a fonctionné pour moi: Importer ReactiveFormsModule dans votre module d'application

import { ReactiveFormsModule } from '@angular/forms';

et ajoutez sa dépendance dans le décorateur @NgModule

0
Prashant K

Regardez le commentaire de danger89 sous votre question initiale. Il vous manque l'attribut name . E.g:

<form #createForm="ngForm" (ngSubmit)="submitFunction(createForm)">
      <mat-form-field>
          <mat-select 
            placeholder="Favorite food"
            ngModel
            name="food"
            required
          >
            <mat-option *ngFor="let food of foods" [value]="food.value">
              {{ food.viewValue }}
            </mat-option>
          </mat-select>
      </mat-form-field>
      <button type="submit" [disabled]="!createForm.valid">submit</button>
  </form>

En raison de l'attribut name, votre food.value peut maintenant être trouvé à createForm.value.food lors de la soumission du formulaire.

0
jna