web-dev-qa-db-fra.com

Impossible de lire la propriété «obligatoire» de null

Dans le modèle, j'ai un formulaire, dont une partie concerne le rendu de la liste des cours:

<form #f="ngForm" (ngSubmit)="submit(f)">
 <div class="form-group">
  <label for="courseCategory"> Category </label>
  <select required ngModel name="courseCategory" #courseCategory="ngModel" id="courseCategory" class="form-control">
    <option value=""></option>
    <option *ngFor="let category of categories" [value]="category.id"> // line 16
      {{category.name}}
    </option>
  </select>
  <div class="alert alert-danger" *ngIf="courseCategory.touched && courseCategory.errors.required">
    Course category is required
  </div>
 </div>
</form>

Dans le navigateur lorsque je sélectionne une catégorie et appuie sur TAB (pour s'éloigner de la liste déroulante), j'obtiens cette erreur sur la console:

CourseComponent.html: 16 ERREUR TypeError: Impossible de lire la propriété "requis" de null à Object.eval [en tant que updateDirectives] (CourseComponent.html: 20)

Pouvez-vous m'aider à trouver les causes de cette erreur?

Bootstrap 3.3.7 est déjà installé dans le VS Code.

angularforms
9
Banafsheh Khadem

Les erreurs n'existeront pas toujours, vous devez donc le définir comme ceci:

<div class="alert alert-danger" *ngIf="courseCategory.touched && courseCategory.errors?.required">

Avec l'opérateur sûr "?"

38
David Anthony Acosta

Je l'ai résolu de cette façon dans Angular 7+

<div *ngIf="formField.password.errors?.required" class="invalid-feedback">
Password is required
</div>
6
C.Ikongo

Une solution est déjà suggérée par "David Anthony Acosta". Je l'ai également résolu de cette façon:

<div class="alert alert-danger" *ngIf="courseCategory.touched && !courseCategory.valid">

(Le message d'erreur est censé s'afficher si le menu déroulant est touché, mais aucune option n'a été sélectionnée).

1
Banafsheh Khadem

Le code ci-dessous a fonctionné pour moi. Le '?' après courseCategory n'est pas nécessaire, cependant, c'est une solution de contournement pour un bogue dans le code Visual Studio où le linter marque courseCategory.errors?.required" comme une erreur indiquant que "requis n'est pas défini. Donc, pour les utilisateurs de VSCode, il y a le correctif jusqu'à ce qu'il soit créé officiellement. *ngIf="courseCategory.touched && courseCategory?.errors?.required"

1
Samuel Mutemi