1
votes

Passer une entrée dans une fonction et appeler la fonction sur un clic de bouton

Mon problème est que je dois appeler updateCard (), avec uid et name, les deux chaînes. Cependant, le nom apparaît indéfini ou invalide chaque fois que j'appelle la fonction. Quel serait un bon moyen de passer le nom d'entrée à la fonction lorsque le bouton udpate est enfoncé. Je sais que la fonction fonctionne à partir de tests. J'ai essayé ngModel et passé l'identifiant dans la fonction.

<div>{{card.name}}
            <form>
                Name: <input type="text" id = "name" [(ngModel)] = name><br>
                <input type="button" value="Update Name" (click)='bcService.updateCard(card.id, name)'>
            </form>
        </div>

typescript angular

1 commentaires

bcService.updateCard (card.id, nom) essayez-vous d'envoyer la valeur de la zone de saisie?

4 Réponses :

0
votes

Pouvez-vous essayer en ajoutant ngModelOptions de manière autonome?

<input type="text" id = "name" [(ngModel)] = "name" [ngModelOptions]="{standalone: true}">

1 commentaires

Je vais essayer ça.

0
votes

Si j'étais dans votre situation, je travaillerais avec une forme réactive. https://angular.io/guide/reactive-forms Mettre à jour vous pouvez faire quelque chose comme ceci:

form:FormGroup=new FormGroup({
    id:new FormControl(""),
    name:new FormControl("")
  });

  constructor() { }

  ngOnInit() {
  }

  onSubmit(){
    this.bcService.updateCard(
      this.form.get("id").value,
      this.form.get("name").value
      );
  }

<div>
    <span>{{card.name}}</span>
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        Name: <input type="text" id="name"><br>
        <input type="submit" value="Update Name">
    </form>
</div>

4 commentaires

Pourquoi suggérez-vous cela pour un cas d'utilisation aussi simple?

@DamianC vous avez raison, le cas est tellement simple pour réactif, j'utilise beaucoup les formes R c'est pourquoi je n'ai pas analysé la situation avant de poster

Il peut être utile de montrer comment utiliser les formulaires réactifs dans ce scénario.

Oui, je viens de publier un exemple, mais je pense que votre solution devrait très bien fonctionner.

0
votes

Vous ne voulez pas utiliser card.name?

<div>
    <span>{{card.name}}</span>
    <form>
        Name: <input type="text" id="name" [(ngModel)]="card.name"><br>
        <input type="button" value="Update Name" (click)="bcService.updateCard(card.id, card.name)">
    </form>
</div>

2 commentaires

card.name est la valeur de ma base de données. Le nom est l'entrée avec laquelle j'essaie de mettre à jour cette valeur.

Une raison pour laquelle ils ne peuvent pas pointer vers la variable car ce sont les mêmes données?

0
votes

essayez ceci, cela devrait fonctionner. utilisez event.value comme ci-dessous

<input type="button" value="Update Name" (click)='bcService.updateCard(card.id, 
 event.value)'>

0 commentaires