0
votes

NGModel Solution pour 8 ans

J'ai besoin de peupler l'option sélectionnée à partir d'un élément de matériau angulaire sélectionné à une textarea. J'utilise Ngmodel et cela a fonctionné mais j'ai eu l'erreur comme suit dans la console:

export class myComponent implements OnInit {
  buttonDisabled: boolean = false;
  .
  .
  .
  optionMessages = [
    { id: 1, option: 'Message 1',  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam bibendum nisi, a malesuada metus consectetur vitae. Proin eget metus eu orci vehicula bibendum ut ut lectus.' },
    { id: 2, option: 'Message 2',  message: 'Quisque et nisl nec mi placerat iaculis. Phasellus dapibus dui tempor, efficitur ligula ut, semper eros. Praesent scelerisque, odio sit amet elementum ornare, ex neque porttitor ipsum, nec sollicitudin mi leo sit amet sapien. Donec porttitor sapien sit amet libero dapibus consequat.' },
    { id: 3, option: 'Message 3',  message: 'Nam accumsan fringilla sapien, ac blandit nunc placerat in. Integer ut est interdum dolor ullamcorper bibendum. Pellentesque dignissim erat vitae eros malesuada lobortis. Praesent pharetra, nunc a hendrerit commodo, diam eros fringilla erat, sit amet porttitor odio erat egestas dolor. Sed pellentesque sed diam a egestas. Integer non rhoncus augue.' },
    { id: 4, option: 'Message 4',  message: 'Donec egestas elit sapien, in dictum mauris euismod ac. Maecenas gravida leo eget quam placerat lobortis. Praesent risus elit, congue sit amet metus egestas, porta aliquam sem. Nam blandit auctor odio non fringilla.' },
    { id: 5, option: 'Message 5',  message: 'Quisque efficitur egestas lectus ut molestie. Mauris eleifend ligula nec dignissim tempus. Aenean nec quam pellentesque, eleifend metus id, efficitur tellus.' },
  ];

  reminderMessageForm = new FormGroup({
    option: new FormControl('', Validators.required),
    reminder: new FormControl('', [ Validators.required, Validators.minLength(15) ]),
  });

  get reminder() {
    return this.reminderMessageForm.get('message');
  }
  .
  .
  .
}

angular angular8 angular-material

0 commentaires

3 Réponses :

2
votes

Vous mélangez entre des formes pilotées et réactives.

où est sélectionnéReminder dans votre code? p> xxx pré>

est lié à p>

option: new FormControl('', Validators.required),

1 commentaires

SELECTEDREMinder est dans et dans </ TextArea> (c'est-à-dire La connexion entre les deux éléments). Merci pour votre réponse, mais j'ai le doute de la manière dont Remplacez Ngmodel dans l'angulaire 8 encore. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> basé à partir de la documentation publique de l'angulaire, <a href="htttps://angular.io/api/forms/formControlname#use-with-ngmodel" rel="nofollow Noreferrer"> <Strong> Contrôle de formulaire avec Ngmodel </ strong> </a>: <p> fichier html </ p> <pré> xxx </ pré> <p> fichier TS </ p> <pré> xxx </ pré> <blockQuote> <p> Cela a été obsolète pour quelques raisons. Premièrement, les développeurs ont trouvé ce motif déroutant. Il semble que le ngmodel réel La directive est utilisée, mais elle est en fait une propriété d'entrée / sortie nommé Ngmodel sur la directive de forme réactive qui se rapproche simplement (une partie de) son comportement. Plus précisément, il permet d'obtenir / définir le Valeur et intercepter des événements de valeur. Cependant, certains des autres de Ngmodel caractéristiques - comme retarder les mises à jour avec gonflement ou exporter le directive - ne travaillez tout simplement pas, ce qui a naturellement causé certains Confusion. </ P> </ blockQquote> <p> Pour mettre à jour votre code avant V7, vous voudrez décider de vous contacter avec des directives de formulaire réactif (et de gérer / définir des valeurs à l'aide de modèles de formes réactifs) ou de passer aux directives axées sur les modèles. </ P > <p> <strong> Voici les choix: </ strong> </ p> <p> <Strong> Option 1 - Utilisez des formes réactives </ strong> </ p> <p> fichier html </ p> < Pre> xxx </ pré> <p> fichier TS </ p> <pré> xxx </ pré> <p> <forte> Option 2 - Utilisez des formes pilotées par des modèles </ forts> </ p> <p> <p> HTML fichier </ p> <pré> xxx </ pré> <p> fichier TS </ p> <pré> xxx </ pré> <p> Par défaut, lorsque vous utilisez ce modèle, vous verrez un avertissement de dépréciation une fois dans MODE DEV. Vous pouvez choisir de faire taire cet avertissement en fournissant une configuration pour <code> réactifformsmodule </ code> à l'heure d'importation: </ p> <pré> xxx </ pré> <p> Alternativement, vous pouvez choisir de superviser un avertissement séparé pour chaque instance de ce modèle avec une valeur de configuration de "toujours". Cela peut aider à suivre où dans le code que le motif est utilisé comme code est mis à jour. </ P> <p> Autre référence: </ P> <ul> <li> <a href="httptps://github.com/angular/angular/issues/27978" rel="nofollow NOREFERRER"> GitHub Numéro </a> </ LI> </ ul> </ p> </div> <hr>  <div class="pl-5"> <small class="text-muted">2 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Merci pour votre réponse mais j'utilise un élément sélectionné. Avez-vous une idée de la manière dont Remplacez NGModel pour sélectionner des éléments?> </p> <hr> <p class="answer-comment"> @Beatrizic - vous l'avez probablement trouvé un moment, mais cela fonctionne exactement de la même manière pour sélectionner des éléments, en utilisant SETValue </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Utilisez une approche: <fort> Approche de forme réactive forte> sans NGModel tel qu'il a indiqué dans l'avertissement <pr> xxx pré> <p> maintenant dans le modèle <fort> Forme réactive forte> Approche: supprimer Votre ngmodel dans la case Select. p> <p> Lors de l'affichage dans textarea, affichez-la comme suit: <code> valeur = "{{remindmessageform.get (" option "). Valeur}}" Code> P > <pre><form class="reminder-message" [formGroup]="reminderMessageForm" #f="ngForm" (ngSubmit)="reminderMessage(f.value)"> <mat-form-field class="full-width select"> <mat-select formControlName="option" placeholder="Choose a reminder" > <mat-option *ngFor="let opt of optionMessages" [value]="opt.message">{{ opt.option }}</mat-option> </mat-select> </mat-form-field> <mat-form-field class="full-width textarea-message"> <textarea matInput formControlName="reminder" value="{{ reminderMessageForm.get('option').value}}" cols="5" rows="7" readonly></textarea> </mat-form-field> <mat-dialog-actions class="actions" align="end"> <button mat-button class="send-message action" [disabled]="!buttonDisabled" type="submit"> <span>Send</span> </button> <button mat-button mat-dialog-close class="close action" (click)="closeDialog()"> <span>Close</span> </button> </mat-dialog-actions> </form> </pre></code></p></fort></p></pr></fort></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe> <p class="font-weight-bold">Articles qui pourrait vous intéresser :</p> <a href="/question/impossible-d-39-importer-le-module-quot-angular-material-quot" class=""> Impossible d'importer le module "@ angular / material" </a> <hr> <a href="/question/erreur-de-compilation-angulaire-ng6001-la-classe-est-r-eacute-pertori-eacute-e-dans-les-d-eacute-clarations-du-ngmodule-39-appmodule-39-mais-n-39-est-pas-une-directive-un-composant-ou-un-tube" class=""> Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube </a> <hr> <a href="/question/erreur-ng6002-appara-icirc-t-dans-le-ngmodule-imports-d-39-appmodule-mais-n-39-a-pas-pu-ecirc-tre-r-eacute-solu-en-une-classe-ngmodule" class=""> erreur NG6002: apparaît dans le NgModule.imports d'AppModule, mais n'a pas pu être résolu en une classe NgModule </a> <hr> <a href="/question/ng-update-erreur-le-package-quot-angular-devkit-schematics-quot-ne-peut-pas-ecirc-tre-r-eacute-solu-agrave-partir-du-r-eacute-pertoire-racine-de-l-39-espace-de-travail" class=""> [ng update]: Erreur - Le package "@ angular-devkit / schematics" ne peut pas être résolu à partir du répertoire racine de l'espace de travail </a> <hr> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="4267220326" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <script type="text/javascript" src="/js/purecookie.js"></script> </div> <div class="container col-lg-8 col-md-12 ads-footer"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="5580301997" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </body> <footer> <div class="row col-lg-12 col-md-12 text-muted"> © 2020 www.devfaq.fr - Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license"> cc by-sa 3.0 </a> with <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" rel="license"> attribution required</a>. </div> </footer> </html>