J'ai ajouté une zone de texte à ma forme angulaire. tous les champs d'entrée / sélection de tapis fonctionnent correctement avec l'attribut requried. Pour le textarea j'ai ajouté une classe personnalisée pour afficher une bordure rouge. Pour une raison quelconque, lorsque je clique sur le bouton Effacer, les deux champs de saisie appliquent automatiquement leur propre classe rouge, mais ma classe personnalisée pour la texarea a ne le fait pas à moins qu'elle n'ait été touchée. Ce qui est bien mais ne correspond pas aux styles des champs de saisie. Comment appliquer les mêmes styles de validation à la zone de texte: https://stackblitz.com/edit/angular -mpefsn
.text-error.ng-invalid.ng-touched{
border: 1px solid #b00b00;
}
Si vous cliquez sur le bouton d'effacement au départ lorsque le blitz de pile se charge, vous verrez les deux champs d'entrée devenir rouges mais pas la zone de texte . C'est parce que j'ai la classe ngtouched . Mais si je le supprime, la zone de texte sera initialement rouge.
4 Réponses :
Vous pouvez marquer la textarea contrôle de formulaire comme touché en cliquant sur le bouton d'effacement:
<textarea #txt="ngModel" [(ngModel)]="questionText" required ...></textarea> <button (click)="clear(); txt.control.markAsTouched();" ...>Clear</button>
Voir this stackblitz pour une démo.
Comment puis-je le marquer comme étant touché par un fichier .ts dans une fonction?
Vous pouvez passer le ngModel ou le FormControl au gestionnaire d'événements: (click) = "clear (txt.control)" , et appeler < code> markAsTouched à l'intérieur de la méthode. Une autre possibilité serait de se référer à la zone de texte avec @ViewChild .
Le moyen le plus simple serait d'utiliser simplement matInput avec la zone de texte
<textarea [(ngModel)]="inputValue" [class.custom_invalid_form_class]="cleared && inputValue.length > 0"></textarea>
alors vous auriez le même style pour tous les champs d'entrée. Et le matériau appliquerait du rouge car il est obligatoire.
La manière la plus difficile, si vous voulez que la zone de texte soit de style différent, pourrait être d'ajouter manuellement une classe au champ de zone de texte.
Fichier .ts:
public cleared = false;
...
clear() {
..
this.cleared = true;
}
et dans votre html:
<mat-form-field> <textarea matInput ...></textarea> </mat-form-field>
Le texte ajoutant matInput à une zone de texte ne fait que le casser
@Flash - La suggestion d'Engam semble bien fonctionner. Voir ce stackblitz .
Je vais vérifier mais dans votre stackblitz les bordures ne s'affichent pas au départ. Je suppose que je peux ajouter quelques css supplémentaires pour le réparer
@Flash - Les bordures ne sont pas destinées à être affichées selon la conception du matériau angulaire.
oh vraiment pour une zone de texte?
N'oubliez pas de mettre textarea dans un élément mat-form-field. Ensuite, vous devriez obtenir une bordure inférieure. Si vous voulez que les entrées se démarquent un peu plus, vous pouvez appliquer l'apparence = "contour" ou apparence = "fill" comme ceci:
J'ai fini par emprunter cette voie car je voulais la zone de texte native: stackblitz.com/edit/textarea-validation
La raison pour laquelle vous voyez la bordure rouge ici pour les autres champs à l'exception de la zone de texte est que les autres champs obtiennent leur CSS de .mat- champ de formulaire non valide . Le .mat-form-field-invalid est ajouté à votre mat-form-field à cause de cette classe qui est ajoutée lorsque vous soumettez le formulaire sans remplir les champs obligatoires.
Faites de même pour votre textarea , supprimez la classe text-error car elle n'est pas obligatoire et ajoutez la directive matInput . Ensuite, enveloppez simplement votre textarea dans un mat-form-field comme ci-dessous
<mat-form-field>
<textarea matInput name="questionText" cols="35" rows="8" placeholder="Question Text" [(ngModel)]="questionText" required></textarea>
</mat-form-field>
Voici un exemple de travail sur StackBlitz .
Juste essayé mais j'obtiens cette erreur mat-form-field doit contenir un MatFormFieldControl. Avez-vous un stackblizt fonctionnel
@Flash - Je l'ai ajouté à ma réponse.
Voir le premier exemple dans le docs . Le deuxième champ de saisie (Laisser un commentaire) est une zone de texte et il ne contient pas de bordures.
Merci je reviendrai vers vous 2mrw apprécier l'aide
Merci de cette façon fonctionne, mais parce que je voulais que la zone de texte native de cette façon fonctionne le mieux: stackblitz.com/edit/ textarea-validation
Bien sûr, la conception dépend de vous à la fin de la journée. Je voulais juste m'assurer que vous saviez à quoi ressemble le matériau standard textarea :)
Utilisez le
<ion-input></ion-input>
au lieu du natif
<textarea></textarea>
afin de voir les résultats de validation comme avec le
<ion-textarea></ion-textarea>
Merci je vais tester ça