TypeError: Cannot read property 'valide' undefined

J'ai le texte suivant textarea:

<textarea class="form-control" [(ngModel)]="content" name="content" required>
        </textarea>

et suivants bouton envoyer:

 <button type="submit" class="btn btn-default" [disabled]="content.valid">New comment</button>

Comme je l'ai vu dans l'angle de 2 guide d'utilisation (https://angular.io/docs/ts/latest/guide/forms.html) je peux utiliser le x.valid afin de vérifier si elle n'est pas vide.

Pourquoi puis-je obtenir TypeError: Cannot read property 'valid' of undefined erreur?

je suppose que vous avez raté cette: '#nom="ngModel"'. dans votre cas: #content="ngModel"
En fait, je reçois la même erreur

InformationsquelleAutor TheUnreal | 2016-08-29

angular

40

Dans votre cas contenu est une propriété sur votre modèle.

Afin de faire ce que vous voulez, vous devez utiliser un modèle de référence de la valeur pour le contrôle de formulaire #myControl="ngModel" et puis vous avez accès à la propriété valide: myControl.valide.

Donc dans votre exemple:
```
<textarea class="form-control" [(ngModel)]="content"
          name="content" required #myControl="ngModel">
</textarea>
```
Et de l'utiliser dans la balise button:
```
<button type="submit" class="btn btn-default" 
[disabled]="myControl.valid">New comment</button>
```
- Merci! Comment je peux envoyer des content dans mon ngSubmit()? Mon formulaire est affecté avec <form (ngSubmit)="onSubmit()"> mais je n'ai aucune idée de comment obtenir la valeur du contenu, avec cette manière
- Si vous avez utilisé ngModel sur les contrôles de tout ce qui est lié à votre modèle, de sorte que vous pouvez l'utiliser. Si vous avez besoin de plus de la forme que vous pouvez faire comme dans la doc et obtenir une référence pour la forme elle-même " #heroForm="ngForm"' et ensuite l'utiliser.
- Ce que je ne comprends pas, c'est comment je peux utiliser la valeur de content dans mon composant (.fichier ts)? Ai-je besoin de le passer en paramètre ou je peux l'utiliser dans mon composant d'une autre façon?
- Le contenu devrait être une propriété dans votre composant de départ avec. Depuis que c'est en utilisant une liaison bidirectionnelle, il aura les dernières modifications lorsque vous appelez soumettre. Jetez un oeil à la fin de la documentation de la section sur le lien que vous avez fourni, peut-être plus facile à comprendre d'eux.
- "Tout ce qui est lié à votre modèle" m'a aidé, merci.
InformationsquelleAutor Adrian Fâciu

<div class="form-group">
    <label for="inputEmail" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
        <input type="text" class="form-control" id="name" placeholder="Name" minlength="4" maxlength="24"  [(ngModel)]="name" name="email" #myName="ngModel" required>
            <div *ngIf="myName.errors && (myName.dirty || myName.touched)" class="alert alert-danger">
                <div [hidden]="!myName.errors.required">
                    Name is required
                </div>
                <div [hidden]="!myName.errors.minlength">
                    Name must be at least 4 characters long.
                </div>
                <div [hidden]="!myName.errors.maxlength">
                    Name cannot be more than 24 characters long.
                </div>
            </div>
    </div>
</div>

Donner un poisson à un homme, il aura à manger pour un jour ...

InformationsquelleAutor Prashant Shrivastava

0

Dans mon cas, j'ai enlevé le ngModel de #myName="ngModel" pour le faire fonctionner.
Angualr version 5.2.11

InformationsquelleAutor codemoney
0

Vous pouvez utiliser ngModelChange comme une solution de contournement:
```
<input type="text" [ngModel]="model.property (ngModelChange)="detectChanges($event, model, validation)" #validation="ngModel" required validation>
```
Et dans votre composant:
```
 detectChanges(newVal, model, validation): void {
     if (validation.valid) model._valid = true;
     else model._valid = false;
 }
```
Cela peut vous donner plus de flexibilité lorsque vous utilisez *ngFor d'afficher un bon nombre de champs de saisie et souhaitez valider individuellement.

InformationsquelleAutor Edgar Quintero

Vous devez vous connecter pour publier un commentaire.