web-dev-qa-db-fra.com

Liaison angulaire2 de l'attribut "nom" dans les éléments <input> avec * ngFor

J'expérimente avec Angular2 et Angular Material. J'ai utilisé *ngFor pour laisser Angular générer le <input> des éléments pour moi. Cependant, dans la page Web résultante, l'élément généré n'a pas d'attribut name.

Cela fait partie du code dans order-form.component.html, qui demande à l'utilisateur de saisir le nombre de types de fruits différents:

<md-list-item>
  <md-icon md-list-icon>shopping_cart</md-icon>
  <md-input-container *ngFor="let fruit of fruits" class="fruit-input">
    <input mdInput [(ngModel)]="order[fruit]" [placeholder]="capitalize(fruit)" 
           [id]="fruit" name="{{fruit}}" required value="0" #fruitInput 
           (input)="onInput(fruitInput)">
  </md-input-container>
</md-list-item>

Il s'agit du order-form.component.ts:

import { Component, OnInit } from "@angular/core";
import { Order } from "app/order";
import { PAYMENTS } from "app/payments";
import { OrderService } from "app/order.service";

@Component({
  selector: 'app-order-form',
  templateUrl: './order-form.component.html',
  styleUrls: ['./order-form.component.css']
})
export class OrderFormComponent implements OnInit {

  order = new Order();

  payments = PAYMENTS;

  fruits: string[] = [
    'apples',
    'oranges',
    'bananas'
  ];

  constructor(public service: OrderService) {
  }

  ngOnInit() {
  }

  get totalCost() {
    return this.service.getTotalCost(this.order);
  }

  onFocus(element: HTMLElement) {
    element.blur();
  }

  onSubmit() {
    console.log('onSubmit');
  }

  onInput(element: HTMLInputElement) {
    console.log(element);
    if (!this.service.isValidIntString(element.value)) {
      window.alert(`Please input a correct number for ${element.name}`);
      element.value = '0';
    }
  }

  capitalize(str: string): string {
    return this.service.capitalize(str);
  }

  get debug() {
    return JSON.stringify(this.order, null, 2);
  }
}

Dans le navigateur Chrome, lorsque je clique avec le bouton droit sur les "pommes" <input>, l'attribut name de l'élément est vide, mais le ng-reflect-name est-il correctement réglé sur apples? Comment résoudre ce problème? Pas d'attribut name ici, mais ng-reflect-name est apples

angularinputangular-material2ngfor
15
Chiu King Yee CKY

réponse finale

Utilisation ([name]="fruit" ou name="{{fruit}}") et ([attr.name]="fruit" ou attr.name="{{fruit}}") ensemble fonctionnera.

mise à jour

Si vous souhaitez utiliser la chaîne 'fruit' comme valeur pour l'attribut name, utilisez

name="fruit"

ou

name="{{'fruit'}}"

ou

[name]="'fruit'"

sinon vous liez la valeur du champ des composants fruit (que votre composant ne semble pas avoir)

original

Angular fait la liaison de propriété par défaut. Si vous voulez une liaison d'attribut, vous devez le rendre explicite

 attr.name="{{fruit}}" (for strings only)

ou

 [name]="fruit"

Voir également

24
Günter Zöchbauer